From 951f6448fe2bafa9c0de4f21f635ac199007f98e Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Wed, 25 Sep 2024 10:42:19 +0200
Subject: [PATCH] Improve missing layer codemod (#14512)

This PR improves the missing layers codemod where everything after the
last Tailwind directive can stay as-is without wrapping it in a `@layer`
directive.

The `@layer` at-rules are only important for CSS that exists between
Tailwind directives.

E.g.:
```css
@tailwind base;

html {}

@tailwind components;

.btn {}

@tailwind utilities;

.foo {}

.bar {}
```

Was transformed into:
```css
@import "tailwindcss";

@layer base {
  html {}
}

@layer components {
  .btn {}
}

@layer utilities {
  .foo {}

  .bar {}
}
```

But the last `@layer utilities` is already in the correct spot, so we
can simplify this to just this instead:
```css
@import "tailwindcss";

@layer base {
  html {}
}

@layer components {
  .btn {}
}

.foo {}

.bar {}
```
---
 CHANGELOG.md                                  |  4 +++-
 .../codemods/migrate-missing-layers.test.ts   |  8 +++----
 .../src/codemods/migrate-missing-layers.ts    | 24 +++++++++++--------
 3 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6bfe7e649..172e95fdf 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 c33bcc03e..9cae49b04 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 3c1818ff2..39f60e4cf 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)
     }
   }