resolveVariablesInValue() — tailwindcss Function Reference

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

Function typescript UpgradeToolkit TemplateAnalysis calls 5 called by 1

Entity Profile

UpgradeToolkit→ TemplateAnalysis→ resolveVariablesInValue() — tailwindcss Function Reference

Dependency Diagram

graph TD
  d7ab7b92_b8e0_123d_80fe_77ddad589042["resolveVariablesInValue()"]
  7d350d81_5de1_f9f3_5b2c_19ec8fd3c37e["canonicalize-candidates.ts"]
  d7ab7b92_b8e0_123d_80fe_77ddad589042 -->|defined in| 7d350d81_5de1_f9f3_5b2c_19ec8fd3c37e
  b634c4e7_2242_e72b_2b52_bbbae37fc41b["canonicalizeAst()"]
  b634c4e7_2242_e72b_2b52_bbbae37fc41b -->|calls| d7ab7b92_b8e0_123d_80fe_77ddad589042
  80c6b9c7_f7d5_21ff_a3e4_25ec4a08f640["resolveThemeValue()"]
  d7ab7b92_b8e0_123d_80fe_77ddad589042 -->|calls| 80c6b9c7_f7d5_21ff_a3e4_25ec4a08f640
  06ed9408_12cf_7ddd_a435_8cdd942de1d4["add()"]
  d7ab7b92_b8e0_123d_80fe_77ddad589042 -->|calls| 06ed9408_12cf_7ddd_a435_8cdd942de1d4
  ed78da58_8727_ad98_120c_61f35cea357a["walk()"]
  d7ab7b92_b8e0_123d_80fe_77ddad589042 -->|calls| ed78da58_8727_ad98_120c_61f35cea357a
  b9517e77_a36f_4751_899c_27d813f3dbb3["parse()"]
  d7ab7b92_b8e0_123d_80fe_77ddad589042 -->|calls| b9517e77_a36f_4751_899c_27d813f3dbb3
  2da63033_d079_7b37_5cfb_3877674a70b9["toCss()"]
  d7ab7b92_b8e0_123d_80fe_77ddad589042 -->|calls| 2da63033_d079_7b37_5cfb_3877674a70b9
  style d7ab7b92_b8e0_123d_80fe_77ddad589042 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
}