From d8370681dbb26390b832d960891728b3372afae2 Mon Sep 17 00:00:00 2001
From: Philipp Spiess <hello@philippspiess.com>
Date: Wed, 27 Nov 2024 11:59:01 +0100
Subject: [PATCH] Upgrade: Migrate prefixed `group` and `peer` classes

---
 CHANGELOG.md                                              | 4 ++++
 integrations/upgrade/index.test.ts                        | 6 ++++++
 .../src/template/codemods/prefix.test.ts                  | 6 ++++++
 .../@tailwindcss-upgrade/src/template/codemods/prefix.ts  | 8 ++++++++
 .../src/template/codemods/simple-legacy-classes.ts        | 6 +++---
 5 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 76dc831422f6..6171a89895e8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- _Upgrade (experimental)_: Migrate prefixes for `.group` and `.peer` classes ([#15208](https://github.com/tailwindlabs/tailwindcss/pull/15208))
+
 ### Fixed
 
 - Ensure any necessary vendor prefixes are generated for iOS Safari, Firefox, and Chrome ([#15166](https://github.com/tailwindlabs/tailwindcss/pull/15166))
diff --git a/integrations/upgrade/index.test.ts b/integrations/upgrade/index.test.ts
index a65ee6092904..cc8016080d03 100644
--- a/integrations/upgrade/index.test.ts
+++ b/integrations/upgrade/index.test.ts
@@ -187,6 +187,9 @@ test(
         <div
           class="!tw__flex sm:!tw__block tw__bg-gradient-to-t flex [color:red] group-[]:tw__flex"
         ></div>
+        <div
+          class="tw__group tw__group/foo tw__peer tw__peer/foo group-hover:tw__flex group-hover/foo:tw__flex peer-hover:tw__flex peer-hover/foo:tw__flex"
+        ></div>
       `,
       'src/input.css': css`
         @tailwind base;
@@ -208,6 +211,9 @@ test(
       <div
         class="tw:flex! tw:sm:block! tw:bg-linear-to-t flex tw:[color:red] tw:in-[.tw\\:group]:flex"
       ></div>
+      <div
+        class="tw:group tw:group/foo tw:peer tw:peer/foo tw:group-hover:flex tw:group-hover/foo:flex tw:peer-hover:flex tw:peer-hover/foo:flex"
+      ></div>
 
       --- ./src/input.css ---
       @import 'tailwindcss' prefix(tw);
diff --git a/packages/@tailwindcss-upgrade/src/template/codemods/prefix.test.ts b/packages/@tailwindcss-upgrade/src/template/codemods/prefix.test.ts
index b50dbf64bbea..a7ad6a03ec75 100644
--- a/packages/@tailwindcss-upgrade/src/template/codemods/prefix.test.ts
+++ b/packages/@tailwindcss-upgrade/src/template/codemods/prefix.test.ts
@@ -20,6 +20,12 @@ describe('for projects with configured prefix', () => {
 
     // Adds prefix to arbitrary candidates
     ['[color:red]', 'tw:[color:red]'],
+
+    // `.group` and `.peer` classes
+    ['tw-group', 'tw:group'],
+    ['tw-group/foo', 'tw:group/foo'],
+    ['tw-peer', 'tw:peer'],
+    ['tw-peer/foo', 'tw:peer/foo'],
   ])('%s => %s', async (candidate, result) => {
     let designSystem = await __unstable__loadDesignSystem('@import "tailwindcss" prefix(tw);', {
       base: __dirname,
diff --git a/packages/@tailwindcss-upgrade/src/template/codemods/prefix.ts b/packages/@tailwindcss-upgrade/src/template/codemods/prefix.ts
index 10a8bb6ed720..47a377239a21 100644
--- a/packages/@tailwindcss-upgrade/src/template/codemods/prefix.ts
+++ b/packages/@tailwindcss-upgrade/src/template/codemods/prefix.ts
@@ -4,6 +4,8 @@ import type { DesignSystem } from '../../../../tailwindcss/src/design-system'
 import { segment } from '../../../../tailwindcss/src/utils/segment'
 import { printCandidate } from '../candidates'
 
+let seenDesignSystems = new WeakSet<DesignSystem>()
+
 export function prefix(
   designSystem: DesignSystem,
   userConfig: Config,
@@ -11,6 +13,12 @@ export function prefix(
 ): string {
   if (!designSystem.theme.prefix) return rawCandidate
 
+  if (!seenDesignSystems.has(designSystem)) {
+    designSystem.utilities.functional('group', () => null)
+    designSystem.utilities.functional('peer', () => null)
+    seenDesignSystems.add(designSystem)
+  }
+
   let v3Base = extractV3Base(designSystem, userConfig, rawCandidate)
 
   if (!v3Base) return rawCandidate
diff --git a/packages/@tailwindcss-upgrade/src/template/codemods/simple-legacy-classes.ts b/packages/@tailwindcss-upgrade/src/template/codemods/simple-legacy-classes.ts
index c212e032eac1..a2c2b77f11f4 100644
--- a/packages/@tailwindcss-upgrade/src/template/codemods/simple-legacy-classes.ts
+++ b/packages/@tailwindcss-upgrade/src/template/codemods/simple-legacy-classes.ts
@@ -19,7 +19,7 @@ const LEGACY_CLASS_MAP = {
   'outline-none': 'outline-hidden',
 }
 
-const SEEDED = new WeakSet<DesignSystem>()
+let seenDesignSystems = new WeakSet<DesignSystem>()
 
 export function simpleLegacyClasses(
   designSystem: DesignSystem,
@@ -27,11 +27,11 @@ export function simpleLegacyClasses(
   rawCandidate: string,
 ): string {
   // Prepare design system with the unknown legacy classes
-  if (!SEEDED.has(designSystem)) {
+  if (!seenDesignSystems.has(designSystem)) {
     for (let old in LEGACY_CLASS_MAP) {
       designSystem.utilities.static(old, () => [])
     }
-    SEEDED.add(designSystem)
+    seenDesignSystems.add(designSystem)
   }
 
   for (let candidate of designSystem.parseCandidate(rawCandidate)) {