applyConfigToTheme() — tailwindcss Function Reference

Architecture documentation for the applyConfigToTheme() function in apply-config-to-theme.ts from the tailwindcss codebase.

Function typescript UpgradeToolkit TemplateAnalysis calls 6 called by 1

Entity Profile

UpgradeToolkit→ TemplateAnalysis→ applyConfigToTheme() — tailwindcss Function Reference

Dependency Diagram

graph TD
  9fb2cb3b_46e1_4148_c220_0e7f4519db6d["applyConfigToTheme()"]
  245c850a_c551_a2cf_854e_bba95b5a1339["apply-config-to-theme.ts"]
  9fb2cb3b_46e1_4148_c220_0e7f4519db6d -->|defined in| 245c850a_c551_a2cf_854e_bba95b5a1339
  1a022c10_a26e_d793_740c_267a533619c4["upgradeToFullPluginSupport()"]
  1a022c10_a26e_d793_740c_267a533619c4 -->|calls| 9fb2cb3b_46e1_4148_c220_0e7f4519db6d
  ae20c4fb_29d7_ca79_3c49_ca02c45d5369["keyPathToCssProperty()"]
  9fb2cb3b_46e1_4148_c220_0e7f4519db6d -->|calls| ae20c4fb_29d7_ca79_3c49_ca02c45d5369
  c418c4a6_69f1_be06_3756_ed0a7a88584f["clearNamespace()"]
  9fb2cb3b_46e1_4148_c220_0e7f4519db6d -->|calls| c418c4a6_69f1_be06_3756_ed0a7a88584f
  f0444c59_74bb_21c0_b8e1_c65ad667fa51["themeableValues()"]
  9fb2cb3b_46e1_4148_c220_0e7f4519db6d -->|calls| f0444c59_74bb_21c0_b8e1_c65ad667fa51
  06ed9408_12cf_7ddd_a435_8cdd942de1d4["add()"]
  9fb2cb3b_46e1_4148_c220_0e7f4519db6d -->|calls| 06ed9408_12cf_7ddd_a435_8cdd942de1d4
  80c6b9c7_f7d5_21ff_a3e4_25ec4a08f640["resolveThemeValue()"]
  9fb2cb3b_46e1_4148_c220_0e7f4519db6d -->|calls| 80c6b9c7_f7d5_21ff_a3e4_25ec4a08f640
  68bbe6c5_9c3c_9047_344a_8cb9610bab8e["hasDefault()"]
  9fb2cb3b_46e1_4148_c220_0e7f4519db6d -->|calls| 68bbe6c5_9c3c_9047_344a_8cb9610bab8e
  style 9fb2cb3b_46e1_4148_c220_0e7f4519db6d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/compat/apply-config-to-theme.ts lines 22–110

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

  // If someone has updated `fontFamily.sans` or `fontFamily.mono` in a JS
  // config, we need to make sure variables like `--default-font-family` and
  // `--default-font-feature-settings` are updated to match those explicit
  // values, because variables like `--font-family-sans` and
  // `--font-family-sans--feature-settings` (which the `--default-font-*`
  // variables reference) won't exist in the generated CSS.
  if (Object.hasOwn(theme, 'fontFamily')) {
    let options = ThemeOptions.INLINE | ThemeOptions.DEFAULT

    // Replace `--default-font-*` with `fontFamily.sans` values
    {
      let fontFamily = resolveThemeValue(theme.fontFamily.sans)
      if (fontFamily && designSystem.theme.hasDefault('--font-sans')) {
        designSystem.theme.add('--default-font-family', fontFamily, options)
        designSystem.theme.add(
          '--default-font-feature-settings',
          resolveThemeValue(theme.fontFamily.sans, 'fontFeatureSettings') ?? 'normal',
          options,
        )
        designSystem.theme.add(
          '--default-font-variation-settings',
          resolveThemeValue(theme.fontFamily.sans, 'fontVariationSettings') ?? 'normal',
          options,
        )
      }
    }

    // Replace `--default-mono-font-*` with `fontFamily.mono` values
    {
      let fontFamily = resolveThemeValue(theme.fontFamily.mono)
      if (fontFamily && designSystem.theme.hasDefault('--font-mono')) {
        designSystem.theme.add('--default-mono-font-family', fontFamily, options)
        designSystem.theme.add(
          '--default-mono-font-feature-settings',
          resolveThemeValue(theme.fontFamily.mono, 'fontFeatureSettings') ?? 'normal',
          options,
        )
        designSystem.theme.add(
          '--default-mono-font-variation-settings',
          resolveThemeValue(theme.fontFamily.mono, 'fontVariationSettings') ?? 'normal',