getVariants() — tailwindcss Function Reference

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

Function typescript CompilerEngine AstTransformation calls 3 called by 1

Entity Profile

CompilerEngine→ AstTransformation→ getVariants() — tailwindcss Function Reference

Dependency Diagram

graph TD
  17785b1a_7f73_4e1a_312d_b1bf01e059c3["getVariants()"]
  cebe77e1_f0f2_aeee_417e_2192f5790344["buildDesignSystem()"]
  cebe77e1_f0f2_aeee_417e_2192f5790344 -->|calls| 17785b1a_7f73_4e1a_312d_b1bf01e059c3
  c3b56f1d_0d90_0f17_2f55_85f3419d74bd["styleRule()"]
  17785b1a_7f73_4e1a_312d_b1bf01e059c3 -->|calls| c3b56f1d_0d90_0f17_2f55_85f3419d74bd
  8bb120ad_8027_cede_007f_1d5351f7ca96["applyVariant()"]
  17785b1a_7f73_4e1a_312d_b1bf01e059c3 -->|calls| 8bb120ad_8027_cede_007f_1d5351f7ca96
  e9d556bc_f22d_356c_1bd2_27442c34b5c7["walk()"]
  17785b1a_7f73_4e1a_312d_b1bf01e059c3 -->|calls| e9d556bc_f22d_356c_1bd2_27442c34b5c7
  style 17785b1a_7f73_4e1a_312d_b1bf01e059c3 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,
          values,
          isArbitrary: false,
          hasDash,
          selectors,
        })
        break
      }
      case 'functional': {
        list.push({
          name: root,
          values,
          isArbitrary: true,
          hasDash,
          selectors,
        })
        break
      }
      case 'compound': {
        list.push({
          name: root,
          values,
          isArbitrary: true,
          hasDash,
          selectors,
        })
        break
      }
    }
  }

  return list
}