createVariantSignatureCache() — tailwindcss Function Reference

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

Function typescript CompilerEngine AstTransformation calls 6 called by 1

Entity Profile

CompilerEngine→ AstTransformation→ createVariantSignatureCache() — tailwindcss Function Reference

Dependency Diagram

graph TD
  cb063cf6_f495_bb4b_84d1_f1d23fb0dae1["createVariantSignatureCache()"]
  20406e7c_6ee8_4626_dbef_5b37708f4d30["prepareDesignSystemStorage()"]
  20406e7c_6ee8_4626_dbef_5b37708f4d30 -->|calls| cb063cf6_f495_bb4b_84d1_f1d23fb0dae1
  c3b56f1d_0d90_0f17_2f55_85f3419d74bd["styleRule()"]
  cb063cf6_f495_bb4b_84d1_f1d23fb0dae1 -->|calls| c3b56f1d_0d90_0f17_2f55_85f3419d74bd
  a9af385a_fd12_f1d8_7cf0_ccb9b281ca18["atRule()"]
  cb063cf6_f495_bb4b_84d1_f1d23fb0dae1 -->|calls| a9af385a_fd12_f1d8_7cf0_ccb9b281ca18
  5f3acb43_b93f_4293_caaa_25ba26d38178["substituteAtApply()"]
  cb063cf6_f495_bb4b_84d1_f1d23fb0dae1 -->|calls| 5f3acb43_b93f_4293_caaa_25ba26d38178
  d2ce75c7_eb19_6cb1_229b_297218cbe158["walk()"]
  cb063cf6_f495_bb4b_84d1_f1d23fb0dae1 -->|calls| d2ce75c7_eb19_6cb1_229b_297218cbe158
  cb368927_d6ec_d016_7fb3_2ea287d31108["parse()"]
  cb063cf6_f495_bb4b_84d1_f1d23fb0dae1 -->|calls| cb368927_d6ec_d016_7fb3_2ea287d31108
  af90c185_29a2_6c4c_ef06_b18f00f7655c["toCss()"]
  cb063cf6_f495_bb4b_84d1_f1d23fb0dae1 -->|calls| af90c185_29a2_6c4c_ef06_b18f00f7655c
  style cb063cf6_f495_bb4b_84d1_f1d23fb0dae1 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()
    }
  })
}