applyConfigToTheme() — tailwindcss Function Reference

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

Function typescript Oxide Extractor calls 6 called by 1

Entity Profile

Oxide→ Extractor→ applyConfigToTheme() — tailwindcss Function Reference

Dependency Diagram

graph TD
  652fb7ad_2f22_0667_c96e_43b408d0edbe["applyConfigToTheme()"]
  8d84257d_f3b2_cdf8_542f_835967da0481["apply-config-to-theme.ts"]
  652fb7ad_2f22_0667_c96e_43b408d0edbe -->|defined in| 8d84257d_f3b2_cdf8_542f_835967da0481
  2351a59d_92ba_1342_1dcb_39b34492170e["upgradeToFullPluginSupport()"]
  2351a59d_92ba_1342_1dcb_39b34492170e -->|calls| 652fb7ad_2f22_0667_c96e_43b408d0edbe
  1767219e_c38a_227c_492b_5d47634d54a4["keyPathToCssProperty()"]
  652fb7ad_2f22_0667_c96e_43b408d0edbe -->|calls| 1767219e_c38a_227c_492b_5d47634d54a4
  13c79f13_36f5_873e_8a2a_7d72eb200030["clearNamespace()"]
  652fb7ad_2f22_0667_c96e_43b408d0edbe -->|calls| 13c79f13_36f5_873e_8a2a_7d72eb200030
  961a5671_178b_5937_79ae_2463c9fb3bc9["themeableValues()"]
  652fb7ad_2f22_0667_c96e_43b408d0edbe -->|calls| 961a5671_178b_5937_79ae_2463c9fb3bc9
  e7db6358_7af5_e4b2_792d_749691a304cc["add()"]
  652fb7ad_2f22_0667_c96e_43b408d0edbe -->|calls| e7db6358_7af5_e4b2_792d_749691a304cc
  61e3cc2e_05f1_77a0_19e8_82b9e0fa97a8["resolveThemeValue()"]
  652fb7ad_2f22_0667_c96e_43b408d0edbe -->|calls| 61e3cc2e_05f1_77a0_19e8_82b9e0fa97a8
  83e4da67_668a_2a3c_0974_1ee12d26f5ef["hasDefault()"]
  652fb7ad_2f22_0667_c96e_43b408d0edbe -->|calls| 83e4da67_668a_2a3c_0974_1ee12d26f5ef
  style 652fb7ad_2f22_0667_c96e_43b408d0edbe 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',