diff --git a/CHANGELOG.md b/CHANGELOG.md index 6bfe7e649f68..172e95fdf7fe 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 + +- _Experimental_: Improve codemod output, keep CSS after last Tailwind directive unlayered ([#14512](https://github.com/tailwindlabs/tailwindcss/pull/14512)) ## [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 c33bcc03e1d3..9cae49b04fd7 100644 --- a/packages/@tailwindcss-upgrade/src/codemods/migrate-missing-layers.test.ts +++ b/packages/@tailwindcss-upgrade/src/codemods/migrate-missing-layers.test.ts @@ -55,11 +55,9 @@ it('should migrate rules between tailwind directives', async () => { @tailwind utilities; - @layer utilities { - .utility-a { - } - .utility-b { - } + .utility-a { + } + .utility-b { }" `) }) diff --git a/packages/@tailwindcss-upgrade/src/codemods/migrate-missing-layers.ts b/packages/@tailwindcss-upgrade/src/codemods/migrate-missing-layers.ts index 3c1818ff24a4..39f60e4cf1a9 100644 --- a/packages/@tailwindcss-upgrade/src/codemods/migrate-missing-layers.ts +++ b/packages/@tailwindcss-upgrade/src/codemods/migrate-missing-layers.ts @@ -78,28 +78,32 @@ export function migrateMissingLayers(): Plugin { // Track the node if (lastLayer !== '') { - if (bucket.push(node) !== 1) { - node.remove() - } + bucket.push(node) } }) - // Add the last bucket if it's not empty - if (bucket.length > 0) { - buckets.push([lastLayer, bucket.splice(0)]) - } - // Wrap each bucket in an `@layer` at-rule for (let [layerName, nodes] of buckets) { + let target = nodes[0] let layerNode = new AtRule({ name: 'layer', params: layerName, - nodes, + nodes: nodes.map((node) => { + // Keep the target node as-is, because we will be replacing that one + // with the new layer node. + if (node === target) { + return node + } + + // Every other node should be removed from its original position. They + // will be added to the new layer node. + return node.remove() + }), raws: { tailwind_pretty: true, }, }) - nodes[0].replaceWith(layerNode) + target.replaceWith(layerNode) } }