From 98359bea942d50d321b84ccab16ed288477a2a94 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Mon, 25 Nov 2024 22:00:21 +0100
Subject: [PATCH] =?UTF-8?q?Ensure=20`.group`=20and=20`.peer`=20are=20prefi?=
 =?UTF-8?q?xed=20when=20using=20the=20`prefix(=E2=80=A6)`=20option=20(#151?=
 =?UTF-8?q?74)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This PR fixes an issue where the `.group` and `.peer` classes didn't get
prefixed if you are using the `prefix(…)` option.

Before this change, `tw:group-hover:flex`, generated:
```css
.tw\\:group-hover\\:flex {
  &:is(:where(.group):hover *) {
    @media (hover: hover) {
      display: flex;
    }
  }
}
```

But now it generates:
```css
.tw\\:group-hover\\:flex {
  &:is(:where(.tw\\:group):hover *) {
    @media (hover: hover) {
      display: flex;
    }
  }
}
```

Or as a diff, it might be more clear:
```diff
  .tw\\:group-hover\\:flex {
-   &:is(:where(.group):hover *) {
+   &:is(:where(.tw\\:group):hover *) {
      @media (hover: hover) {
        display: flex;
      }
    }
  }
```

Fixes: #15172
---
 CHANGELOG.md                            |  4 +++-
 packages/tailwindcss/src/prefix.test.ts | 25 +++++++++++++++++++++++--
 packages/tailwindcss/src/variants.ts    |  8 ++++----
 3 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8ea16a6fc9c9..32272f11ec4d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Ensure `.group` and `.peer` are prefixed when using the `prefix(…)` option ([#15174](https://github.com/tailwindlabs/tailwindcss/pull/15174))
 
 ## [4.0.0-beta.2] - 2024-11-22
 
diff --git a/packages/tailwindcss/src/prefix.test.ts b/packages/tailwindcss/src/prefix.test.ts
index aa9e67b5a21c..27a71b6179f1 100644
--- a/packages/tailwindcss/src/prefix.test.ts
+++ b/packages/tailwindcss/src/prefix.test.ts
@@ -17,14 +17,35 @@ test('utilities must be prefixed', async () => {
   let compiler = await compile(input)
 
   // Prefixed utilities are generated
-  expect(compiler.build(['tw:underline', 'tw:hover:line-through', 'tw:custom']))
-    .toMatchInlineSnapshot(`
+  expect(
+    compiler.build([
+      'tw:underline',
+      'tw:hover:line-through',
+      'tw:custom',
+      'tw:group-hover:flex',
+      'tw:peer-hover:flex',
+    ]),
+  ).toMatchInlineSnapshot(`
     ".tw\\:custom {
       color: red;
     }
     .tw\\:underline {
       text-decoration-line: underline;
     }
+    .tw\\:group-hover\\:flex {
+      &:is(:where(.tw\\:group):hover *) {
+        @media (hover: hover) {
+          display: flex;
+        }
+      }
+    }
+    .tw\\:peer-hover\\:flex {
+      &:is(:where(.tw\\:peer):hover ~ *) {
+        @media (hover: hover) {
+          display: flex;
+        }
+      }
+    }
     .tw\\:hover\\:line-through {
       &:hover {
         @media (hover: hover) {
diff --git a/packages/tailwindcss/src/variants.ts b/packages/tailwindcss/src/variants.ts
index a88f3d50660f..99cd20a455d4 100644
--- a/packages/tailwindcss/src/variants.ts
+++ b/packages/tailwindcss/src/variants.ts
@@ -518,8 +518,8 @@ export function createVariants(theme: Theme): Variants {
     // Name the group by appending the modifier to `group` class itself if
     // present.
     let variantSelector = variant.modifier
-      ? `:where(.group\\/${variant.modifier.value})`
-      : ':where(.group)'
+      ? `:where(.${theme.prefix ? `${theme.prefix}\\:` : ''}group\\/${variant.modifier.value})`
+      : `:where(.${theme.prefix ? `${theme.prefix}\\:` : ''}group)`
 
     let didApply = false
 
@@ -570,8 +570,8 @@ export function createVariants(theme: Theme): Variants {
     // Name the peer by appending the modifier to `peer` class itself if
     // present.
     let variantSelector = variant.modifier
-      ? `:where(.peer\\/${variant.modifier.value})`
-      : ':where(.peer)'
+      ? `:where(.${theme.prefix ? `${theme.prefix}\\:` : ''}peer\\/${variant.modifier.value})`
+      : `:where(.${theme.prefix ? `${theme.prefix}\\:` : ''}peer)`
 
     let didApply = false