diff --git a/CHANGELOG.md b/CHANGELOG.md index 1d378084a..84b7ecf39 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 a65ee6092..cc8016080 100644 --- a/integrations/upgrade/index.test.ts +++ b/integrations/upgrade/index.test.ts @@ -187,6 +187,9 @@ test(
+ `, 'src/input.css': css` @tailwind base; @@ -208,6 +211,9 @@ test( + --- ./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 b50dbf64b..a7ad6a03e 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 10a8bb6ed..47a377239 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