tailwindcss Architecture Docs
Home / File/ apply-config-to-theme.ts — tailwindcss Source File

apply-config-to-theme.ts — tailwindcss Source File

Architecture documentation for apply-config-to-theme.ts, a typescript file in the tailwindcss codebase. 6 imports, 7 dependents.

File typescript Oxide Extractor 6 imports 7 dependents 7 functions

Entity Profile

Dependency Diagram

graph LR
  8d84257d_f3b2_cdf8_542f_835967da0481["apply-config-to-theme.ts"]
  bdedd2f6_da4b_69dc_e990_0814b59fbe6e["design-system.ts"]
  8d84257d_f3b2_cdf8_542f_835967da0481 --> bdedd2f6_da4b_69dc_e990_0814b59fbe6e
  665aa4ed_d86e_30e5_80d5_cd56b8ca8b62["DesignSystem"]
  8d84257d_f3b2_cdf8_542f_835967da0481 --> 665aa4ed_d86e_30e5_80d5_cd56b8ca8b62
  e28cd4a7_4e1a_e79b_76f1_86c479c6640d["theme.ts"]
  8d84257d_f3b2_cdf8_542f_835967da0481 --> e28cd4a7_4e1a_e79b_76f1_86c479c6640d
  f504aa6c_d026_cb8e_0a17_653514de8526["ThemeOptions"]
  8d84257d_f3b2_cdf8_542f_835967da0481 --> f504aa6c_d026_cb8e_0a17_653514de8526
  479eaf18_f640_94ff_bd07_456688f9ac14["types.ts"]
  8d84257d_f3b2_cdf8_542f_835967da0481 --> 479eaf18_f640_94ff_bd07_456688f9ac14
  da7f1255_7a1d_1af3_bf27_bd71a9a7671e["ResolvedConfig"]
  8d84257d_f3b2_cdf8_542f_835967da0481 --> da7f1255_7a1d_1af3_bf27_bd71a9a7671e
  ffe9c87e_35ad_f431_9625_80fc875792a7["migrate-js-config.ts"]
  ffe9c87e_35ad_f431_9625_80fc875792a7 --> 8d84257d_f3b2_cdf8_542f_835967da0481
  f67a6019_88a0_ffd1_f91c_1a51645f6931["migrate-preflight.ts"]
  f67a6019_88a0_ffd1_f91c_1a51645f6931 --> 8d84257d_f3b2_cdf8_542f_835967da0481
  c36efdeb_7fd2_0935_2c28_bf15095a9dd9["migrate-theme-to-var.ts"]
  c36efdeb_7fd2_0935_2c28_bf15095a9dd9 --> 8d84257d_f3b2_cdf8_542f_835967da0481
  f6c14bbb_2e42_58cc_18f1_c89a243da9c0["canonicalize-candidates.ts"]
  f6c14bbb_2e42_58cc_18f1_c89a243da9c0 --> 8d84257d_f3b2_cdf8_542f_835967da0481
  2745c5e0_8ea4_a1c7_4f84_369746e3eb63["apply-compat-hooks.ts"]
  2745c5e0_8ea4_a1c7_4f84_369746e3eb63 --> 8d84257d_f3b2_cdf8_542f_835967da0481
  a922bb33_3f2e_e308_4b32_7fce412f48e0["apply-config-to-theme.test.ts"]
  a922bb33_3f2e_e308_4b32_7fce412f48e0 --> 8d84257d_f3b2_cdf8_542f_835967da0481
  3d2f062b_d3ec_6b3a_dc32_9d2e4732e20e["plugin-functions.ts"]
  3d2f062b_d3ec_6b3a_dc32_9d2e4732e20e --> 8d84257d_f3b2_cdf8_542f_835967da0481
  style 8d84257d_f3b2_cdf8_542f_835967da0481 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

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

function resolveThemeValue(value: unknown, subValue: string | null = null): string | null {
  if (
    Array.isArray(value) &&
    value.length === 2 &&
    typeof value[1] === 'object' &&
    typeof value[1] !== null
  ) {
    return subValue ? (value[1][subValue] ?? null) : value[0]
  } else if (Array.isArray(value) && subValue === null) {
    return value.join(', ')
  } else if (typeof value === 'string' && subValue === null) {
    return value
  }

  return null
}

export function applyConfigToTheme(
  designSystem: DesignSystem,
  { theme }: ResolvedConfig,
  replacedThemeKeys: Set<string>,
) {
  for (let replacedThemeKey of replacedThemeKeys) {
    let name = keyPathToCssProperty([replacedThemeKey])
    if (!name) continue

    designSystem.theme.clearNamespace(`--${name}`, ThemeOptions.DEFAULT)
  }

  for (let [path, value] of themeableValues(theme)) {
    if (typeof value !== 'string' && typeof value !== 'number') {
      continue
    }

    // Replace `<alpha-value>` with `1`
    if (typeof value === 'string') {
      value = value.replace(/<alpha-value>/g, '1')
    }

    // Convert `opacity` namespace from decimal to percentage values
    if (path[0] === 'opacity' && (typeof value === 'number' || typeof value === 'string')) {
      let numValue = typeof value === 'string' ? parseFloat(value) : value

      if (numValue >= 0 && numValue <= 1) {
        value = numValue * 100 + '%'
      }
    }

    let name = keyPathToCssProperty(path)
    if (!name) continue

    designSystem.theme.add(
      `--${name}`,
      '' + value,
      ThemeOptions.INLINE | ThemeOptions.REFERENCE | ThemeOptions.DEFAULT,
    )
// ... (244 more lines)

Domain

Subdomains

Functions

Types

Dependencies

Imported By

Source

Frequently Asked Questions

What does apply-config-to-theme.ts do?
apply-config-to-theme.ts is a source file in the tailwindcss codebase, written in typescript. It belongs to the Oxide domain, Extractor subdomain.
What functions are defined in apply-config-to-theme.ts?
apply-config-to-theme.ts defines 7 function(s): applyConfigToTheme, isValidThemePrimitive, isValidThemeTuple, keyPathToCssProperty, resolveThemeValue, themeableValues, walk.
What does apply-config-to-theme.ts depend on?
apply-config-to-theme.ts imports 6 module(s): DesignSystem, ResolvedConfig, ThemeOptions, design-system.ts, theme.ts, types.ts.
What files import apply-config-to-theme.ts?
apply-config-to-theme.ts is imported by 7 file(s): apply-compat-hooks.ts, apply-config-to-theme.test.ts, canonicalize-candidates.ts, migrate-js-config.ts, migrate-preflight.ts, migrate-theme-to-var.ts, plugin-functions.ts.
Where is apply-config-to-theme.ts in the architecture?
apply-config-to-theme.ts is located at packages/tailwindcss/src/compat/apply-config-to-theme.ts (domain: Oxide, 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