From ceae1dbdfbb744ed4669376603f13cf2d0eaa2da Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Wed, 25 Sep 2024 14:58:05 +0200
Subject: [PATCH] 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 */
```
---
 CHANGELOG.md                                  |  1 +
 .../codemods/migrate-missing-layers.test.ts   | 32 +++++++++++++++++++
 .../src/codemods/migrate-missing-layers.ts    |  5 +++
 3 files changed, 38 insertions(+)

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