getVariants() — tailwindcss Function Reference

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

Function typescript OxideEngine Scanner calls 3 called by 1

Entity Profile

OxideEngine→ Scanner→ getVariants() — tailwindcss Function Reference

Dependency Diagram

graph TD
  07f1b2bc_24ef_8001_336d_024bfd71a55c["getVariants()"]
  65419ae8_33ea_931a_d1ac_1549de232b64["intellisense.ts"]
  07f1b2bc_24ef_8001_336d_024bfd71a55c -->|defined in| 65419ae8_33ea_931a_d1ac_1549de232b64
  9b965fd7_d8e9_0b43_cd5d_c9294ab598ed["buildDesignSystem()"]
  9b965fd7_d8e9_0b43_cd5d_c9294ab598ed -->|calls| 07f1b2bc_24ef_8001_336d_024bfd71a55c
  36be1773_d660_31ac_0b0b_88dbd7f6f7a8["styleRule()"]
  07f1b2bc_24ef_8001_336d_024bfd71a55c -->|calls| 36be1773_d660_31ac_0b0b_88dbd7f6f7a8
  adc16be1_fc13_4928_7caf_2acb3a5e9877["applyVariant()"]
  07f1b2bc_24ef_8001_336d_024bfd71a55c -->|calls| adc16be1_fc13_4928_7caf_2acb3a5e9877
  ed78da58_8727_ad98_120c_61f35cea357a["walk()"]
  07f1b2bc_24ef_8001_336d_024bfd71a55c -->|calls| ed78da58_8727_ad98_120c_61f35cea357a
  style 07f1b2bc_24ef_8001_336d_024bfd71a55c 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,