resolveVariablesInValue() — tailwindcss Function Reference

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

Function typescript CompilerEngine ModuleResolution calls 5 called by 1

Entity Profile

CompilerEngine→ ModuleResolution→ resolveVariablesInValue() — tailwindcss Function Reference

Dependency Diagram

graph TD
  1d9d6293_9d1d_5445_6e1b_8f6256992b8a["resolveVariablesInValue()"]
  84dbd847_e2eb_8fba_afa7_47012ee6086f["canonicalizeAst()"]
  84dbd847_e2eb_8fba_afa7_47012ee6086f -->|calls| 1d9d6293_9d1d_5445_6e1b_8f6256992b8a
  e512528a_2506_964d_514b_bab67f99b575["resolveThemeValue()"]
  1d9d6293_9d1d_5445_6e1b_8f6256992b8a -->|calls| e512528a_2506_964d_514b_bab67f99b575
  3ba19013_498f_3c9b_5c44_0eb24efc4394["add()"]
  1d9d6293_9d1d_5445_6e1b_8f6256992b8a -->|calls| 3ba19013_498f_3c9b_5c44_0eb24efc4394
  e9d556bc_f22d_356c_1bd2_27442c34b5c7["walk()"]
  1d9d6293_9d1d_5445_6e1b_8f6256992b8a -->|calls| e9d556bc_f22d_356c_1bd2_27442c34b5c7
  cb368927_d6ec_d016_7fb3_2ea287d31108["parse()"]
  1d9d6293_9d1d_5445_6e1b_8f6256992b8a -->|calls| cb368927_d6ec_d016_7fb3_2ea287d31108
  af90c185_29a2_6c4c_ef06_b18f00f7655c["toCss()"]
  1d9d6293_9d1d_5445_6e1b_8f6256992b8a -->|calls| af90c185_29a2_6c4c_ef06_b18f00f7655c
  style 1d9d6293_9d1d_5445_6e1b_8f6256992b8a fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/canonicalize-candidates.ts lines 2212–2276

function resolveVariablesInValue(value: string, designSystem: DesignSystem): string {
  let changed = false
  let valueAst = ValueParser.parse(value)

  let seen = new Set<string>()
  walk(valueAst, (valueNode) => {
    if (valueNode.kind !== 'function') return
    if (valueNode.value !== 'var') return

    // Resolve the underlying value of the variable
    if (valueNode.nodes.length !== 1 && valueNode.nodes.length < 3) {
      return
    }

    let variable = valueNode.nodes[0].value

    // Drop the prefix from the variable name if it is present. The
    // internal variable doesn't have the prefix.
    if (designSystem.theme.prefix && variable.startsWith(`--${designSystem.theme.prefix}-`)) {
      variable = variable.slice(`--${designSystem.theme.prefix}-`.length)
    }
    let variableValue = designSystem.resolveThemeValue(variable)
    // Prevent infinite recursion when the variable value contains the
    // variable itself.
    if (seen.has(variable)) return
    seen.add(variable)
    if (variableValue === undefined) return // Couldn't resolve the variable

    // Inject variable fallbacks when no fallback is present yet.
    //
    // A fallback could consist of multiple values.
    //
    // E.g.:
    //
    // ```
    // var(--font-sans, ui-sans-serif, system-ui, sans-serif, …)
    // ```
    {
      // More than 1 argument means that a fallback is already present
      if (valueNode.nodes.length === 1) {
        // Inject the fallback value into the variable lookup
        changed = true
        valueNode.nodes.push(...ValueParser.parse(`,${variableValue}`))
      }
    }

    // Replace known variable + inlined fallback value with the value
    // itself again
    {
      // We need at least 3 arguments. The variable, the separator and a fallback value.
      if (valueNode.nodes.length >= 3) {
        let nodeAsString = ValueParser.toCss(valueNode.nodes) // This could include more than just the variable
        let constructedValue = `${valueNode.nodes[0].value},${variableValue}`
        if (nodeAsString === constructedValue) {
          changed = true
          return WalkAction.Replace(ValueParser.parse(variableValue))
        }
      }
    }
  })

  // Replace the value with the new value
  if (changed) return ValueParser.toCss(valueAst)
  return value
}