applyConfigToTheme() — tailwindcss Function Reference

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

Function typescript OxideCore Scanner calls 6 called by 1

Entity Profile

OxideCore→ Scanner→ applyConfigToTheme() — tailwindcss Function Reference

Dependency Diagram

graph TD
  0a0af711_c5b8_1a31_60fe_678ff9771f13["applyConfigToTheme()"]
  9056089b_151f_3027_844b_242ce55294db["upgradeToFullPluginSupport()"]
  9056089b_151f_3027_844b_242ce55294db -->|calls| 0a0af711_c5b8_1a31_60fe_678ff9771f13
  f8dcf272_aab9_d786_7975_56fd563c0739["keyPathToCssProperty()"]
  0a0af711_c5b8_1a31_60fe_678ff9771f13 -->|calls| f8dcf272_aab9_d786_7975_56fd563c0739
  ca9197a7_55f9_0922_5cc4_25999295ca9b["clearNamespace()"]
  0a0af711_c5b8_1a31_60fe_678ff9771f13 -->|calls| ca9197a7_55f9_0922_5cc4_25999295ca9b
  3e33c90a_e618_0b36_8589_88cf333c1482["themeableValues()"]
  0a0af711_c5b8_1a31_60fe_678ff9771f13 -->|calls| 3e33c90a_e618_0b36_8589_88cf333c1482
  24d95be4_356f_a1f9_9702_2a4f413db0f5["add()"]
  0a0af711_c5b8_1a31_60fe_678ff9771f13 -->|calls| 24d95be4_356f_a1f9_9702_2a4f413db0f5
  4b7a4cd6_9f02_0b91_8991_3889a44cd62f["resolveThemeValue()"]
  0a0af711_c5b8_1a31_60fe_678ff9771f13 -->|calls| 4b7a4cd6_9f02_0b91_8991_3889a44cd62f
  94767d15_78cb_4d04_3e5b_62f8d0778fb3["hasDefault()"]
  0a0af711_c5b8_1a31_60fe_678ff9771f13 -->|calls| 94767d15_78cb_4d04_3e5b_62f8d0778fb3
  style 0a0af711_c5b8_1a31_60fe_678ff9771f13 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
}