registerThemeVariantOverrides() — tailwindcss Function Reference

Architecture documentation for the registerThemeVariantOverrides() function in theme-variants.ts from the tailwindcss codebase.

Function typescript CompilerEngine ModuleResolution called by 1

Entity Profile

CompilerEngine→ ModuleResolution→ registerThemeVariantOverrides() — tailwindcss Function Reference

Dependency Diagram

graph TD
  2f08182a_6def_3641_10ac_c1d0b85a8e6f["registerThemeVariantOverrides()"]
  0f8ac574_990e_8595_a6ed_11422b8a8ec4["upgradeToFullPluginSupport()"]
  0f8ac574_990e_8595_a6ed_11422b8a8ec4 -->|calls| 2f08182a_6def_3641_10ac_c1d0b85a8e6f
  style 2f08182a_6def_3641_10ac_c1d0b85a8e6f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/compat/theme-variants.ts lines 4–68

export function registerThemeVariantOverrides(config: ResolvedConfig, designSystem: DesignSystem) {
  let ariaVariants = config.theme.aria || {}
  let supportsVariants = config.theme.supports || {}
  let dataVariants = config.theme.data || {}

  if (Object.keys(ariaVariants).length > 0) {
    let coreAria = designSystem.variants.get('aria')
    let applyFn = coreAria?.applyFn
    let compounds = coreAria?.compounds
    designSystem.variants.functional(
      'aria',
      (ruleNode, variant) => {
        let value = variant.value
        if (value && value.kind === 'named' && value.value in ariaVariants) {
          return applyFn?.(ruleNode, {
            ...variant,
            value: { kind: 'arbitrary', value: ariaVariants[value.value] as string },
          })
        }
        return applyFn?.(ruleNode, variant)
      },
      { compounds },
    )
  }

  if (Object.keys(supportsVariants).length > 0) {
    let coreSupports = designSystem.variants.get('supports')
    let applyFn = coreSupports?.applyFn
    let compounds = coreSupports?.compounds
    designSystem.variants.functional(
      'supports',
      (ruleNode, variant) => {
        let value = variant.value
        if (value && value.kind === 'named' && value.value in supportsVariants) {
          return applyFn?.(ruleNode, {
            ...variant,
            value: { kind: 'arbitrary', value: supportsVariants[value.value] as string },
          })
        }
        return applyFn?.(ruleNode, variant)
      },
      { compounds },
    )
  }

  if (Object.keys(dataVariants).length > 0) {
    let coreData = designSystem.variants.get('data')
    let applyFn = coreData?.applyFn
    let compounds = coreData?.compounds
    designSystem.variants.functional(
      'data',
      (ruleNode, variant) => {
        let value = variant.value
        if (value && value.kind === 'named' && value.value in dataVariants) {
          return applyFn?.(ruleNode, {
            ...variant,
            value: { kind: 'arbitrary', value: dataVariants[value.value] as string },
          })
        }
        return applyFn?.(ruleNode, variant)
      },
      { compounds },
    )
  }
}