From cf846a5ff68ba8ecae301160db77dcc52e5f729a Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Tue, 16 Jul 2024 17:40:28 -0400
Subject: [PATCH] Ensure nested selectors are not modified when using `group-*`
 and `peer-*`

Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
---
 packages/tailwindcss/src/index.test.ts | 49 ++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)

diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts
index 673348781..c0723af64 100644
--- a/packages/tailwindcss/src/index.test.ts
+++ b/packages/tailwindcss/src/index.test.ts
@@ -1811,4 +1811,53 @@ describe('@variant', () => {
       }"
     `)
   })
+
+  test('combining multiple complex variants', () => {
+    let compiled = compile(css`
+      @variant one {
+        &.foo-1 {
+          &.bar-1 {
+            @slot;
+          }
+        }
+      }
+
+      @variant two {
+        &.foo-2 {
+          &.bar-2 {
+            @slot;
+          }
+        }
+      }
+
+      @layer utilities {
+        @tailwind utilities;
+      }
+    `).build([
+      'group-one:two:underline',
+      'one:group-two:underline',
+      'peer-one:two:underline',
+      'one:peer-two:underline',
+    ])
+
+    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
+      "@layer utilities {
+        .one\\:group-two\\:underline.foo-1.bar-1:is(:where(.group).foo-2 *):is(:where(.group).bar-2 *) {
+          text-decoration-line: underline;
+        }
+
+        .one\\:peer-two\\:underline.foo-1.bar-1:is(:where(.peer).foo-2 ~ *):is(:where(.peer).bar-2 ~ *) {
+          text-decoration-line: underline;
+        }
+
+        .group-one\\:two\\:underline:is(:where(.group).foo-1 *):is(:where(.group).bar-1 *).foo-2.bar-2 {
+          text-decoration-line: underline;
+        }
+
+        .peer-one\\:two\\:underline:is(:where(.peer).foo-1 ~ *):is(:where(.peer).bar-1 ~ *).foo-2.bar-2 {
+          text-decoration-line: underline;
+        }
+      }"
+    `)
+  })
 })