Address follow-up work for #14639

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)_: Automatically discover JavaScript config files ([#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))
 - _Upgrade (experimental)_: Migrate `@media screen(…)` when running codemods ([#14603](https://github.com/tailwindlabs/tailwindcss/pull/14603))
 - _Upgrade (experimental)_: Inject `@config "…"` when a `tailwind.config.{js,ts,…}` is detected ([#14635](https://github.com/tailwindlabs/tailwindcss/pull/14635))
 - _Upgrade (experimental)_: Migrate `aria-*`, `data-*`, and `supports-*` variants from arbitrary values to bare values ([#14644](https://github.com/tailwindlabs/tailwindcss/pull/14644))

integrations/upgrade/js-config.test.ts

@@ -2,7 +2,7 @@ import { expect } from 'vitest'
 import { css, json, test, ts } from '../utils'
 
 test(
-  `upgrades a simple JS config file to CSS`,
+  `upgrade JS config files with flat theme values, darkMode, and content fields`,
   {
     fs: {
       'package.json': json`
@@ -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/codemods/migrate-config.ts

@@ -63,9 +63,8 @@ export function migrateConfig(
       cssConfig.append(postcss.parse(css + jsConfigMigration.css))
     }
 
-    // Inject the `@config` in a sensible place
-    // 1. Below the last `@import`
-    // 2. At the top of the file
+    // Inject the `@config` directive after the last `@import` or at the
+    // top of the file if no `@import` rules are present
     let locationNode = null as AtRule | null
 
     walk(root, (node) => {
@@ -99,10 +98,9 @@ export function migrateConfig(
 
     if (!hasTailwindImport) return
 
-    // - If a full `@import "tailwindcss"` is present, we can inject the
-    //   `@config` directive directly into this stylesheet.
-    // - If we are the root file (no parents), then we can inject the `@config`
-    //   directive directly into this file as well.
+    // If a full `@import "tailwindcss"` is present or this is the root
+    // stylesheet, we can inject the `@config` directive directly into this
+    // file.
     if (hasFullTailwindImport || sheet.parents.size <= 0) {
       injectInto(sheet)
       return
@@ -134,7 +132,7 @@ function relativeToStylesheet(sheet: Stylesheet, absolute: string) {
   if (relative[0] !== '.') {
     relative = `./${relative}`
   }
-  // Ensure relative is a posix style path since we will merge it with the
+  // Ensure relative is a POSIX style path since we will merge it with the
   // glob.
   return normalizePath(relative)
 }

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

@@ -31,9 +31,9 @@ export async function migrateJsConfig(
     fs.readFile(fullConfigPath, 'utf-8'),
   ])
 
-  if (!isSimpleConfig(unresolvedConfig, source)) {
+  if (!canMigrateConfig(unresolvedConfig, source)) {
     info(
-      'The configuration file is not a simple object. Please refer to the migration guide for how to migrate it fully to Tailwind CSS v4. For now, we will load the configuration file as-is.',
+      'Your configuration file could not be automatically migrated to the new CSS configuration format, so your CSS has been updated to load your existing configuration file.',
     )
     return null
   }
@@ -63,8 +63,8 @@ async function migrateTheme(unresolvedConfig: Config & { theme: any }): Promise<
   let { extend: extendTheme, ...overwriteTheme } = unresolvedConfig.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
+  // Before we merge theme overrides with theme extensions, we capture all
+  // namespaces that need to be reset.
   for (let [key, value] of themeableValues(overwriteTheme)) {
     if (typeof value !== 'string' && typeof value !== 'number') {
       continue
@@ -119,7 +119,7 @@ function createSectionKey(key: string[]): string {
   let sectionSegments = []
   for (let i = 0; i < key.length - 1; i++) {
     let segment = key[i]
-    // ignore tuples
+    // Ignore tuples
     if (key[i + 1][0] === '-') {
       break
     }
@@ -143,7 +143,7 @@ function migrateContent(
 }
 
 // Applies heuristics to determine if we can attempt to migrate the config
-function isSimpleConfig(unresolvedConfig: Config, source: string): boolean {
+function canMigrateConfig(unresolvedConfig: Config, source: string): boolean {
   // The file may not contain any functions
   if (source.includes('function') || source.includes(' => ')) {
     return false

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 {