allVariablesAreUsed() — tailwindcss Function Reference

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

Function typescript CompilerEngine AstTransformation calls 3 called by 1

Entity Profile

CompilerEngine→ AstTransformation→ allVariablesAreUsed() — tailwindcss Function Reference

Dependency Diagram

graph TD
  025cd786_c6cd_4dc8_21b2_25bd225f52f3["allVariablesAreUsed()"]
  a65f8d6f_368a_80d1_0677_401c085c0a5b["arbitraryUtilities()"]
  a65f8d6f_368a_80d1_0677_401c085c0a5b -->|calls| 025cd786_c6cd_4dc8_21b2_25bd225f52f3
  ec55634f_f6e4_3b8b_1267_0b251c4dade1["printCandidate()"]
  025cd786_c6cd_4dc8_21b2_25bd225f52f3 -->|calls| ec55634f_f6e4_3b8b_1267_0b251c4dade1
  d2ce75c7_eb19_6cb1_229b_297218cbe158["walk()"]
  025cd786_c6cd_4dc8_21b2_25bd225f52f3 -->|calls| d2ce75c7_eb19_6cb1_229b_297218cbe158
  cb368927_d6ec_d016_7fb3_2ea287d31108["parse()"]
  025cd786_c6cd_4dc8_21b2_25bd225f52f3 -->|calls| cb368927_d6ec_d016_7fb3_2ea287d31108
  style 025cd786_c6cd_4dc8_21b2_25bd225f52f3 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/canonicalize-candidates.ts lines 1149–1198

function allVariablesAreUsed(
  designSystem: DesignSystem,
  candidate: Candidate,
  replacement: Candidate,
) {
  let value: string | null = null

  // Functional utility with arbitrary value and variables
  if (
    candidate.kind === 'functional' &&
    candidate.value?.kind === 'arbitrary' &&
    candidate.value.value.includes('var(--')
  ) {
    value = candidate.value.value
  }

  // Arbitrary property with variables
  else if (candidate.kind === 'arbitrary' && candidate.value.includes('var(--')) {
    value = candidate.value
  }

  // No variables in the value, so this is a safe migration
  if (value === null) {
    return true
  }

  let replacementAsCss = designSystem
    .candidatesToCss([designSystem.printCandidate(replacement)])
    .join('\n')

  let isSafeMigration = true
  walk(ValueParser.parse(value), (node) => {
    if (node.kind === 'function' && node.value === 'var') {
      let variable = node.nodes[0].value
      let r = new RegExp(`var\\(${variable}[,)]\\s*`, 'g')
      if (
        // We need to check if the variable is used in the replacement
        !r.test(replacementAsCss) ||
        // The value cannot be set to a different value in the
        // replacement because that would make it an unsafe migration
        replacementAsCss.includes(`${variable}:`)
      ) {
        isSafeMigration = false
        return WalkAction.Stop
      }
    }
  })

  return isSafeMigration
}