themeToVarVariant() — tailwindcss Function Reference

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

Function typescript Oxide Extractor calls 1

Entity Profile

Oxide→ Extractor→ themeToVarVariant() — tailwindcss Function Reference

Dependency Diagram

graph TD
  6647aa24_8d08_48fc_e2fd_dfbcaf425e15["themeToVarVariant()"]
  f6c14bbb_2e42_58cc_18f1_c89a243da9c0["canonicalize-candidates.ts"]
  6647aa24_8d08_48fc_e2fd_dfbcaf425e15 -->|defined in| f6c14bbb_2e42_58cc_18f1_c89a243da9c0
  0d3d890d_0584_dd18_a64e_8e1494d409e5["walkVariants()"]
  6647aa24_8d08_48fc_e2fd_dfbcaf425e15 -->|calls| 0d3d890d_0584_dd18_a64e_8e1494d409e5
  style 6647aa24_8d08_48fc_e2fd_dfbcaf425e15 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
}