migrate @variants and @responsive

They only do something in Tailwind CSS v2, but they still "worked" as a
no-op in Tailwind CSS v3. In v4 we would parse these directives and keep
them in the output, so let's just drop them.

Author: RobinMalfait

packages/@tailwindcss-upgrade/src/codemods/migrate-tailwind-directives.test.ts

@@ -400,3 +400,35 @@ it('should drop `@tailwind variants;`', async () => {
     `),
   ).toEqual('')
 })
+
+it('should replace `@variants` with its children', async () => {
+  expect(
+    await migrate(css`
+      @variants hover, focus {
+        .foo {
+          color: red;
+        }
+      }
+    `),
+  ).toMatchInlineSnapshot(`
+    ".foo {
+      color: red;
+    }"
+  `)
+})
+
+it('should replace `@responsive` with its children', async () => {
+  expect(
+    await migrate(css`
+      @responsive {
+        .foo {
+          color: red;
+        }
+      }
+    `),
+  ).toMatchInlineSnapshot(`
+    ".foo {
+      color: red;
+    }"
+  `)
+})

packages/@tailwindcss-upgrade/src/codemods/migrate-tailwind-directives.ts

@@ -1,4 +1,4 @@
-import { AtRule, type ChildNode, type Plugin, type Root } from 'postcss'
+import { AtRule, Root, type ChildNode, type Plugin } from 'postcss'
 
 const DEFAULT_LAYER_ORDER = ['theme', 'base', 'components', 'utilities']
 
@@ -54,6 +54,19 @@ export function migrateTailwindDirectives(options: { newPrefix: string | null })
       ) {
         node.remove()
       }
+
+      // Replace Tailwind CSS v2 directives that still worked in v3. But apart
+      // from not breaking, these directives don't do anything anymore.
+      else if (node.name === 'variants' || node.name === 'responsive') {
+        if (node.nodes) {
+          for (let child of node.nodes) {
+            child.raws.tailwind_pretty = true
+          }
+          node.replaceWith(node.nodes)
+        } else {
+          node.remove()
+        }
+      }
     })
 
     // Insert default import if all directives are present