optimizeAst() — tailwindcss Function Reference

Architecture documentation for the optimizeAst() function in ast.ts from the tailwindcss codebase.

Function typescript PostCSSPlugin AST calls 14 called by 2

Entity Profile

PostCSSPlugin→ AST→ optimizeAst() — tailwindcss Function Reference

Dependency Diagram

graph TD
  9f2a64dc_05ff_3425_1af8_f2dbd33c3b9a["optimizeAst()"]
  b9cbffa4_c352_cf3c_268f_cbb174fb3a47["ast.ts"]
  9f2a64dc_05ff_3425_1af8_f2dbd33c3b9a -->|defined in| b9cbffa4_c352_cf3c_268f_cbb174fb3a47
  e557c8a4_bb27_ee44_c462_9e238157ad04["buildDesignSystem()"]
  e557c8a4_bb27_ee44_c462_9e238157ad04 -->|calls| 9f2a64dc_05ff_3425_1af8_f2dbd33c3b9a
  95f6fed7_1762_4f0d_f308_50c6be9a770a["compileAst()"]
  95f6fed7_1762_4f0d_f308_50c6be9a770a -->|calls| 9f2a64dc_05ff_3425_1af8_f2dbd33c3b9a
  e7db6358_7af5_e4b2_792d_749691a304cc["add()"]
  9f2a64dc_05ff_3425_1af8_f2dbd33c3b9a -->|calls| e7db6358_7af5_e4b2_792d_749691a304cc
  44fc256b_22c1_3ae2_924e_7d583f63c030["extractUsedVariables()"]
  9f2a64dc_05ff_3425_1af8_f2dbd33c3b9a -->|calls| 44fc256b_22c1_3ae2_924e_7d583f63c030
  e12fae3f_e6b7_8314_8cf4_719ccdaedfc4["extractKeyframeNames()"]
  9f2a64dc_05ff_3425_1af8_f2dbd33c3b9a -->|calls| e12fae3f_e6b7_8314_8cf4_719ccdaedfc4
  1369a6dc_e395_347d_5d24_b88e22c5446d["decl()"]
  9f2a64dc_05ff_3425_1af8_f2dbd33c3b9a -->|calls| 1369a6dc_e395_347d_5d24_b88e22c5446d
  1a695257_28e4_0604_3f02_e52886aa117e["isVariableUsed()"]
  9f2a64dc_05ff_3425_1af8_f2dbd33c3b9a -->|calls| 1a695257_28e4_0604_3f02_e52886aa117e
  7d80bf29_fbd8_157c_53c6_1be9105005cc["prefixKey()"]
  9f2a64dc_05ff_3425_1af8_f2dbd33c3b9a -->|calls| 7d80bf29_fbd8_157c_53c6_1be9105005cc
  259dde3d_da3e_b1d0_30ff_85ba2a6327f2["findNode()"]
  9f2a64dc_05ff_3425_1af8_f2dbd33c3b9a -->|calls| 259dde3d_da3e_b1d0_30ff_85ba2a6327f2
  4982d9ce_98d4_85d9_44af_7cc47b93c482["walk()"]
  9f2a64dc_05ff_3425_1af8_f2dbd33c3b9a -->|calls| 4982d9ce_98d4_85d9_44af_7cc47b93c482
  d238f217_f342_fe65_082c_b17252edf6de["resolveValue()"]
  9f2a64dc_05ff_3425_1af8_f2dbd33c3b9a -->|calls| d238f217_f342_fe65_082c_b17252edf6de
  9b49f3c6_0c8d_5c62_965c_30a1db6499f8["toCss()"]
  9f2a64dc_05ff_3425_1af8_f2dbd33c3b9a -->|calls| 9b49f3c6_0c8d_5c62_965c_30a1db6499f8
  085cf56e_8188_afb1_04da_5ccd0fb7babc["rule()"]
  9f2a64dc_05ff_3425_1af8_f2dbd33c3b9a -->|calls| 085cf56e_8188_afb1_04da_5ccd0fb7babc
  style 9f2a64dc_05ff_3425_1af8_f2dbd33c3b9a fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/ast.ts lines 220–680

export function optimizeAst(
  ast: AstNode[],
  designSystem: DesignSystem,
  polyfills: Polyfills = Polyfills.All,
) {
  let atRoots: AstNode[] = []
  let seenAtProperties = new Set<string>()
  let cssThemeVariables = new DefaultMap<AstNode[], Set<Declaration>>(() => new Set())
  let colorMixDeclarations = new DefaultMap<AstNode[], Set<Declaration>>(() => new Set())
  let keyframes = new Set<AtRule>()
  let usedKeyframeNames = new Set()

  let propertyFallbacksRoot: Declaration[] = []
  let propertyFallbacksUniversal: Declaration[] = []

  let variableDependencies = new DefaultMap<string, Set<string>>(() => new Set())

  function transform(
    node: AstNode,
    parent: AstNode[],
    context: Record<string, string | boolean> = {},
    depth = 0,
  ) {
    // Declaration
    if (node.kind === 'declaration') {
      if (node.property === '--tw-sort' || node.value === undefined || node.value === null) {
        return
      }

      // Track variables defined in `@theme`
      if (context.theme && node.property[0] === '-' && node.property[1] === '-') {
        // Variables that resolve to `initial` should never be emitted. This can happen because of
        // the `--theme(…)` being used and evaluated lazily
        if (node.value === 'initial') {
          node.value = undefined
          return
        }

        if (!context.keyframes) {
          cssThemeVariables.get(parent).add(node)
        }
      }

      // Track used CSS variables
      if (node.value.includes('var(')) {
        // Declaring another variable does not count as usage. Instead, we mark
        // the relationship
        if (context.theme && node.property[0] === '-' && node.property[1] === '-') {
          for (let variable of extractUsedVariables(node.value)) {
            variableDependencies.get(variable).add(node.property)
          }
        } else {
          designSystem.trackUsedVariables(node.value)
        }
      }

      // Track used animation names
      if (node.property === 'animation') {
        for (let keyframeName of extractKeyframeNames(node.value)) {
          usedKeyframeNames.add(keyframeName)
        }
      }

      // Create fallback values for usages of the `color-mix(…)` function that reference variables
      // found in the theme config.
      if (
        polyfills & Polyfills.ColorMix &&
        node.value.includes('color-mix(') &&
        !context.supportsColorMix &&
        !context.keyframes
      ) {
        colorMixDeclarations.get(parent).add(node)
      }

      parent.push(node)
    }

    // Rule
    else if (node.kind === 'rule') {
      let nodes: AstNode[] = []