feat: allow using @variant with multiple comma-separated variants

packages/tailwindcss/src/index.test.ts

@@ -5299,6 +5299,38 @@ describe('@variant', () => {
     `)
   })
 
+  it('should be possible to use comma-separated `@variant` rules', async () => {
+    await expect(
+      compileCss(
+        css`
+          .btn {
+            background: black;
+
+            @variant hover, focus {
+              background: red;
+            }
+          }
+          @tailwind utilities;
+        `,
+        [],
+      ),
+    ).resolves.toMatchInlineSnapshot(`
+      ".btn {
+        background: #000;
+      }
+
+      @media (hover: hover) {
+        .btn:hover {
+          background: red;
+        }
+      }
+
+      .btn:focus {
+        background: red;
+      }"
+    `)
+  })
+
   it('should be possible to use `@variant` with a funky looking variants', async () => {
     await expect(
       compileCss(

packages/tailwindcss/src/variants.ts

@@ -1212,24 +1212,28 @@ export function substituteAtVariant(ast: AstNode[], designSystem: DesignSystem):
   walk(ast, (variantNode) => {
     if (variantNode.kind !== 'at-rule' || variantNode.name !== '@variant') return
 
-    // Starting with the `&` rule node
-    let node = styleRule('&', variantNode.nodes)
-
-    let variant = variantNode.params
+    let variants = segment(variantNode.params, ',').map((variant) => variant.trim())
+    let nodes: AstNode[] = []
+    for (let variant of variants) {
+      // Starting with the `&` rule node
+      let node = styleRule('&', variantNode.nodes)
+
+      let variantAst = designSystem.parseVariant(variant)
+      if (variantAst === null) {
+        throw new Error(`Cannot use \`@variant\` with unknown variant: ${variant}`)
+      }
 
-    let variantAst = designSystem.parseVariant(variant)
-    if (variantAst === null) {
-      throw new Error(`Cannot use \`@variant\` with unknown variant: ${variant}`)
-    }
+      let result = applyVariant(node, variantAst, designSystem.variants)
+      if (result === null) {
+        throw new Error(`Cannot use \`@variant\` with variant: ${variant}`)
+      }
 
-    let result = applyVariant(node, variantAst, designSystem.variants)
-    if (result === null) {
-      throw new Error(`Cannot use \`@variant\` with variant: ${variant}`)
+      nodes.push(node)
     }
 
     // Update the variant at-rule node, to be the `&` rule node
     features |= Features.Variants
-    return WalkAction.Replace(node)
+    return WalkAction.Replace(nodes)
   })
   return features
 }