Add test cases for not-yet-migrateable configs

CHANGELOG.md

@@ -14,7 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - _Upgrade (experimental)_: Migrate v3 PostCSS setups to v4 in some cases ([#14612](https://github.com/tailwindlabs/tailwindcss/pull/14612))
 - _Upgrade (experimental)_: The upgrade tool now automatically discovers your JavaScript config ([#14597](https://github.com/tailwindlabs/tailwindcss/pull/14597))
 - _Upgrade (experimental)_: Migrate legacy classes to the v4 alternative ([#14643](https://github.com/tailwindlabs/tailwindcss/pull/14643))
-- _Upgrade (experimental)_: Fully convert simple JS configs to CSS ([#14639](https://github.com/tailwindlabs/tailwindcss/pull/14639))
+- _Upgrade (experimental)_: Migrate static JS configurations to CSS ([#14639](https://github.com/tailwindlabs/tailwindcss/pull/14639))
 
 ### Fixed
 

integrations/upgrade/js-config.test.ts

@@ -103,7 +103,198 @@ test(
 )
 
 test(
-  `does not upgrade a complex JS config file to CSS`,
+  'does not upgrade JS config files with functions in the theme config',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "dependencies": {
+            "@tailwindcss/upgrade": "workspace:^"
+          }
+        }
+      `,
+      'tailwind.config.ts': ts`
+        import { type Config } from 'tailwindcss'
+
+        export default {
+          theme: {
+            extend: {
+              colors: ({ colors }) => ({
+                gray: colors.neutral,
+              }),
+            },
+          },
+        } satisfies Config
+      `,
+      'src/input.css': css`
+        @tailwind base;
+        @tailwind components;
+        @tailwind utilities;
+      `,
+    },
+  },
+  async ({ exec, fs }) => {
+    await exec('npx @tailwindcss/upgrade')
+
+    expect(await fs.dumpFiles('src/**/*.{css,ts}')).toMatchInlineSnapshot(`
+      "
+      --- src/input.css ---
+      @import 'tailwindcss';
+      @config '../tailwind.config.ts';
+      "
+    `)
+
+    expect(await fs.dumpFiles('tailwind.config.ts')).toMatchInlineSnapshot(`
+      "
+      --- tailwind.config.ts ---
+      import { type Config } from 'tailwindcss'
+
+      export default {
+        theme: {
+          extend: {
+            colors: ({ colors }) => ({
+              gray: colors.neutral,
+            }),
+          },
+        },
+      } satisfies Config
+      "
+    `)
+  },
+)
+
+test(
+  'does not upgrade JS config files with typography styles in the theme config',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "dependencies": {
+            "@tailwindcss/upgrade": "workspace:^"
+          }
+        }
+      `,
+      'tailwind.config.ts': ts`
+        import { type Config } from 'tailwindcss'
+        import typographyStyles from './typography'
+
+        export default {
+          theme: {
+            typography: typographyStyles,
+          },
+        } satisfies Config
+      `,
+      'typography.ts': ts`
+        import { type PluginUtils } from 'tailwindcss/types/config'
+
+        export default function typographyStyles({ theme }: PluginUtils) {
+          return {
+            DEFAULT: {
+              css: {
+                '--tw-prose-body': theme('colors.zinc.600'),
+                color: 'var(--tw-prose-body)',
+              },
+            },
+          }
+        }
+      `,
+      'src/input.css': css`
+        @tailwind base;
+        @tailwind components;
+        @tailwind utilities;
+        @config '../tailwind.config.ts';
+      `,
+    },
+  },
+  async ({ exec, fs }) => {
+    await exec('npx @tailwindcss/upgrade')
+
+    expect(await fs.dumpFiles('src/**/*.css')).toMatchInlineSnapshot(`
+      "
+      --- src/input.css ---
+      @import 'tailwindcss';
+      @config '../tailwind.config.ts';
+      "
+    `)
+
+    expect(await fs.dumpFiles('tailwind.config.ts')).toMatchInlineSnapshot(`
+      "
+      --- tailwind.config.ts ---
+      import { type Config } from 'tailwindcss'
+      import typographyStyles from './typography'
+
+      export default {
+        theme: {
+          typography: typographyStyles,
+        },
+      } satisfies Config
+      "
+    `)
+  },
+)
+
+test(
+  'does not upgrade JS config files with static plugins',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "dependencies": {
+            "@tailwindcss/typography": "^0.5.15",
+            "@tailwindcss/upgrade": "workspace:^"
+          }
+        }
+      `,
+      'tailwind.config.ts': ts`
+        import { type Config } from 'tailwindcss'
+        import typography from '@tailwindcss/typography'
+        import customPlugin from './custom-plugin'
+
+        export default {
+          plugins: [typography, customPlugin],
+        } satisfies Config
+      `,
+      'custom-plugin.js': ts`
+        export default function ({ addVariant }) {
+          addVariant('inverted', '@media (inverted-colors: inverted)')
+          addVariant('hocus', ['&:focus', '&:hover'])
+        }
+      `,
+      'src/input.css': css`
+        @tailwind base;
+        @tailwind components;
+        @tailwind utilities;
+      `,
+    },
+  },
+  async ({ exec, fs }) => {
+    await exec('npx @tailwindcss/upgrade')
+
+    expect(await fs.dumpFiles('src/**/*.css')).toMatchInlineSnapshot(`
+      "
+      --- src/input.css ---
+      @import 'tailwindcss';
+      @config '../tailwind.config.ts';
+      "
+    `)
+
+    expect(await fs.dumpFiles('tailwind.config.ts')).toMatchInlineSnapshot(`
+      "
+      --- tailwind.config.ts ---
+      import { type Config } from 'tailwindcss'
+      import typography from '@tailwindcss/typography'
+      import customPlugin from './custom-plugin'
+
+      export default {
+        plugins: [typography, customPlugin],
+      } satisfies Config
+      "
+    `)
+  },
+)
+
+test(
+  `does not upgrade JS config files with dynamic plugins`,
   {
     fs: {
       'package.json': json`

packages/@tailwindcss-node/src/compile.ts

@@ -100,11 +100,8 @@ async function importModule(path: string): Promise<any> {
   try {
     return await import(path)
   } catch (error) {
-    try {
-      jiti ??= createJiti(import.meta.url, { moduleCache: false, fsCache: false })
-      return await jiti.import(path)
-    } catch {}
-    throw error
+    jiti ??= createJiti(import.meta.url, { moduleCache: false, fsCache: false })
+    return await jiti.import(path)
   }
 }
 
@@ -144,6 +141,7 @@ async function resolveCssId(id: string, base: string): Promise<string | false |
 const jsResolver = EnhancedResolve.ResolverFactory.createResolver({
   fileSystem: new EnhancedResolve.CachedInputFileSystem(fs, 4000),
   useSyncFileSystemCalls: true,
+  extensions: ['.js', '.json', '.node', '.ts'],
 })
 
 function resolveJsId(id: string, base: string): Promise<string | false | undefined> {

packages/@tailwindcss-upgrade/src/template/prepare-config.ts

@@ -65,6 +65,7 @@ export async function prepareConfig(
       configFilePath: fullConfigPath,
     }
   } catch (e: any) {
+    console.error(e)
     error('Could not load the configuration file: ' + e.message)
     process.exit(1)
   }

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

@@ -1,4 +1,5 @@
 import type { DesignSystem } from '../../design-system'
+import colors from '../colors'
 import type { PluginWithConfig } from '../plugin-api'
 import { createThemeFn } from '../plugin-functions'
 import { deepMerge, isPlainObject } from './deep-merge'
@@ -117,6 +118,7 @@ export function mergeThemeExtension(
 
 export interface PluginUtils {
   theme(keypath: string, defaultValue?: any): any
+  colors: typeof colors
 }
 
 function extractConfigs(ctx: ResolutionContext, { config, base, path }: ConfigFile): void {
@@ -176,6 +178,7 @@ function extractConfigs(ctx: ResolutionContext, { config, base, path }: ConfigFi
 function mergeTheme(ctx: ResolutionContext) {
   let api: PluginUtils = {
     theme: createThemeFn(ctx.design, () => ctx.theme, resolveValue),
+    colors,
   }
 
   function resolveValue(value: ThemeValue | null | undefined): ResolvedThemeValue {