themeToVarVariant() — tailwindcss Function Reference

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

Function typescript UpgradeToolkit TemplateAnalysis calls 1

Entity Profile

UpgradeToolkit→ TemplateAnalysis→ themeToVarVariant() — tailwindcss Function Reference

Dependency Diagram

graph TD
  74164ddb_6c84_a507_4c6d_032eba390f62["themeToVarVariant()"]
  7d350d81_5de1_f9f3_5b2c_19ec8fd3c37e["canonicalize-candidates.ts"]
  74164ddb_6c84_a507_4c6d_032eba390f62 -->|defined in| 7d350d81_5de1_f9f3_5b2c_19ec8fd3c37e
  bb11a053_5909_cc72_a9a1_0f42f67e2bf6["walkVariants()"]
  74164ddb_6c84_a507_4c6d_032eba390f62 -->|calls| bb11a053_5909_cc72_a9a1_0f42f67e2bf6
  style 74164ddb_6c84_a507_4c6d_032eba390f62 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/canonicalize-candidates.ts lines 615–637

function themeToVarVariant(
  variant: Variant,
  options: InternalCanonicalizeOptions,
): Variant | Variant[] {
  let convert = options.designSystem.storage[CONVERTER_KEY]

  let iterator = walkVariants(variant)
  for (let [variant] of iterator) {
    if (variant.kind === 'arbitrary') {
      let [newValue] = convert(variant.selector, Convert.MigrateThemeOnly)
      if (newValue !== variant.selector) {
        variant.selector = newValue
      }
    } else if (variant.kind === 'functional' && variant.value?.kind === 'arbitrary') {
      let [newValue] = convert(variant.value.value, Convert.MigrateThemeOnly)
      if (newValue !== variant.value.value) {
        variant.value.value = newValue
      }
    }
  }

  return variant
}