CSS codemod: do not wrap comment nodes in @layer (#14517)

When CSS exists between two tailwind directives, then the CSS will be
wrapped in an `@layer` to ensure it all ends up in the correct location
in the final CSS file.

However, if the only thing between two tailwind directives is a comment,
then the comment will also be wrapped in an `@layer` directive.

E.g.:
```css
@tailwind base;
/* This is a comment */
@tailwind components;
/* This is another comment */
@tailwind utilities;
```

Results in:
```css
@import "tailwindcss";
@layer base {
  /* This is a comment */
}
@layer components {
  /* This is another comment */
}
```

In this case, the layers don't matter, so this can be simplified to:
```css
@import "tailwindcss";
/* This is a comment */
/* This is another comment */
```

Author: RobinMalfait

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
 

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`

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',