allVariablesAreUsed() — tailwindcss Function Reference

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

Function typescript Oxide Extractor calls 3 called by 1

Entity Profile

Oxide→ Extractor→ allVariablesAreUsed() — tailwindcss Function Reference

Dependency Diagram

graph TD
  e065de15_2d14_7687_5e7d_5513c20a5e8c["allVariablesAreUsed()"]
  f6c14bbb_2e42_58cc_18f1_c89a243da9c0["canonicalize-candidates.ts"]
  e065de15_2d14_7687_5e7d_5513c20a5e8c -->|defined in| f6c14bbb_2e42_58cc_18f1_c89a243da9c0
  59459a7a_2e6a_375a_d02d_f7a77927b468["arbitraryUtilities()"]
  59459a7a_2e6a_375a_d02d_f7a77927b468 -->|calls| e065de15_2d14_7687_5e7d_5513c20a5e8c
  2de86ba2_90a4_8c2d_db18_154bb1a1564f["printCandidate()"]
  e065de15_2d14_7687_5e7d_5513c20a5e8c -->|calls| 2de86ba2_90a4_8c2d_db18_154bb1a1564f
  4982d9ce_98d4_85d9_44af_7cc47b93c482["walk()"]
  e065de15_2d14_7687_5e7d_5513c20a5e8c -->|calls| 4982d9ce_98d4_85d9_44af_7cc47b93c482
  117bca28_0677_ab3f_6eec_6019671b392d["parse()"]
  e065de15_2d14_7687_5e7d_5513c20a5e8c -->|calls| 117bca28_0677_ab3f_6eec_6019671b392d
  style e065de15_2d14_7687_5e7d_5513c20a5e8c 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
}