getVariants() — tailwindcss Function Reference

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

Function typescript OxideCore PreProcessors calls 3 called by 1

Entity Profile

OxideCore→ PreProcessors→ getVariants() — tailwindcss Function Reference

Dependency Diagram

graph TD
  2df8f550_5e83_c7f0_edc4_d97e1a7195fc["getVariants()"]
  c58d3214_88d6_f4fc_257f_8e84def5b24f["buildDesignSystem()"]
  c58d3214_88d6_f4fc_257f_8e84def5b24f -->|calls| 2df8f550_5e83_c7f0_edc4_d97e1a7195fc
  9db2a11b_4852_e036_e394_622c7a90dd1f["styleRule()"]
  2df8f550_5e83_c7f0_edc4_d97e1a7195fc -->|calls| 9db2a11b_4852_e036_e394_622c7a90dd1f
  666b100e_8313_09d0_334c_b0fc7e6b9d54["applyVariant()"]
  2df8f550_5e83_c7f0_edc4_d97e1a7195fc -->|calls| 666b100e_8313_09d0_334c_b0fc7e6b9d54
  a32bba76_f60d_883f_1ff1_276a0bb9db9f["walk()"]
  2df8f550_5e83_c7f0_edc4_d97e1a7195fc -->|calls| a32bba76_f60d_883f_1ff1_276a0bb9db9f
  style 2df8f550_5e83_c7f0_edc4_d97e1a7195fc 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
}