registerThemeVariantOverrides() — tailwindcss Function Reference

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

Function typescript OxideCore PreProcessors called by 1

Entity Profile

OxideCore→ PreProcessors→ registerThemeVariantOverrides() — tailwindcss Function Reference

Dependency Diagram

graph TD
  46ffaf90_4cd7_10d3_def1_7f8106191837["registerThemeVariantOverrides()"]
  9056089b_151f_3027_844b_242ce55294db["upgradeToFullPluginSupport()"]
  9056089b_151f_3027_844b_242ce55294db -->|calls| 46ffaf90_4cd7_10d3_def1_7f8106191837
  style 46ffaf90_4cd7_10d3_def1_7f8106191837 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 },
    )
  }
}