add failing test

Author: RobinMalfait

integrations/upgrade/js-config.test.ts

@@ -1136,6 +1136,102 @@ test(
   },
 )
 
+test(
+  'migrate supports theme keys to custom variants',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "dependencies": {
+            "tailwindcss": "^3",
+            "@tailwindcss/upgrade": "workspace:^"
+          }
+        }
+      `,
+      'tailwind.config.ts': ts`
+        export default {
+          content: {
+            relative: true,
+            files: ['./src/**/*.html'],
+          },
+          theme: {
+            extend: {
+              supports: {
+                // Automatically handled by bare values (using CSS variable as the value)
+                foo: 'foo: var(--foo)', // parentheses are optional
+                bar: '(bar: var(--bar))',
+
+                // Not automatically handled by bare values because names differ
+                foo: 'bar: var(--foo)', // parentheses are optional
+                bar: '(qux: var(--bar))',
+
+                // Custom
+                grid: 'display: grid',
+              },
+            },
+          },
+        }
+      `,
+      'src/input.css': css`
+        @tailwind base;
+        @tailwind components;
+        @tailwind utilities;
+      `,
+    },
+  },
+  async ({ exec, fs, expect }) => {
+    await exec('npx @tailwindcss/upgrade')
+
+    expect(await fs.dumpFiles('src/*.css')).toMatchInlineSnapshot(`
+      "
+      --- src/input.css ---
+      @import 'tailwindcss';
+
+      /*
+        These variants have been migrated from your Tailwind CSS configuration file.
+        Since they are custom variants, they will be sorted after all built-in variants.
+
+        This may result in elements appearing different if you were relying on the order of
+        the variants in the CSS.
+      */
+      @custom-variant supports-foo {
+        @supports (bar: var(--foo)) {
+          @slot;
+        }
+      }
+      @custom-variant supports-bar {
+        @supports ((qux: var(--bar))) {
+          @slot;
+        }
+      }
+      @custom-variant supports-grid {
+        @supports (display: grid) {
+          @slot;
+        }
+      }
+
+      /*
+        The default border color has changed to \`currentcolor\` in Tailwind CSS v4,
+        so we've added these compatibility styles to make sure everything still
+        looks the same as it did with Tailwind CSS v3.
+
+        If we ever want to remove these styles, we need to add an explicit border
+        color utility to any element that depends on these defaults.
+      */
+      @layer base {
+        *,
+        ::after,
+        ::before,
+        ::backdrop,
+        ::file-selector-button {
+          border-color: var(--color-gray-200, currentcolor);
+        }
+      }
+      "
+    `)
+  },
+)
+
 describe('border compatibility', () => {
   test(
     'migrate border compatibility',