allVariablesAreUsed() — tailwindcss Function Reference

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

Function typescript OxideCore Extractor calls 3 called by 1

Entity Profile

OxideCore→ Extractor→ allVariablesAreUsed() — tailwindcss Function Reference

Dependency Diagram

graph TD
  6fea9ec3_967d_9508_b278_ec5bbd5afb24["allVariablesAreUsed()"]
  96c91904_da91_37f1_9ad1_9d3e9e197781["arbitraryUtilities()"]
  96c91904_da91_37f1_9ad1_9d3e9e197781 -->|calls| 6fea9ec3_967d_9508_b278_ec5bbd5afb24
  4c29981d_a61a_00fb_b3b5_5a69228c4fff["printCandidate()"]
  6fea9ec3_967d_9508_b278_ec5bbd5afb24 -->|calls| 4c29981d_a61a_00fb_b3b5_5a69228c4fff
  fd9d5dae_4dbc_46b8_74f1_c7c51a381d0a["walk()"]
  6fea9ec3_967d_9508_b278_ec5bbd5afb24 -->|calls| fd9d5dae_4dbc_46b8_74f1_c7c51a381d0a
  063cca62_1add_5b64_da79_f2aa9a1e5509["parse()"]
  6fea9ec3_967d_9508_b278_ec5bbd5afb24 -->|calls| 063cca62_1add_5b64_da79_f2aa9a1e5509
  style 6fea9ec3_967d_9508_b278_ec5bbd5afb24 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
}