CSS codemod: Fix incorrect empty layer() at the end of @import at-rules (#14513)

This PR fixes an issue where some `@import` at-rules had an empty
`layer()` attached at the end of the `@import` string.

We should only add that if a Tailwind directive or Tailwind import such
as `@tailwind base` or `@import "tailwindcss/base"` preceded the current
`@import` at-rule. If there was no Tailwind directive, the `lastLayer`
will be empty and we don't need to attach it to the `@import` string.

Author: RobinMalfait

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - _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))
 
 ## [4.0.0-alpha.25] - 2024-09-24
 

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

@@ -14,6 +14,14 @@ function migrate(input: string) {
     .then((result) => result.css)
 }
 
+it('should not migrate already migrated `@import` at-rules', async () => {
+  expect(
+    await migrate(css`
+      @import 'tailwindcss';
+    `),
+  ).toMatchInlineSnapshot(`"@import 'tailwindcss';"`)
+})
+
 it('should migrate rules between tailwind directives', async () => {
   expect(
     await migrate(css`

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

@@ -65,7 +65,7 @@ export function migrateMissingLayers(): Plugin {
 
         // Add layer to `@import` at-rules
         if (node.name === 'import') {
-          if (!node.params.includes('layer(')) {
+          if (lastLayer !== '' && !node.params.includes('layer(')) {
             node.params += ` layer(${lastLayer})`
           }