migrate @variants to an @utility

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

@@ -411,7 +411,7 @@ it('should replace `@variants` with its children', async () => {
       }
     `),
   ).toMatchInlineSnapshot(`
-    ".foo {
+    "@utility foo {
       color: red;
     }"
   `)

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

@@ -1,4 +1,5 @@
 import { AtRule, type ChildNode, type Plugin, type Root } from 'postcss'
+import { migrate as migrateLayerUtilities } from './migrate-at-layer-utilities'
 
 const DEFAULT_LAYER_ORDER = ['theme', 'base', 'components', 'utilities']
 
@@ -55,9 +56,8 @@ 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') {
+      // Replace Tailwind CSS v2 directives that still worked in v3.
+      else if (node.name === 'responsive') {
         if (node.nodes) {
           for (let child of node.nodes) {
             child.raws.tailwind_pretty = true
@@ -67,6 +67,30 @@ export function migrateTailwindDirectives(options: { newPrefix: string | null })
           node.remove()
         }
       }
+
+      // Migrate `@variants` to `@utility` because `@variants` make the classes
+      // an actual utility.
+      // ```css
+      // @variants hover {
+      //   .foo {}
+      // }
+      // ```
+      //
+      // Means that you can do this in your HTML:
+      // ```html
+      // <div class="focus:foo"></div>
+      // ```
+      //
+      // Notice the `focus:`, even though we _only_ configured the `hover`
+      // variant.
+      //
+      // This means that we can convert it to an `@utility` rule.
+      else if (node.name === 'variants') {
+        node.name = 'layer'
+        node.params = 'utilities'
+
+        migrateLayerUtilities(node)
+      }
     })
 
     // Insert default import if all directives are present