Correctly merge tuple values when using the plugin API (#14260)

We noticed that when the `defaultTheme` (change for this is coming in
#14257) defines a tuple that is also defined in the CSS theme, the
values are incorrectly merged as objects instead of overwritten.
However, CSS theme values should take precedence, even when they use
tuple syntax.

Proper coverage of this will come once `#14257` is merged when calling
`theme(fontSize.xs[1].lineHeight)` will also have a default value passed
in from the `defaultTheme`.

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Bring back type exports for the cjs build of `@tailwindcss/postcss`. ([#14256](https://github.com/tailwindlabs/tailwindcss/pull/14256))
+- Correctly merge tuple values when using the plugin API ([#14260](https://github.com/tailwindlabs/tailwindcss/pull/14260))
 
 ## [4.0.0-alpha.20] - 2024-08-23
 

packages/tailwindcss/src/functions.test.ts

@@ -265,8 +265,8 @@ describe('theme function', () => {
           expect(
             await compileCss(css`
               @theme {
-                --font-size-xs: 0.75rem;
-                --font-size-xs--line-height: 1rem;
+                --font-size-xs: 1337.75rem;
+                --font-size-xs--line-height: 1337rem;
               }
               .text {
                 font-size: theme(fontSize.xs);
@@ -275,13 +275,13 @@ describe('theme function', () => {
             `),
           ).toMatchInlineSnapshot(`
             ":root {
-              --font-size-xs: .75rem;
-              --font-size-xs--line-height: 1rem;
+              --font-size-xs: 1337.75rem;
+              --font-size-xs--line-height: 1337rem;
             }
 
             .text {
-              font-size: .75rem;
-              line-height: 1rem;
+              font-size: 1337.75rem;
+              line-height: 1337rem;
             }"
           `)
         })

packages/tailwindcss/src/theme-fn.ts

@@ -20,7 +20,7 @@ export function createThemeFn(
 
     let configValue = resolveValue(get(configTheme() ?? {}, keypath) ?? null)
 
-    if (configValue !== null && typeof configValue === 'object') {
+    if (configValue !== null && typeof configValue === 'object' && !Array.isArray(configValue)) {
       return deepMerge({}, [configValue, cssValue], (_, b) => b)
     }