tailwindcss Architecture Docs
Home / File/ theme-variants.ts — tailwindcss Source File

theme-variants.ts — tailwindcss Source File

Architecture documentation for theme-variants.ts, a typescript file in the tailwindcss codebase. 4 imports, 1 dependents.

File typescript Oxide Scanner 4 imports 1 dependents 1 functions

Entity Profile

Dependency Diagram

graph LR
  5ee508a8_650b_2451_3569_714cacb9bf5c["theme-variants.ts"]
  bdedd2f6_da4b_69dc_e990_0814b59fbe6e["design-system.ts"]
  5ee508a8_650b_2451_3569_714cacb9bf5c --> bdedd2f6_da4b_69dc_e990_0814b59fbe6e
  665aa4ed_d86e_30e5_80d5_cd56b8ca8b62["DesignSystem"]
  5ee508a8_650b_2451_3569_714cacb9bf5c --> 665aa4ed_d86e_30e5_80d5_cd56b8ca8b62
  479eaf18_f640_94ff_bd07_456688f9ac14["types.ts"]
  5ee508a8_650b_2451_3569_714cacb9bf5c --> 479eaf18_f640_94ff_bd07_456688f9ac14
  da7f1255_7a1d_1af3_bf27_bd71a9a7671e["ResolvedConfig"]
  5ee508a8_650b_2451_3569_714cacb9bf5c --> da7f1255_7a1d_1af3_bf27_bd71a9a7671e
  2745c5e0_8ea4_a1c7_4f84_369746e3eb63["apply-compat-hooks.ts"]
  2745c5e0_8ea4_a1c7_4f84_369746e3eb63 --> 5ee508a8_650b_2451_3569_714cacb9bf5c
  style 5ee508a8_650b_2451_3569_714cacb9bf5c fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import type { DesignSystem } from '../design-system'
import type { ResolvedConfig } from './config/types'

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 },
    )
  }
}

Domain

Subdomains

Functions

Dependencies

Imported By

Source

Frequently Asked Questions

What does theme-variants.ts do?
theme-variants.ts is a source file in the tailwindcss codebase, written in typescript. It belongs to the Oxide domain, Scanner subdomain.
What functions are defined in theme-variants.ts?
theme-variants.ts defines 1 function(s): registerThemeVariantOverrides.
What does theme-variants.ts depend on?
theme-variants.ts imports 4 module(s): DesignSystem, ResolvedConfig, design-system.ts, types.ts.
What files import theme-variants.ts?
theme-variants.ts is imported by 1 file(s): apply-compat-hooks.ts.
Where is theme-variants.ts in the architecture?
theme-variants.ts is located at packages/tailwindcss/src/compat/theme-variants.ts (domain: Oxide, subdomain: Scanner, directory: packages/tailwindcss/src/compat).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free