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. 2 imports, 1 dependents.

File typescript OxideEngine Extractor 2 imports 1 dependents 1 functions

Entity Profile

Dependency Diagram

graph LR
  dc6f7117_a7a8_9fe6_8e77_b5707eeb53d9["theme-variants.ts"]
  7fd72d4c_e95c_d849_1002_1e1c9d8aca1a["design-system.ts"]
  dc6f7117_a7a8_9fe6_8e77_b5707eeb53d9 --> 7fd72d4c_e95c_d849_1002_1e1c9d8aca1a
  c1272aed_91bb_73df_0746_d55fa9b302fd["types.ts"]
  dc6f7117_a7a8_9fe6_8e77_b5707eeb53d9 --> c1272aed_91bb_73df_0746_d55fa9b302fd
  daaadd53_16ee_21c6_12d9_8feaac80a91b["apply-compat-hooks.ts"]
  daaadd53_16ee_21c6_12d9_8feaac80a91b --> dc6f7117_a7a8_9fe6_8e77_b5707eeb53d9
  style dc6f7117_a7a8_9fe6_8e77_b5707eeb53d9 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 OxideEngine domain, Extractor 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 2 module(s): 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: OxideEngine, subdomain: Extractor, 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