Home / Function/ canonicalizeAst() — tailwindcss Function Reference

canonicalizeAst() — tailwindcss Function Reference

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

Entity Profile

Dependency Diagram

graph TD
  b634c4e7_2242_e72b_2b52_bbbae37fc41b["canonicalizeAst()"]
  7d350d81_5de1_f9f3_5b2c_19ec8fd3c37e["canonicalize-candidates.ts"]
  b634c4e7_2242_e72b_2b52_bbbae37fc41b -->|defined in| 7d350d81_5de1_f9f3_5b2c_19ec8fd3c37e
  3f0c9850_42a7_e7cb_36cc_12b1cb9274dd["createUtilitySignatureCache()"]
  3f0c9850_42a7_e7cb_36cc_12b1cb9274dd -->|calls| b634c4e7_2242_e72b_2b52_bbbae37fc41b
  80a88206_fcce_6e85_32d2_3f5ca73e8b39["createUtilityPropertiesCache()"]
  80a88206_fcce_6e85_32d2_3f5ca73e8b39 -->|calls| b634c4e7_2242_e72b_2b52_bbbae37fc41b
  8e1f22b2_13b1_c4b5_7edd_423453055d39["expandDeclaration()"]
  b634c4e7_2242_e72b_2b52_bbbae37fc41b -->|calls| 8e1f22b2_13b1_c4b5_7edd_423453055d39
  d7ab7b92_b8e0_123d_80fe_77ddad589042["resolveVariablesInValue()"]
  b634c4e7_2242_e72b_2b52_bbbae37fc41b -->|calls| d7ab7b92_b8e0_123d_80fe_77ddad589042
  9ab273b1_6701_5494_7f88_e2e72f74ddf7["constantFoldDeclaration()"]
  b634c4e7_2242_e72b_2b52_bbbae37fc41b -->|calls| 9ab273b1_6701_5494_7f88_e2e72f74ddf7
  dcb78b18_ea9f_1a7d_ae16_22caeb338381["printArbitraryValue()"]
  b634c4e7_2242_e72b_2b52_bbbae37fc41b -->|calls| dcb78b18_ea9f_1a7d_ae16_22caeb338381
  06ed9408_12cf_7ddd_a435_8cdd942de1d4["add()"]
  b634c4e7_2242_e72b_2b52_bbbae37fc41b -->|calls| 06ed9408_12cf_7ddd_a435_8cdd942de1d4
  ed78da58_8727_ad98_120c_61f35cea357a["walk()"]
  b634c4e7_2242_e72b_2b52_bbbae37fc41b -->|calls| ed78da58_8727_ad98_120c_61f35cea357a
  style b634c4e7_2242_e72b_2b52_bbbae37fc41b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/canonicalize-candidates.ts lines 2070–2171

function canonicalizeAst(designSystem: DesignSystem, ast: AstNode[], options: SignatureOptions) {
  let { rem } = options

  walk(ast, {
    enter(node, ctx) {
      // Optimize declarations
      if (node.kind === 'declaration') {
        if (node.value === undefined || node.property === '--tw-sort') {
          return WalkAction.Replace([])
        }

        // Ignore `--tw-{property}` if `{property}` exists with the same value
        if (node.property.startsWith('--tw-')) {
          if (
            (ctx.parent?.nodes ?? []).some(
              (sibling) =>
                sibling.kind === 'declaration' &&
                node.value === sibling.value &&
                node.important === sibling.important &&
                !sibling.property.startsWith('--tw-'),
            )
          ) {
            return WalkAction.Replace([])
          }
        }

        if (options.features & SignatureFeatures.ExpandProperties) {
          let replacement = expandDeclaration(node, options.features)
          if (replacement) return WalkAction.Replace(replacement)
        }

        // Resolve theme values to their inlined value.
        if (node.value.includes('var(')) {
          node.value = resolveVariablesInValue(node.value, designSystem)
        }

        // Very basic `calc(…)` constant folding to handle the spacing scale
        // multiplier:
        //
        // Input:  `--spacing(4)`
        //       → `calc(var(--spacing, 0.25rem) * 4)`
        //       → `calc(0.25rem * 4)`       ← this is the case we will see
        //                                     after inlining the variable
        //       → `1rem`
        node.value = constantFoldDeclaration(node.value, rem)

        // We will normalize the `node.value`, this is the same kind of logic
        // we use when printing arbitrary values. It will remove unnecessary
        // whitespace.
        //
        // Essentially normalizing the `node.value` to a canonical form.
        node.value = printArbitraryValue(node.value)
      }

      // Replace special nodes with its children
      else if (node.kind === 'context' || node.kind === 'at-root') {
        return WalkAction.Replace(node.nodes)
      }

      // Remove comments
      else if (node.kind === 'comment') {
        return WalkAction.Replace([])
      }

      // Remove at-rules that are not needed for the signature
      else if (node.kind === 'at-rule' && node.name === '@property') {
        return WalkAction.Replace([])
      }
    },
    exit(node) {
      if (node.kind === 'rule' || node.kind === 'at-rule') {
        // Remove declarations that are re-defined again later.
        //
        // This could maybe result in unwanted behavior (because similar
        // properties typically exist for backwards compatibility), but for
        // signature purposes we can assume that the last declaration wins.
        if (node.nodes.length > 1) {
          let seen = new Set<string>()
          for (let i = node.nodes.length - 1; i >= 0; i--) {
            let child = node.nodes[i]
            if (child.kind !== 'declaration') continue

Subdomains

Frequently Asked Questions

What does canonicalizeAst() do?
canonicalizeAst() is a function in the tailwindcss codebase, defined in packages/tailwindcss/src/canonicalize-candidates.ts.
Where is canonicalizeAst() defined?
canonicalizeAst() is defined in packages/tailwindcss/src/canonicalize-candidates.ts at line 2070.
What does canonicalizeAst() call?
canonicalizeAst() calls 6 function(s): add, constantFoldDeclaration, expandDeclaration, printArbitraryValue, resolveVariablesInValue, walk.
What calls canonicalizeAst()?
canonicalizeAst() is called by 2 function(s): createUtilityPropertiesCache, createUtilitySignatureCache.

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free