applyVariant() — tailwindcss Function Reference

Architecture documentation for the applyVariant() function in compile.ts from the tailwindcss codebase.

Function typescript Oxide Extractor calls 4 called by 3

Entity Profile

Oxide→ Extractor→ applyVariant() — tailwindcss Function Reference

Dependency Diagram

graph TD
  74e35fd7_c887_0191_82e9_5c47ae4932d3["applyVariant()"]
  eea0ec96_6369_abc2_64b3_490868392e31["compile.ts"]
  74e35fd7_c887_0191_82e9_5c47ae4932d3 -->|defined in| eea0ec96_6369_abc2_64b3_490868392e31
  8b088e47_7f37_81e9_fe8a_5da6d3f5e245["compileAstNodes()"]
  8b088e47_7f37_81e9_fe8a_5da6d3f5e245 -->|calls| 74e35fd7_c887_0191_82e9_5c47ae4932d3
  fe1a2ea4_7e1e_c5fa_b348_7e00a39923a9["getVariants()"]
  fe1a2ea4_7e1e_c5fa_b348_7e00a39923a9 -->|calls| 74e35fd7_c887_0191_82e9_5c47ae4932d3
  3a0ec0d5_1240_2a2d_bde3_145d361401fa["substituteAtVariant()"]
  3a0ec0d5_1240_2a2d_bde3_145d361401fa -->|calls| 74e35fd7_c887_0191_82e9_5c47ae4932d3
  2f6881be_62d9_4b96_7331_a962ced095f7["atRule()"]
  74e35fd7_c887_0191_82e9_5c47ae4932d3 -->|calls| 2f6881be_62d9_4b96_7331_a962ced095f7
  4982d9ce_98d4_85d9_44af_7cc47b93c482["walk()"]
  74e35fd7_c887_0191_82e9_5c47ae4932d3 -->|calls| 4982d9ce_98d4_85d9_44af_7cc47b93c482
  085cf56e_8188_afb1_04da_5ccd0fb7babc["rule()"]
  74e35fd7_c887_0191_82e9_5c47ae4932d3 -->|calls| 085cf56e_8188_afb1_04da_5ccd0fb7babc
  0e687735_200d_7212_bbf6_504ebc1bfe77["get()"]
  74e35fd7_c887_0191_82e9_5c47ae4932d3 -->|calls| 0e687735_200d_7212_bbf6_504ebc1bfe77
  style 74e35fd7_c887_0191_82e9_5c47ae4932d3 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/compile.ts lines 177–258

export function applyVariant(
  node: Rule,
  variant: Variant,
  variants: Variants,
  depth: number = 0,
): null | void {
  if (variant.kind === 'arbitrary') {
    // Relative selectors are not valid as an entire arbitrary variant, only as
    // an arbitrary variant that is part of another compound variant.
    //
    // E.g. `[>img]:flex` is not valid, but `has-[>img]:flex` is
    if (variant.relative && depth === 0) return null

    node.nodes = [rule(variant.selector, node.nodes)]
    return
  }

  // SAFETY: At this point it is safe to use TypeScript's non-null assertion
  // operator because if the `candidate.root` didn't exist, `parseCandidate`
  // would have returned `null` and we would have returned early resulting in
  // not hitting this code path.
  let { applyFn } = variants.get(variant.root)!

  if (variant.kind === 'compound') {
    // Some variants traverse the AST to mutate the nodes. E.g.: `group-*` wants
    // to prefix every selector of the variant it's compounding with `.group`.
    //
    // E.g.:
    // ```
    // group-hover:[&_p]:flex
    // ```
    //
    // Should only prefix the `group-hover` part with `.group`, and not the `&_p` part.
    //
    // To solve this, we provide an isolated placeholder node to the variant.
    // The variant can now apply its logic to the isolated node without
    // affecting the original node.
    let isolatedNode = atRule('@slot')

    let result = applyVariant(isolatedNode, variant.variant, variants, depth + 1)
    if (result === null) return null

    if (variant.root === 'not' && isolatedNode.nodes.length > 1) {
      // The `not` variant cannot negate sibling rules / at-rules because these
      // are an OR relationship. Doing so would require transforming sibling
      // nodes into nesting while negating them. This isn't possible with the
      // current implementation of the `not` variant or with how variants are
      // applied in general (on a per-node basis).
      return null
    }

    for (let child of isolatedNode.nodes) {
      // Only some variants wrap children in rules. For example, the `force`
      // variant is a noop on the AST. And the `has` variant modifies the
      // selector rather than the children.
      //
      // This means `child` may be a declaration and we don't want to apply the
      // variant to it. This also means the entire variant as a whole is not
      // applicable to the rule and should generate nothing.
      if (child.kind !== 'rule' && child.kind !== 'at-rule') return null

      let result = applyFn(child, variant)
      if (result === null) return null
    }

    // Replace the placeholder node with the actual node
    {
      walk(isolatedNode.nodes, (child) => {
        if ((child.kind === 'rule' || child.kind === 'at-rule') && child.nodes.length <= 0) {
          child.nodes = node.nodes
          return WalkAction.Skip
        }
      })
      node.nodes = isolatedNode.nodes
    }
    return
  }

  // All other variants
  let result = applyFn(node, variant)
  if (result === null) return null