Ensure --default-font-* and --default-mono-font-* variables respect theme customizations in JS config files (#14344)

This PR fixes an issue where variables like `--default-font-family`
wouldn't behave as expected when customizing `fontFamily.sans` or
`fontFamily.mono` in a JS config.

Because theme values added by JS config files are added as `reference`,
customizing `fontFamily.sans` means the `--font-family-sans` variable no
longer exists in the generated CSS.

The `--default-font-family` variable is set to `var(--font-family-sans)`
by default, so because that variable doesn't exist,
`--default-font-family` is effectively undefined and the browser default
font stack is used. This is unexpected because historically customizing
`fontFamily.sans` has updated your default font for your entire project.

---------

Co-authored-by: Adam Wathan <[email protected]>

Author: adamwathan

CHANGELOG.md

@@ -23,6 +23,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Don’t suggest named opacity modifiers in intellisense ([#14339](https://github.com/tailwindlabs/tailwindcss/pull/14339))
 - Fix a crash with older Node.js versions ([#14342](https://github.com/tailwindlabs/tailwindcss/pull/14342))
 - Support defining theme values as arrays of strings in JS config files ([#14343](https://github.com/tailwindlabs/tailwindcss/pull/14343))
+- Ensure `--default-font-*` and `--default-mono-font-*` variables respect theme customizations in JS config files ([#14344](https://github.com/tailwindlabs/tailwindcss/pull/14344))
 
 ## [4.0.0-alpha.21] - 2024-09-02
 

packages/tailwindcss/src/compat/apply-config-to-theme.ts

@@ -2,19 +2,85 @@ import type { DesignSystem } from '../design-system'
 import { resolveConfig, type ConfigFile } from './config/resolve-config'
 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, configs: ConfigFile[]) {
   let theme = resolveConfig(designSystem, configs).theme
 
   for (let [path, value] of themeableValues(theme)) {
     let name = keyPathToCssProperty(path)
-
     designSystem.theme.add(`--${name}`, value as any, {
       isInline: true,
       isReference: true,
       isDefault: true,
     })
   }
 
+  // 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 = {
+      isInline: true,
+      isReference: false,
+      isDefault: true,
+    }
+
+    // Replace `--default-font-*` with `fontFamily.sans` values
+    {
+      let fontFamily = resolveThemeValue(theme.fontFamily.sans)
+      if (fontFamily && designSystem.theme.hasDefault('--font-family-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-family-mono')) {
+        designSystem.theme.add('--default-mono-font-family', 'theme(fontFamily.mono)', 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
 }