resolveVariablesInValue() — tailwindcss Function Reference

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

Function typescript Oxide Extractor calls 5 called by 1

Entity Profile

Oxide→ Extractor→ resolveVariablesInValue() — tailwindcss Function Reference

Dependency Diagram

graph TD
  7b28cf23_d052_57d9_b076_5abe2b724a3f["resolveVariablesInValue()"]
  f6c14bbb_2e42_58cc_18f1_c89a243da9c0["canonicalize-candidates.ts"]
  7b28cf23_d052_57d9_b076_5abe2b724a3f -->|defined in| f6c14bbb_2e42_58cc_18f1_c89a243da9c0
  e559573b_f2f8_833b_27e7_100efea815c0["canonicalizeAst()"]
  e559573b_f2f8_833b_27e7_100efea815c0 -->|calls| 7b28cf23_d052_57d9_b076_5abe2b724a3f
  61e3cc2e_05f1_77a0_19e8_82b9e0fa97a8["resolveThemeValue()"]
  7b28cf23_d052_57d9_b076_5abe2b724a3f -->|calls| 61e3cc2e_05f1_77a0_19e8_82b9e0fa97a8
  e7db6358_7af5_e4b2_792d_749691a304cc["add()"]
  7b28cf23_d052_57d9_b076_5abe2b724a3f -->|calls| e7db6358_7af5_e4b2_792d_749691a304cc
  4982d9ce_98d4_85d9_44af_7cc47b93c482["walk()"]
  7b28cf23_d052_57d9_b076_5abe2b724a3f -->|calls| 4982d9ce_98d4_85d9_44af_7cc47b93c482
  117bca28_0677_ab3f_6eec_6019671b392d["parse()"]
  7b28cf23_d052_57d9_b076_5abe2b724a3f -->|calls| 117bca28_0677_ab3f_6eec_6019671b392d
  9b49f3c6_0c8d_5c62_965c_30a1db6499f8["toCss()"]
  7b28cf23_d052_57d9_b076_5abe2b724a3f -->|calls| 9b49f3c6_0c8d_5c62_965c_30a1db6499f8
  style 7b28cf23_d052_57d9_b076_5abe2b724a3f 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
}