Add simple JS config migration (#14639)

This PR implements the first version of JS config file migration to CSS.
It is based on the most simple config setups we are using in the
Tailwind UI templates Commit, Primer, Radiant, and Studio.

The example we use in the integration test is a config that looks like
this:

```js
import { type Config } from 'tailwindcss'
import defaultTheme from 'tailwindcss/defaultTheme'

module.exports = {
  darkMode: 'selector',
  content: ['./src/**/*.{html,js}'],
  theme: {
    boxShadow: {
      sm: '0 2px 6px rgb(15 23 42 / 0.08)',
    },
    colors: {
      red: {
        500: '#ef4444',
      },
    },
    fontSize: {
      xs: ['0.75rem', { lineHeight: '1rem' }],
      sm: ['0.875rem', { lineHeight: '1.5rem' }],
      base: ['1rem', { lineHeight: '2rem' }],
    },
    extend: {
      colors: {
        red: {
          600: '#dc2626',
        },
      },
      fontFamily: {
        sans: 'Inter, system-ui, sans-serif',
        display: ['Cabinet Grotesk', ...defaultTheme.fontFamily.sans],
      },
      borderRadius: {
        '4xl': '2rem',
      },
    },
  },
  plugins: [],
} satisfies Config
```

As you can see, this file only has a `darkMode` selector, custom
`content` globs, a `theme` (with some theme keys being overwriting the
default theme and some others extending the defaults). Note that it does
not support `plugins` and/or `presets` yet.

In the case above, we will find the CSS file containing the existing
`@tailwind` directives and are migrating it to the following:

```css
@import 'tailwindcss';

@source './**/*.{html,js}';

@variant dark (&:where(.dark, .dark *));

@theme {
  --box-shadow-*: initial;
  --box-shadow-sm: 0 2px 6px rgb(15 23 42 / 0.08);

  --color-*: initial;
  --color-red-500: #ef4444;

  --font-size-*: initial;
  --font-size-xs: 0.75rem;
  --font-size-xs--line-height: 1rem;
  --font-size-sm: 0.875rem;
  --font-size-sm--line-height: 1.5rem;
  --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;
} 
```

This replicates all features of the JS config so we can even delete the
existing JS config in this case.

---------

Co-authored-by: Robin Malfait <[email protected]>

Author: philipp-spiess

CHANGELOG.md

@@ -14,6 +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))
 
 ### Fixed
 

integrations/upgrade/index.test.ts

@@ -40,7 +40,8 @@ test(
 
       --- ./src/input.css ---
       @import 'tailwindcss';
-      @config '../tailwind.config.js';
+
+      @source './**/*.{html,js}';
       "
     `)
 
@@ -71,8 +72,9 @@ test(
         }
       `,
       'src/index.html': html`
-        <h1>🤠👋</h1>
-        <div class="!tw__flex sm:!tw__block tw__bg-gradient-to-t flex [color:red]"></div>
+        <div
+          class="!tw__flex sm:!tw__block tw__bg-gradient-to-t flex [color:red]"
+        ></div>
       `,
       'src/input.css': css`
         @tailwind base;
@@ -91,13 +93,14 @@ test(
     expect(await fs.dumpFiles('./src/**/*.{css,html}')).toMatchInlineSnapshot(`
       "
       --- ./src/index.html ---
-      <h1>🤠👋</h1>
-      <div class="tw:flex! tw:sm:block! tw:bg-linear-to-t flex tw:[color:red]"></div>
+      <div
+        class="tw:flex! tw:sm:block! tw:bg-linear-to-t flex tw:[color:red]"
+      ></div>
 
       --- ./src/input.css ---
       @import 'tailwindcss' prefix(tw);
 
-      @config '../tailwind.config.js';
+      @source './**/*.{html,js}';
 
       .btn {
         @apply tw:rounded-md! tw:px-2 tw:py-1 tw:bg-blue-500 tw:text-white;
@@ -145,8 +148,6 @@ test(
       --- ./src/index.css ---
       @import 'tailwindcss';
 
-      @config '../tailwind.config.js';
-
       .a {
         @apply flex;
       }
@@ -201,8 +202,6 @@ test(
       --- ./src/index.css ---
       @import 'tailwindcss';
 
-      @config '../tailwind.config.js';
-
       @layer base {
         html {
           color: #333;
@@ -262,8 +261,6 @@ test(
       --- ./src/index.css ---
       @import 'tailwindcss';
 
-      @config '../tailwind.config.js';
-
       @utility btn {
         @apply rounded-md px-2 py-1 bg-blue-500 text-white;
       }
@@ -631,7 +628,6 @@ test(
       --- ./src/index.css ---
       @import 'tailwindcss';
       @import './utilities.css';
-      @config '../tailwind.config.js';
 
       --- ./src/utilities.css ---
       @utility no-scrollbar {
@@ -748,7 +744,6 @@ test(
       @import './c.1.css' layer(utilities);
       @import './c.1.utilities.css';
       @import './d.1.css';
-      @config '../tailwind.config.js';
 
       --- ./src/a.1.css ---
       @import './a.1.utilities.css'
@@ -882,17 +877,14 @@ test(
       --- ./src/root.1.css ---
       @import 'tailwindcss/utilities' layer(utilities);
       @import './a.1.css' layer(utilities);
-      @config '../tailwind.config.js';
 
       --- ./src/root.2.css ---
       @import 'tailwindcss/utilities' layer(utilities);
       @import './a.1.css' layer(components);
-      @config '../tailwind.config.js';
 
       --- ./src/root.3.css ---
       @import 'tailwindcss/utilities' layer(utilities);
       @import './a.1.css' layer(utilities);
-      @config '../tailwind.config.js';
       "
     `)
   },
@@ -912,11 +904,17 @@ test(
       'tailwind.config.ts': js`
         export default {
           content: ['./src/**/*.{html,js}'],
+          plugins: [
+            () => {
+              // custom stuff which is too complicated to migrate to CSS
+            },
+          ],
         }
       `,
       'src/index.html': html`
-        <h1>🤠👋</h1>
-        <div class="!flex sm:!block bg-gradient-to-t bg-[--my-red]"></div>
+        <div
+          class="!flex sm:!block bg-gradient-to-t bg-[--my-red]"
+        ></div>
       `,
       'src/root.1.css': css`
         /* Inject missing @config */
@@ -968,8 +966,9 @@ test(
     expect(await fs.dumpFiles('./src/**/*.{html,css}')).toMatchInlineSnapshot(`
       "
       --- ./src/index.html ---
-      <h1>🤠👋</h1>
-      <div class="flex! sm:block! bg-linear-to-t bg-[var(--my-red)]"></div>
+      <div
+        class="flex! sm:block! bg-linear-to-t bg-[var(--my-red)]"
+      ></div>
 
       --- ./src/root.1.css ---
       /* Inject missing @config */

integrations/upgrade/js-config.test.ts

@@ -0,0 +1,152 @@
+import { expect } from 'vitest'
+import { css, json, test, ts } from '../utils'
+
+test(
+  `upgrades a simple JS config file to CSS`,
+  {
+    fs: {
+      'package.json': json`
+        {
+          "dependencies": {
+            "@tailwindcss/upgrade": "workspace:^"
+          }
+        }
+      `,
+      'tailwind.config.ts': ts`
+        import { type Config } from 'tailwindcss'
+        import defaultTheme from 'tailwindcss/defaultTheme'
+
+        module.exports = {
+          darkMode: 'selector',
+          content: ['./src/**/*.{html,js}', './my-app/**/*.{html,js}'],
+          theme: {
+            boxShadow: {
+              sm: '0 2px 6px rgb(15 23 42 / 0.08)',
+            },
+            colors: {
+              red: {
+                400: '#f87171',
+                500: 'red',
+              },
+            },
+            fontSize: {
+              xs: ['0.75rem', { lineHeight: '1rem' }],
+              sm: ['0.875rem', { lineHeight: '1.5rem' }],
+              base: ['1rem', { lineHeight: '2rem' }],
+            },
+            extend: {
+              colors: {
+                red: {
+                  500: '#ef4444',
+                  600: '#dc2626',
+                },
+              },
+              fontFamily: {
+                sans: 'Inter, system-ui, sans-serif',
+                display: ['Cabinet Grotesk', ...defaultTheme.fontFamily.sans],
+              },
+              borderRadius: {
+                '4xl': '2rem',
+              },
+            },
+          },
+          plugins: [],
+        } 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')).toMatchInlineSnapshot(`
+      "
+      --- src/input.css ---
+      @import 'tailwindcss';
+
+      @source './**/*.{html,js}';
+      @source '../my-app/**/*.{html,js}';
+
+      @variant dark (&:where(.dark, .dark *));
+
+      @theme {
+        --box-shadow-*: initial;
+        --box-shadow-sm: 0 2px 6px rgb(15 23 42 / 0.08);
+
+        --color-*: initial;
+        --color-red-400: #f87171;
+        --color-red-500: #ef4444;
+        --color-red-600: #dc2626;
+
+        --font-size-*: initial;
+        --font-size-xs: 0.75rem;
+        --font-size-xs--line-height: 1rem;
+        --font-size-sm: 0.875rem;
+        --font-size-sm--line-height: 1.5rem;
+        --font-size-base: 1rem;
+        --font-size-base--line-height: 2rem;
+
+        --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";
+
+        --radius-4xl: 2rem;
+      }
+      "
+    `)
+
+    expect((await fs.dumpFiles('tailwind.config.ts')).trim()).toBe('')
+  },
+)
+
+test(
+  `does not upgrade a complex JS config file to CSS`,
+  {
+    fs: {
+      'package.json': json`
+        {
+          "dependencies": {
+            "@tailwindcss/upgrade": "workspace:^"
+          }
+        }
+      `,
+      'tailwind.config.ts': ts`
+        import { type Config } from 'tailwindcss'
+
+        export default {
+          plugins: [function complexConfig() {}],
+        } 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')).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 {
+        plugins: [function complexConfig() {}],
+      } satisfies Config
+      "
+    `)
+  },
+)

integrations/utils.ts

@@ -75,7 +75,7 @@ export function test(
 ) {
   return (only || (!process.env.CI && debug) ? defaultTest.only : defaultTest)(
     name,
-    { timeout: TEST_TIMEOUT, retry: debug || only ? 0 : 3 },
+    { timeout: TEST_TIMEOUT, retry: process.env.CI ? 2 : 0 },
     async (options) => {
       let rootDir = debug ? path.join(REPO_ROOT, '.debug') : TMP_ROOT
       await fs.mkdir(rootDir, { recursive: true })