Merge all keys correctly

integrations/upgrade/js-config.test.ts

@@ -18,14 +18,14 @@ test(
 
         module.exports = {
           darkMode: 'selector',
-          content: ['./src/**/*.{html,js}'],
+          content: ['./src/**/*.{html,js}', './my-app/**/*.{html,js}'],
           theme: {
             boxShadow: {
               sm: '0 2px 6px rgb(15 23 42 / 0.08)',
             },
             colors: {
               red: {
-                500: '#ef4444',
+                500: 'red',
               },
             },
             fontSize: {
@@ -36,6 +36,7 @@ test(
             extend: {
               colors: {
                 red: {
+                  500: '#ef4444',
                   600: '#dc2626',
                 },
               },
@@ -68,6 +69,8 @@ test(
 
       @source './**/*.{html,js}';
 
+      @source '../my-app/**/*.{html,js}';
+
       @variant dark (&:where(.dark, .dark *));
 
       @theme {
@@ -76,6 +79,7 @@ test(
 
         --color-*: initial;
         --color-red-500: #ef4444;
+        --color-red-600: #dc2626;
 
         --font-size-*: initial;
         --font-size-xs: 0.75rem;
@@ -85,12 +89,10 @@ test(
         --font-size-base: 1rem;
         --font-size-base--line-height: 2rem;
 
-        --color-red-600: #dc2626;
-
         --font-family-sans: Inter, system-ui, sans-serif;
         --font-family-display: Cabinet Grotesk, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 
-        --border-radius-4xl: 2rem;
+        --radius-4xl: 2rem;
       }
       "
     `)

packages/@tailwindcss-upgrade/src/migrate-js-config.ts

@@ -8,6 +8,8 @@ import {
   keyPathToCssProperty,
   themeableValues,
 } from '../../tailwindcss/src/compat/apply-config-to-theme'
+import { deepMerge } from '../../tailwindcss/src/compat/config/deep-merge'
+import { mergeThemeExtension } from '../../tailwindcss/src/compat/config/resolve-config'
 import { darkModePlugin } from '../../tailwindcss/src/compat/dark-mode'
 import { info } from './utils/renderer'
 
@@ -61,30 +63,28 @@ export async function migrateJsConfig(
 async function migrateTheme(unresolvedConfig: Config & { theme: any }): Promise<string> {
   let { extend: extendTheme, ...overwriteTheme } = unresolvedConfig.theme
 
-  let resetNamespaces = new Set()
-  let prevSectionKey = ''
-
-  let css = `@theme {`
+  let resetNamespaces = new Map<string, boolean>()
+  // Before we merge the resetting theme values with the `extend` values, we
+  // capture all namespaces that need to be reset
   for (let [key, value] of themeableValues(overwriteTheme)) {
     if (typeof value !== 'string' && typeof value !== 'number') {
       continue
     }
 
-    let sectionKey = createSectionKey(key)
-    if (sectionKey !== prevSectionKey) {
-      css += `\n`
-      prevSectionKey = sectionKey
-    }
-
     if (!resetNamespaces.has(key[0])) {
-      resetNamespaces.add(key[0])
-      css += `  --${keyPathToCssProperty([key[0]])}-*: initial;\n`
+      resetNamespaces.set(key[0], false)
+      // css += `  --${keyPathToCssProperty([key[0]])}-*: initial;\n`
     }
 
-    css += `  --${keyPathToCssProperty(key)}: ${value};\n`
+    // css += `  --${keyPathToCssProperty(key)}: ${value};\n`
   }
 
-  for (let [key, value] of themeableValues(extendTheme)) {
+  let themeValues = deepMerge({}, [overwriteTheme, extendTheme], mergeThemeExtension)
+
+  let prevSectionKey = ''
+
+  let css = `@theme {`
+  for (let [key, value] of themeableValues(themeValues)) {
     if (typeof value !== 'string' && typeof value !== 'number') {
       continue
     }
@@ -95,6 +95,11 @@ async function migrateTheme(unresolvedConfig: Config & { theme: any }): Promise<
       prevSectionKey = sectionKey
     }
 
+    if (resetNamespaces.has(key[0]) && resetNamespaces.get(key[0]) === false) {
+      resetNamespaces.set(key[0], true)
+      css += `  --${keyPathToCssProperty([key[0]])}-*: initial;\n`
+    }
+
     css += `  --${keyPathToCssProperty(key)}: ${value};\n`
   }
 
@@ -149,7 +154,7 @@ function isSimpleConfig(unresolvedConfig: Config, source: string): boolean {
   }
 
   // The file may not contain non-serializable values
-  function isSimpleValue (value: unknown): boolean {
+  function isSimpleValue(value: unknown): boolean {
     if (typeof value === 'function') return false
     if (Array.isArray(value)) return value.every(isSimpleValue)
     if (typeof value === 'object' && value !== null) {

packages/tailwindcss/src/compat/config/resolve-config.ts

@@ -87,7 +87,7 @@ export function resolveConfig(design: DesignSystem, files: ConfigFile[]): Resolv
   }
 }
 
-function mergeThemeExtension(
+export function mergeThemeExtension(
   themeValue: ThemeValue | ThemeValue[],
   extensionValue: ThemeValue | ThemeValue[],
 ) {