From 598e76e9b0fca06a0f784b5efe70d918d432b08d Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Fri, 31 Jan 2025 12:10:42 -0500
Subject: [PATCH] Allow `@variant` to be used at the top-level

wip
---
 packages/tailwindcss/src/index.test.ts | 64 ++++++++++++++++++++++++++
 packages/tailwindcss/src/index.ts      | 12 +++++
 2 files changed, 76 insertions(+)

diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts
index 8fba63cfccef..cf4900fbe7ba 100644
--- a/packages/tailwindcss/src/index.test.ts
+++ b/packages/tailwindcss/src/index.test.ts
@@ -3398,6 +3398,38 @@ describe('@variant', () => {
               background: white;
             }
           }
+
+          @variant hover {
+            @variant landscape {
+              .btn2 {
+                color: red;
+              }
+            }
+          }
+
+          @variant hover {
+            .foo {
+              color: red;
+            }
+            @variant landscape {
+              .bar {
+                color: blue;
+              }
+            }
+            .baz {
+              @variant portrait {
+                color: green;
+              }
+            }
+          }
+
+          @media something {
+            @variant landscape {
+              @page {
+                color: red;
+              }
+            }
+          }
         `,
         [],
       ),
@@ -3410,6 +3442,38 @@ describe('@variant', () => {
         .btn {
           background: #fff;
         }
+      }
+
+      @media (hover: hover) {
+        @media (orientation: landscape) {
+          :scope:hover .btn2 {
+            color: red;
+          }
+        }
+
+        :scope:hover .foo {
+          color: red;
+        }
+
+        @media (orientation: landscape) {
+          :scope:hover .bar {
+            color: #00f;
+          }
+        }
+
+        @media (orientation: portrait) {
+          :scope:hover .baz {
+            color: green;
+          }
+        }
+      }
+
+      @media something {
+        @media (orientation: landscape) {
+          @page {
+            color: red;
+          }
+        }
       }"
     `)
   })
diff --git a/packages/tailwindcss/src/index.ts b/packages/tailwindcss/src/index.ts
index df6e09f90649..71221aa40a73 100644
--- a/packages/tailwindcss/src/index.ts
+++ b/packages/tailwindcss/src/index.ts
@@ -243,6 +243,11 @@ async function parseCss(
               return WalkAction.Stop
             }
           })
+
+          // No `@slot` found, so this is still a regular `@variant` at-rule
+          if (node.name === '@variant') {
+            variantNodes.push(node)
+          }
         }
       }
 
@@ -428,6 +433,13 @@ async function parseCss(
         replaceWith(node.nodes)
       }
 
+      walk(node.nodes, (node) => {
+        if (node.kind !== 'at-rule') return
+        if (node.name !== '@variant') return
+
+        variantNodes.push(node)
+      })
+
       return WalkAction.Skip
     }