getVariants() — tailwindcss Function Reference

Architecture documentation for the getVariants() function in intellisense.ts from the tailwindcss codebase.

Function typescript Oxide Extractor calls 3 called by 1

Entity Profile

Oxide→ Extractor→ getVariants() — tailwindcss Function Reference

Dependency Diagram

graph TD
  fe1a2ea4_7e1e_c5fa_b348_7e00a39923a9["getVariants()"]
  aed99406_85bd_0230_7820_e5b6fa3efe70["intellisense.ts"]
  fe1a2ea4_7e1e_c5fa_b348_7e00a39923a9 -->|defined in| aed99406_85bd_0230_7820_e5b6fa3efe70
  e557c8a4_bb27_ee44_c462_9e238157ad04["buildDesignSystem()"]
  e557c8a4_bb27_ee44_c462_9e238157ad04 -->|calls| fe1a2ea4_7e1e_c5fa_b348_7e00a39923a9
  2a22052d_f868_4f88_0a03_2033be58172d["styleRule()"]
  fe1a2ea4_7e1e_c5fa_b348_7e00a39923a9 -->|calls| 2a22052d_f868_4f88_0a03_2033be58172d
  74e35fd7_c887_0191_82e9_5c47ae4932d3["applyVariant()"]
  fe1a2ea4_7e1e_c5fa_b348_7e00a39923a9 -->|calls| 74e35fd7_c887_0191_82e9_5c47ae4932d3
  4982d9ce_98d4_85d9_44af_7cc47b93c482["walk()"]
  fe1a2ea4_7e1e_c5fa_b348_7e00a39923a9 -->|calls| 4982d9ce_98d4_85d9_44af_7cc47b93c482
  style fe1a2ea4_7e1e_c5fa_b348_7e00a39923a9 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/intellisense.ts lines 156–268

export function getVariants(design: DesignSystem) {
  let list: VariantEntry[] = []

  for (let [root, variant] of design.variants.entries()) {
    if (variant.kind === 'arbitrary') continue

    let hasDash = root !== '@'
    let values = design.variants.getCompletions(root)

    function selectors({ value, modifier }: SelectorOptions = {}) {
      let name = root
      if (value) name += hasDash ? `-${value}` : value
      if (modifier) name += `/${modifier}`

      let variant = design.parseVariant(name)

      if (!variant) return []

      // Apply the variant to a placeholder rule
      let node = styleRule('.__placeholder__', [])

      // If the rule produces no nodes it means the variant does not apply
      if (applyVariant(node, variant, design.variants) === null) {
        return []
      }

      // Now look at the selector(s) inside the rule
      let selectors: string[] = []

      // Produce v3-style selector strings in the face of nested rules
      // this is more visible for things like group-*, not-*, etc…
      walk(node.nodes, {
        exit(node, ctx) {
          if (node.kind !== 'rule' && node.kind !== 'at-rule') return
          if (node.nodes.length > 0) return

          let path = ctx.path()
          path.push(node)

          // Sort at-rules before style rules
          path.sort((a, b) => {
            let aIsAtRule = a.kind === 'at-rule'
            let bIsAtRule = b.kind === 'at-rule'

            if (aIsAtRule && !bIsAtRule) return -1
            if (!aIsAtRule && bIsAtRule) return 1

            return 0
          })

          // A list of the selectors / at rules encountered to get to this point
          let group = path.flatMap((node) => {
            if (node.kind === 'rule') {
              return node.selector === '&' ? [] : [node.selector]
            }

            if (node.kind === 'at-rule') {
              return [`${node.name} ${node.params}`]
            }

            return []
          })

          // Build a v3-style nested selector
          let selector = ''

          for (let i = group.length - 1; i >= 0; i--) {
            selector = selector === '' ? group[i] : `${group[i]} { ${selector} }`
          }

          selectors.push(selector)
        },
      })

      return selectors
    }

    switch (variant.kind) {
      case 'static': {
        list.push({
          name: root,