createVariantSignatureCache() — tailwindcss Function Reference

Architecture documentation for the createVariantSignatureCache() function in canonicalize-candidates.ts from the tailwindcss codebase.

Function typescript OxideCore PreProcessors calls 6 called by 1

Entity Profile

OxideCore→ PreProcessors→ createVariantSignatureCache() — tailwindcss Function Reference

Dependency Diagram

graph TD
  9a5c7b9b_20db_35ed_c673_96cb0dd8c459["createVariantSignatureCache()"]
  207ada18_60f2_10b9_7c9e_99bdb32f4ed7["prepareDesignSystemStorage()"]
  207ada18_60f2_10b9_7c9e_99bdb32f4ed7 -->|calls| 9a5c7b9b_20db_35ed_c673_96cb0dd8c459
  9db2a11b_4852_e036_e394_622c7a90dd1f["styleRule()"]
  9a5c7b9b_20db_35ed_c673_96cb0dd8c459 -->|calls| 9db2a11b_4852_e036_e394_622c7a90dd1f
  c35acfc6_964d_737e_6ecc_275e6f10293a["atRule()"]
  9a5c7b9b_20db_35ed_c673_96cb0dd8c459 -->|calls| c35acfc6_964d_737e_6ecc_275e6f10293a
  556f6ab2_af7d_ed90_84f0_6b49e632571a["substituteAtApply()"]
  9a5c7b9b_20db_35ed_c673_96cb0dd8c459 -->|calls| 556f6ab2_af7d_ed90_84f0_6b49e632571a
  a32bba76_f60d_883f_1ff1_276a0bb9db9f["walk()"]
  9a5c7b9b_20db_35ed_c673_96cb0dd8c459 -->|calls| a32bba76_f60d_883f_1ff1_276a0bb9db9f
  063cca62_1add_5b64_da79_f2aa9a1e5509["parse()"]
  9a5c7b9b_20db_35ed_c673_96cb0dd8c459 -->|calls| 063cca62_1add_5b64_da79_f2aa9a1e5509
  e7a34553_0273_6202_4792_07409e33d8f0["toCss()"]
  9a5c7b9b_20db_35ed_c673_96cb0dd8c459 -->|calls| e7a34553_0273_6202_4792_07409e33d8f0
  style 9a5c7b9b_20db_35ed_c673_96cb0dd8c459 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/canonicalize-candidates.ts lines 2395–2485

function createVariantSignatureCache(
  designSystem: DesignSystem,
): DesignSystem['storage'][typeof VARIANT_SIGNATURE_KEY] {
  return new DefaultMap<string, string | Symbol>((variant) => {
    try {
      // Ensure the prefix is added to the utility if it is not already present.
      variant =
        designSystem.theme.prefix && !variant.startsWith(designSystem.theme.prefix)
          ? `${designSystem.theme.prefix}:${variant}`
          : variant

      // Use `@apply` to normalize the selector to `.x`
      let ast: AstNode[] = [styleRule('.x', [atRule('@apply', `${variant}:flex`)])]
      substituteAtApply(ast, designSystem)

      // Canonicalize selectors to their minimal form
      walk(ast, (node) => {
        // At-rules
        if (node.kind === 'at-rule' && node.params.includes(' ')) {
          node.params = node.params.replaceAll(' ', '')
        }

        // Style rules
        else if (node.kind === 'rule') {
          let selectorAst = SelectorParser.parse(node.selector)
          let changed = false
          walk(selectorAst, (node) => {
            if (node.kind === 'separator' && node.value !== ' ') {
              node.value = node.value.trim()
              changed = true
            }

            // Remove unnecessary `:is(…)` selectors
            else if (node.kind === 'function' && node.value === ':is') {
              // A single selector inside of `:is(…)` can be replaced with the
              // selector itself.
              //
              // E.g.: `:is(.foo)` → `.foo`
              if (node.nodes.length === 1) {
                changed = true
                return WalkAction.Replace(node.nodes)
              }

              // A selector with the universal selector `*` followed by a pseudo
              // class, can be replaced with the pseudo class itself.
              else if (
                node.nodes.length === 2 &&
                node.nodes[0].kind === 'selector' &&
                node.nodes[0].value === '*' &&
                node.nodes[1].kind === 'selector' &&
                node.nodes[1].value[0] === ':'
              ) {
                changed = true
                return WalkAction.Replace(node.nodes[1])
              }
            }

            // Ensure `*` exists before pseudo selectors inside of `:not(…)`,
            // `:where(…)`, …
            //
            // E.g.:
            //
            // `:not(:first-child)` → `:not(*:first-child)`
            //
            else if (
              node.kind === 'function' &&
              node.value[0] === ':' &&
              node.nodes[0]?.kind === 'selector' &&
              node.nodes[0]?.value[0] === ':'
            ) {
              changed = true
              node.nodes.unshift({ kind: 'selector', value: '*' })
            }
          })

          if (changed) {
            node.selector = SelectorParser.toCss(selectorAst)
          }
        }
      })

      // Compute the final signature, by generating the CSS for the variant
      let signature = toCss(ast)
      return signature
    } catch {
      // A unique symbol is returned to ensure that 2 signatures resulting in
      // `null` are not considered equal.
      return Symbol()
    }
  })
}