themeToVarVariant() — tailwindcss Function Reference

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

Function typescript CompilerEngine ModuleResolution calls 1

Entity Profile

CompilerEngine→ ModuleResolution→ themeToVarVariant() — tailwindcss Function Reference

Dependency Diagram

graph TD
  73acd4c1_740a_8390_1437_4748d35bae22["themeToVarVariant()"]
  5fbe9f30_4678_6100_0870_5216b48ccf87["walkVariants()"]
  73acd4c1_740a_8390_1437_4748d35bae22 -->|calls| 5fbe9f30_4678_6100_0870_5216b48ccf87
  style 73acd4c1_740a_8390_1437_4748d35bae22 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
}