add failing tests

integrations/upgrade/index.test.ts

@@ -1,3 +1,4 @@
+import { stripVTControlCharacters } from 'node:util'
 import { expect } from 'vitest'
 import { candidate, css, html, js, json, test, ts } from '../utils'
 
@@ -1385,9 +1386,7 @@ test(
         export default {
           content: ['./src/**/*.{html,js}'],
           plugins: [
-            () => {
-              // custom stuff which is too complicated to migrate to CSS
-            },
+            () => {}, // custom stuff which is too complicated to migrate to CSS
           ],
         }
       `,
@@ -1396,20 +1395,28 @@ test(
           class="!flex sm:!block bg-gradient-to-t bg-[--my-red]"
         ></div>
       `,
-      'src/root.1.css': css`
+      'src/root.1/index.css': css`
         /* Inject missing @config */
         @tailwind base;
         @tailwind components;
         @tailwind utilities;
       `,
-      'src/root.2.css': css`
+      'src/root.1/tailwind.config.ts': js`
+        export default {
+          content: ['./src/**/*.{html,js}'],
+          plugins: [
+            () => {}, // custom stuff which is too complicated to migrate to CSS
+          ],
+        }
+      `,
+      'src/root.2/index.css': css`
         /* Already contains @config */
         @tailwind base;
         @tailwind components;
         @tailwind utilities;
-        @config "../tailwind.config.ts";
+        @config "../../tailwind.config.ts";
       `,
-      'src/root.3.css': css`
+      'src/root.3/index.css': css`
         /* Inject missing @config above first @theme */
         @tailwind base;
         @tailwind components;
@@ -1425,18 +1432,35 @@ test(
           --color-blue-500: #00f;
         }
       `,
-      'src/root.4.css': css`
+      'src/root.3/tailwind.config.ts': js`
+        export default {
+          content: ['./src/**/*.{html,js}'],
+          plugins: [
+            () => {}, // custom stuff which is too complicated to migrate to CSS
+          ],
+        }
+      `,
+      'src/root.4/index.css': css`
         /* Inject missing @config due to nested imports with tailwind imports */
-        @import './root.4/base.css';
-        @import './root.4/utilities.css';
+        @import './base.css';
+        @import './utilities.css';
       `,
-      'src/root.4/base.css': css`@import 'tailwindcss/base';`,
+      'src/root.4/tailwind.config.ts': js`
+        export default {
+          content: ['./src/**/*.{html,js}'],
+          plugins: [
+            () => {}, // custom stuff which is too complicated to migrate to CSS
+          ],
+        }
+      `,
+      'src/root.4/base.css': css`@import 'tailwindcss/preflight';`,
       'src/root.4/utilities.css': css`@import 'tailwindcss/utilities';`,
 
-      'src/root.5.css': css`@import './root.5/tailwind.css';`,
+      'src/root.5/index.css': css`@import './tailwind.css';`,
       'src/root.5/tailwind.css': css`
         /* Inject missing @config in this file, due to full import */
-        @import 'tailwindcss/tailwind.css';
+        /* Should be located in the root: ../../ */
+        @import 'tailwindcss';
       `,
     },
   },
@@ -1450,11 +1474,11 @@ test(
         class="flex! sm:block! bg-linear-to-t bg-(--my-red)"
       ></div>
 
-      --- ./src/root.1.css ---
+      --- ./src/root.1/index.css ---
       /* Inject missing @config */
       @import 'tailwindcss';
 
-      @config '../tailwind.config.ts';
+      @config './tailwind.config.ts';
 
       /*
         The default border color has changed to \`currentColor\` in Tailwind CSS v4,
@@ -1474,11 +1498,11 @@ test(
         }
       }
 
-      --- ./src/root.2.css ---
+      --- ./src/root.2/index.css ---
       /* Already contains @config */
       @import 'tailwindcss';
 
-      @config "../tailwind.config.ts";
+      @config "../../tailwind.config.ts";
 
       /*
         The default border color has changed to \`currentColor\` in Tailwind CSS v4,
@@ -1498,11 +1522,11 @@ test(
         }
       }
 
-      --- ./src/root.3.css ---
+      --- ./src/root.3/index.css ---
       /* Inject missing @config above first @theme */
       @import 'tailwindcss';
 
-      @config '../tailwind.config.ts';
+      @config './tailwind.config.ts';
 
       @variant hocus (&:hover, &:focus);
 
@@ -1532,19 +1556,15 @@ test(
         }
       }
 
-      --- ./src/root.4.css ---
+      --- ./src/root.4/index.css ---
       /* Inject missing @config due to nested imports with tailwind imports */
-      @import './root.4/base.css';
-      @import './root.4/utilities.css';
-
-      @config '../tailwind.config.ts';
+      @import './base.css';
+      @import './utilities.css';
 
-      --- ./src/root.5.css ---
-      @import './root.5/tailwind.css';
+      @config './tailwind.config.ts';
 
       --- ./src/root.4/base.css ---
-      @import 'tailwindcss/theme' layer(theme);
-      @import 'tailwindcss/preflight' layer(base);
+      @import 'tailwindcss/preflight';
 
       /*
         The default border color has changed to \`currentColor\` in Tailwind CSS v4,
@@ -1567,8 +1587,12 @@ test(
       --- ./src/root.4/utilities.css ---
       @import 'tailwindcss/utilities' layer(utilities);
 
+      --- ./src/root.5/index.css ---
+      @import './tailwind.css';
+
       --- ./src/root.5/tailwind.css ---
       /* Inject missing @config in this file, due to full import */
+      /* Should be located in the root: ../../ */
       @import 'tailwindcss';
 
       @config '../../tailwind.config.ts';
@@ -1595,6 +1619,110 @@ test(
   },
 )
 
+test(
+  'multiple CSS roots that resolve to the same Tailwind config file requires manual intervention',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "dependencies": {
+            "tailwindcss": "^3",
+            "@tailwindcss/upgrade": "workspace:^"
+          }
+        }
+      `,
+      '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`
+        <div
+          class="!flex sm:!block bg-gradient-to-t bg-[--my-red]"
+        ></div>
+      `,
+      'src/root.1.css': css`
+        /* Inject missing @config */
+        @tailwind base;
+        @tailwind components;
+        @tailwind utilities;
+      `,
+      'src/root.2.css': css`
+        /* Already contains @config */
+        @tailwind base;
+        @tailwind components;
+        @tailwind utilities;
+        @config "../tailwind.config.ts";
+      `,
+      'src/root.3.css': css`
+        /* Inject missing @config above first @theme */
+        @tailwind base;
+        @tailwind components;
+        @tailwind utilities;
+
+        @variant hocus (&:hover, &:focus);
+
+        @theme {
+          --color-red-500: #f00;
+        }
+
+        @theme {
+          --color-blue-500: #00f;
+        }
+      `,
+      'src/root.4.css': css`
+        /* Inject missing @config due to nested imports with tailwind imports */
+        @import './root.4/base.css';
+        @import './root.4/utilities.css';
+      `,
+      'src/root.4/base.css': css`@import 'tailwindcss/preflight';`,
+      'src/root.4/utilities.css': css`@import 'tailwindcss/utilities';`,
+
+      'src/root.5.css': css`@import './root.5/tailwind.css';`,
+      'src/root.5/tailwind.css': css`
+        /* Inject missing @config in this file, due to full import */
+        @import 'tailwindcss/tailwind.css';
+      `,
+    },
+  },
+  async ({ exec }) => {
+    let output = await exec('npx @tailwindcss/upgrade --force', {}, { ignoreStdErr: true }).catch(
+      (e) => e.toString(),
+    )
+
+    output = stripVTControlCharacters(output)
+      .replace(/tailwindcss v(.*)/g, 'tailwindcss') // Remove the version number from the error message
+      .replace(/\\/g, '/') // Make Windows paths look like Unix paths
+
+    expect(output).toMatchInlineSnapshot(`
+      "Error: Command failed: npx @tailwindcss/upgrade --force
+      ≈ tailwindcss
+
+      │ Searching for CSS files in the current directory and its subdirectories…
+
+      │ Found config file: \`./tailwind.config.ts\` for \`./src/root.1.css\`
+
+      │ Found config file: \`./tailwind.config.ts\` for \`./src/root.3.css\`
+
+      │ Found config file: \`./tailwind.config.ts\` for \`./src/root.4.css\`
+
+      │ Found config file: \`./tailwind.config.ts\` for \`./src/root.5/tailwind.css\`
+
+      │ You have multiple stylesheets that do not have an \`@config\`.
+      │ Please add a \`@config "…";\` referencing the correct Tailwind config file to:
+      │ - ./src/root.1.css
+      │ - ./src/root.3.css
+      │ - ./src/root.4.css
+      │ - ./src/root.5/tailwind.css
+
+      "
+    `)
+  },
+)
+
 test(
   'injecting `@config` in the shared root, when a tailwind.config.{js,ts,…} is detected',
   {