allVariablesAreUsed() — tailwindcss Function Reference

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

Function typescript UpgradeToolkit TemplateAnalysis calls 3 called by 1

Entity Profile

UpgradeToolkit→ TemplateAnalysis→ allVariablesAreUsed() — tailwindcss Function Reference

Dependency Diagram

graph TD
  ae4aae64_c516_49b5_ec89_bc7918645ee4["allVariablesAreUsed()"]
  7d350d81_5de1_f9f3_5b2c_19ec8fd3c37e["canonicalize-candidates.ts"]
  ae4aae64_c516_49b5_ec89_bc7918645ee4 -->|defined in| 7d350d81_5de1_f9f3_5b2c_19ec8fd3c37e
  1fde95ca_8980_95b5_3738_6b5133f8ff3e["arbitraryUtilities()"]
  1fde95ca_8980_95b5_3738_6b5133f8ff3e -->|calls| ae4aae64_c516_49b5_ec89_bc7918645ee4
  87ba7eab_3a52_d53e_dfd4_e507e9763b55["printCandidate()"]
  ae4aae64_c516_49b5_ec89_bc7918645ee4 -->|calls| 87ba7eab_3a52_d53e_dfd4_e507e9763b55
  ed78da58_8727_ad98_120c_61f35cea357a["walk()"]
  ae4aae64_c516_49b5_ec89_bc7918645ee4 -->|calls| ed78da58_8727_ad98_120c_61f35cea357a
  b9517e77_a36f_4751_899c_27d813f3dbb3["parse()"]
  ae4aae64_c516_49b5_ec89_bc7918645ee4 -->|calls| b9517e77_a36f_4751_899c_27d813f3dbb3
  style ae4aae64_c516_49b5_ec89_bc7918645ee4 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
}