Allow @variant to be used at the top-level

wip
tailwindlabs · Jan 31, 2025 · 598e76e · 598e76e
1 parent 88c8906
commit 598e76e
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 0 deletions.
diff --git 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
@@ -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
     }