applyConfigToTheme() — tailwindcss Function Reference

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

Function typescript CompilerEngine AstTransformation calls 6 called by 1

Entity Profile

CompilerEngine→ AstTransformation→ applyConfigToTheme() — tailwindcss Function Reference

Dependency Diagram

graph TD
  ffa1d3be_8116_7cd8_db2c_a42892f9c21a["applyConfigToTheme()"]
  0f8ac574_990e_8595_a6ed_11422b8a8ec4["upgradeToFullPluginSupport()"]
  0f8ac574_990e_8595_a6ed_11422b8a8ec4 -->|calls| ffa1d3be_8116_7cd8_db2c_a42892f9c21a
  971f7bc7_6ac2_a554_ba52_47038ff41b13["keyPathToCssProperty()"]
  ffa1d3be_8116_7cd8_db2c_a42892f9c21a -->|calls| 971f7bc7_6ac2_a554_ba52_47038ff41b13
  7a3007c6_d56a_70bb_5273_042b0b3e31d5["clearNamespace()"]
  ffa1d3be_8116_7cd8_db2c_a42892f9c21a -->|calls| 7a3007c6_d56a_70bb_5273_042b0b3e31d5
  303b7e7d_33cb_6a63_7591_f61feb3c4e3d["themeableValues()"]
  ffa1d3be_8116_7cd8_db2c_a42892f9c21a -->|calls| 303b7e7d_33cb_6a63_7591_f61feb3c4e3d
  3ba19013_498f_3c9b_5c44_0eb24efc4394["add()"]
  ffa1d3be_8116_7cd8_db2c_a42892f9c21a -->|calls| 3ba19013_498f_3c9b_5c44_0eb24efc4394
  e512528a_2506_964d_514b_bab67f99b575["resolveThemeValue()"]
  ffa1d3be_8116_7cd8_db2c_a42892f9c21a -->|calls| e512528a_2506_964d_514b_bab67f99b575
  9248ef05_c138_491c_7e01_0a040ad2062a["hasDefault()"]
  ffa1d3be_8116_7cd8_db2c_a42892f9c21a -->|calls| 9248ef05_c138_491c_7e01_0a040ad2062a
  style ffa1d3be_8116_7cd8_db2c_a42892f9c21a 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',
          options,
        )
      }
    }
  }

  return theme
}