resolveVariablesInValue() — tailwindcss Function Reference

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

Function typescript OxideCore Extractor calls 5 called by 1

Entity Profile

OxideCore→ Extractor→ resolveVariablesInValue() — tailwindcss Function Reference

Dependency Diagram

graph TD
  88e17ede_e457_4c87_d3c8_c491a1795810["resolveVariablesInValue()"]
  3c29a5ca_8e68_4fa2_4e91_392cf24c5a01["canonicalizeAst()"]
  3c29a5ca_8e68_4fa2_4e91_392cf24c5a01 -->|calls| 88e17ede_e457_4c87_d3c8_c491a1795810
  4b7a4cd6_9f02_0b91_8991_3889a44cd62f["resolveThemeValue()"]
  88e17ede_e457_4c87_d3c8_c491a1795810 -->|calls| 4b7a4cd6_9f02_0b91_8991_3889a44cd62f
  24d95be4_356f_a1f9_9702_2a4f413db0f5["add()"]
  88e17ede_e457_4c87_d3c8_c491a1795810 -->|calls| 24d95be4_356f_a1f9_9702_2a4f413db0f5
  fd9d5dae_4dbc_46b8_74f1_c7c51a381d0a["walk()"]
  88e17ede_e457_4c87_d3c8_c491a1795810 -->|calls| fd9d5dae_4dbc_46b8_74f1_c7c51a381d0a
  063cca62_1add_5b64_da79_f2aa9a1e5509["parse()"]
  88e17ede_e457_4c87_d3c8_c491a1795810 -->|calls| 063cca62_1add_5b64_da79_f2aa9a1e5509
  e7a34553_0273_6202_4792_07409e33d8f0["toCss()"]
  88e17ede_e457_4c87_d3c8_c491a1795810 -->|calls| e7a34553_0273_6202_4792_07409e33d8f0
  style 88e17ede_e457_4c87_d3c8_c491a1795810 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
}