ensure CSS before a layer stays unlayered

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;
+    }"
+  `)
+})