diff --git a/CHANGELOG.md b/CHANGELOG.md index 26610bd8d..e288aa2b6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - _Experimental_: Fix incorrect empty `layer()` at the end of `@import` at-rules when running codemods ([#14513](https://github.com/tailwindlabs/tailwindcss/pull/14513)) - _Experimental_: Migrate `@import "tailwindcss/tailwind.css"` to `@import "tailwindcss"` ([#14514](https://github.com/tailwindlabs/tailwindcss/pull/14514)) - _Experimental_: Do not wrap comment nodes in `@layer` when running codemods ([#14517](https://github.com/tailwindlabs/tailwindcss/pull/14517)) +- _Experimental_: Ensure we don't lose selectors when running codemods ([#14518](https://github.com/tailwindlabs/tailwindcss/pull/14518)) ## [4.0.0-alpha.25] - 2024-09-24 diff --git a/packages/@tailwindcss-upgrade/src/codemods/migrate-at-layer-utilities.test.ts b/packages/@tailwindcss-upgrade/src/codemods/migrate-at-layer-utilities.test.ts index 6f1a03301..f53e3f3c9 100644 --- a/packages/@tailwindcss-upgrade/src/codemods/migrate-at-layer-utilities.test.ts +++ b/packages/@tailwindcss-upgrade/src/codemods/migrate-at-layer-utilities.test.ts @@ -783,3 +783,40 @@ describe('comments', () => { `) }) }) + +// Saw this when testing codemods on https://github.com/docker/docs +it('should not lose attribute selectors', async () => { + expect( + await migrate(css` + @layer components { + #TableOfContents { + .toc a { + @apply block max-w-full truncate py-1 pl-2 hover:font-medium hover:no-underline; + &[aria-current='true'], + &:hover { + @apply border-l-2 border-l-gray-light bg-gradient-to-r from-gray-light-100 font-medium text-black dark:border-l-gray-dark dark:from-gray-dark-200 dark:text-white; + } + &:not([aria-current='true']) { + @apply text-gray-light-600 hover:text-black dark:text-gray-dark-700 dark:hover:text-white; + } + } + } + } + `), + ).toMatchInlineSnapshot(` + "@layer components { + #TableOfContents { + .toc a { + @apply block max-w-full truncate py-1 pl-2 hover:font-medium hover:no-underline; + &[aria-current='true'], + &:hover { + @apply border-l-2 border-l-gray-light bg-gradient-to-r from-gray-light-100 font-medium text-black dark:border-l-gray-dark dark:from-gray-dark-200 dark:text-white; + } + &:not([aria-current='true']) { + @apply text-gray-light-600 hover:text-black dark:text-gray-dark-700 dark:hover:text-white; + } + } + } + }" + `) +}) diff --git a/packages/@tailwindcss-upgrade/src/codemods/migrate-at-layer-utilities.ts b/packages/@tailwindcss-upgrade/src/codemods/migrate-at-layer-utilities.ts index c1e383ef5..cedef0545 100644 --- a/packages/@tailwindcss-upgrade/src/codemods/migrate-at-layer-utilities.ts +++ b/packages/@tailwindcss-upgrade/src/codemods/migrate-at-layer-utilities.ts @@ -75,9 +75,8 @@ export function migrateAtLayerUtilities(): Plugin { return WalkAction.Stop } }) - node.selector = selector.toString() }) - }).processSync(node.selector, { updateSelector: false }) + }).processSync(node, { updateSelector: true }) }) // Upgrade every Rule in `@layer utilities` to an `@utility` at-rule. @@ -157,10 +156,7 @@ export function migrateAtLayerUtilities(): Plugin { } }) }) - - // Update the selector - node.selector = selectors.toString() - }).processSync(node.selector) + }).processSync(node, { updateSelector: true }) // Cleanup all the nodes that should not be part of the `@utility` rule. if (!containsClass) {