Ensure CSS before a layer stays unlayered (#14596)

This PR fixes an issue where CSS that existed before a layer:

```css
.foo {
  color: red;
}

@layer components {
  .bar {
    color: blue;
  }
}
```

Was turned into an `@layer` without a name:
```css
@layer {
  .foo {
    color: red;
  }
}

@Utility bar {
  color: blue;
}
```

But in this case, it should stay as-is:
```css
.foo {
  color: red;
}

@Utility bar {
  color: blue;
}
```

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Don’t crash when scanning a candidate equal to the configured prefix ([#14588](https://github.com/tailwindlabs/tailwindcss/pull/14588))
+- _Experimental_: Ensure CSS before a layer stays unlayered when running codemods ([#14596](https://github.com/tailwindlabs/tailwindcss/pull/14596))
 
 ## [4.0.0-alpha.26] - 2024-10-03
 

packages/@tailwindcss-upgrade/src/codemods/migrate-missing-layers.test.ts

@@ -165,3 +165,29 @@ it('should migrate rules between tailwind directives', async () => {
     }"
   `)
 })
+
+it('should keep CSS above a layer unlayered', async () => {
+  expect(
+    await migrate(css`
+      .foo {
+        color: red;
+      }
+
+      @layer components {
+        .bar {
+          color: blue;
+        }
+      }
+    `),
+  ).toMatchInlineSnapshot(`
+    ".foo {
+      color: red;
+    }
+
+    @layer components {
+      .bar {
+        color: blue;
+      }
+    }"
+  `)
+})

packages/@tailwindcss-upgrade/src/codemods/migrate-missing-layers.ts

@@ -97,6 +97,11 @@ export function migrateMissingLayers(): Plugin {
 
     // Wrap each bucket in an `@layer` at-rule
     for (let [layerName, nodes] of buckets) {
+      let targetLayerName = layerName || firstLayerName || ''
+      if (targetLayerName === '') {
+        continue
+      }
+
       // Do not wrap comments in a layer, if they are the only nodes.
       if (nodes.every((node) => node.type === 'comment')) {
         continue

packages/@tailwindcss-upgrade/src/index.test.ts

@@ -154,3 +154,30 @@ it('should migrate a stylesheet (with preceding rules that should be wrapped in
     }"
   `)
 })
+
+it('should keep CSS as-is before existing `@layer` at-rules', async () => {
+  expect(
+    await migrateContents(
+      css`
+        .foo {
+          color: blue;
+        }
+
+        @layer components {
+          .bar {
+            color: red;
+          }
+        }
+      `,
+      {},
+    ),
+  ).toMatchInlineSnapshot(`
+    ".foo {
+      color: blue;
+    }
+
+    @utility bar {
+      color: red;
+    }"
+  `)
+})