diff --git a/CHANGELOG.md b/CHANGELOG.md index 4d6158040..348dc578a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - _Experimental_: Improve codemod output, keep CSS after last Tailwind directive unlayered ([#14512](https://github.com/tailwindlabs/tailwindcss/pull/14512)) - _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)) ## [4.0.0-alpha.25] - 2024-09-24 diff --git a/packages/@tailwindcss-upgrade/src/codemods/migrate-missing-layers.test.ts b/packages/@tailwindcss-upgrade/src/codemods/migrate-missing-layers.test.ts index 4fd81cf6d..a35a50479 100644 --- a/packages/@tailwindcss-upgrade/src/codemods/migrate-missing-layers.test.ts +++ b/packages/@tailwindcss-upgrade/src/codemods/migrate-missing-layers.test.ts @@ -22,6 +22,38 @@ it('should not migrate already migrated `@import` at-rules', async () => { ).toMatchInlineSnapshot(`"@import 'tailwindcss';"`) }) +it('should not wrap comments in a layer, if they are the only nodes', async () => { + expect( + await migrate(css` + @tailwind base; + + /* BASE */ + + @tailwind components; + + /* COMPONENTS */ + + @tailwind utilities; + + /** UTILITIES */ + /** - Another comment */ + `), + ).toMatchInlineSnapshot(` + "@tailwind base; + + /* BASE */ + + @tailwind components; + + /* COMPONENTS */ + + @tailwind utilities; + + /** UTILITIES */ + /** - Another comment */" + `) +}) + it('should migrate rules between tailwind directives', async () => { expect( await migrate(css` diff --git a/packages/@tailwindcss-upgrade/src/codemods/migrate-missing-layers.ts b/packages/@tailwindcss-upgrade/src/codemods/migrate-missing-layers.ts index 4e25656d9..e63568ee3 100644 --- a/packages/@tailwindcss-upgrade/src/codemods/migrate-missing-layers.ts +++ b/packages/@tailwindcss-upgrade/src/codemods/migrate-missing-layers.ts @@ -84,6 +84,11 @@ export function migrateMissingLayers(): Plugin { // Wrap each bucket in an `@layer` at-rule for (let [layerName, nodes] of buckets) { + // Do not wrap comments in a layer, if they are the only nodes. + if (nodes.every((node) => node.type === 'comment')) { + continue + } + let target = nodes[0] let layerNode = new AtRule({ name: 'layer',