remove layer(utilities) if imports contain @utility

We have a migration that adds the `layer(…)` next to the `@import`
depending on the order of original values. For example:
```css
@import "tailwindcss/utilities":
@import "./foo.css":
@import "tailwindcss/components":
```

Will be turned into:
```css
@import "tailwindcss":
@import "./foo.css" layer(utilities):
```

Because it used to exist between `utilities` and `components`. Without
this it would be _after_ `components`.

This results in an issue if an import has (deeply) nested `@utility`
at-rules after migrations. This is because if this is generated:
```css
/* ./src/index.css */
@import "tailwindcss";
@import "./foo.css" layer(utilities);

/* ./src/foo.css */
@Utility foo {
  color: red;
}
```

Once we interpret this (and thus flatten it), the final CSS would look
like:
```css
@layer utilities {
  @Utility foo {
    color: red;
  }
}
```

This means that `@utility` is not top-level and an error would occur.

This fixes that by removing the `layer(…)` from the import if the
imported file (or any of its children) contains an `@utility`. This is
to ensure that once everything is imported and flattened, that all
`@utility` at-rules are top-level.

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

@@ -149,6 +149,42 @@ async function run() {
       error(`${e}`)
     }
 
+    // Cleanup `@import "…" layer(utilities)`
+    for (let sheet of stylesheets) {
+      let hasAtUtility = false
+
+      // Only remove the `layer(…)` next to the import, if any of the children
+      // contains an `@utility`. Otherwise the `@utility` will not be top-level.
+      {
+        sheet.root.walkAtRules('utility', () => {
+          hasAtUtility = true
+          return false
+        })
+
+        if (!hasAtUtility) {
+          for (let child of sheet.descendants()) {
+            child.root.walkAtRules('utility', () => {
+              hasAtUtility = true
+              return false
+            })
+
+            if (hasAtUtility) {
+              break
+            }
+          }
+        }
+      }
+
+      // No `@utility` found, we can keep the `layer(…)` next to the import
+      if (!hasAtUtility) continue
+
+      for (let importNode of sheet.importRules) {
+        if (importNode.raws.tailwind_injected_layer) {
+          importNode.params = importNode.params.replace(/ layer\([^)]+\)/, '').trim()
+        }
+      }
+    }
+
     // Format nodes
     for (let sheet of stylesheets) {
       await postcss([formatNodes()]).process(sheet.root!, { from: sheet.file! })

packages/@tailwindcss-upgrade/src/migrate.ts

@@ -324,6 +324,7 @@ export async function split(stylesheets: Stylesheet[]) {
         params: `${quote}${newFile}${quote}`,
         raws: {
           after: '\n\n',
+          tailwind_injected_layer: node.raws.tailwind_injected_layer,
           tailwind_original_params: `${quote}${id}${quote}`,
           tailwind_destination_sheet_id: utilityDestination.id,
         },