From 0796653527ee22685662c1c45c738593dd3f2fdc Mon Sep 17 00:00:00 2001
From: Philipp Spiess <hello@philippspiess.com>
Date: Mon, 26 Aug 2024 16:23:52 +0200
Subject: [PATCH] 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                               |  1 +
 packages/tailwindcss/src/functions.test.ts | 12 ++++++------
 packages/tailwindcss/src/theme-fn.ts       |  2 +-
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d590b614d..f6f62b602 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/packages/tailwindcss/src/functions.test.ts b/packages/tailwindcss/src/functions.test.ts
index 369785136..91d7fe6b4 100644
--- a/packages/tailwindcss/src/functions.test.ts
+++ b/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;
             }"
           `)
         })
diff --git a/packages/tailwindcss/src/theme-fn.ts b/packages/tailwindcss/src/theme-fn.ts
index 5e066bc63..08fd8d6e1 100644
--- a/packages/tailwindcss/src/theme-fn.ts
+++ b/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)
     }