handle @layer components as-if they are @layer utilities

We already sort components before utilities if they contain more
properties. If the user _wants_ to have the components in a separate
layer, then can still do that:

```css
@Utility btn {
  @layer components {
    …
  }
}
```

Author: RobinMalfait

integrations/cli/upgrade.test.ts

@@ -53,7 +53,7 @@ test(
 )
 
 test(
-  'migrate @tailwind directives',
+  'migrate `@tailwind` directives',
   {
     fs: {
       'package.json': json`
@@ -79,7 +79,7 @@ test(
 )
 
 test(
-  'migrate @layer utilities',
+  'migrate `@layer utilities` and `@layer components`',
   {
     fs: {
       'package.json': json`
@@ -93,6 +93,12 @@ test(
       'src/index.css': css`
         @import 'tailwindcss';
 
+        @layer components {
+          .btn {
+            @apply rounded-md px-2 py-1 bg-blue-500 text-white;
+          }
+        }
+
         @layer utilities {
           .no-scrollbar::-webkit-scrollbar {
             display: none;
@@ -112,6 +118,10 @@ test(
     await fs.expectFileToContain(
       'src/index.css',
       dedent`
+        @utility btn {
+          @apply rounded-md px-2 py-1 bg-blue-500 text-white;
+        }
+
         @utility no-scrollbar {
           &::-webkit-scrollbar {
             display: none;

packages/@tailwindcss-upgrade/src/codemods/migrate-at-layer-utilities.ts

@@ -39,7 +39,7 @@ function walk<T>(rule: Walkable<T>, cb: (rule: T) => void | WalkAction): undefin
 
 export function migrateAtLayerUtilities(): Plugin {
   async function migrate(atRule: AtRule) {
-    if (atRule.params !== 'utilities') return
+    if (atRule.params !== 'utilities' && atRule.params !== 'components') return
 
     // Upgrade every Rule in `@layer utilities` to an `@utility` at-rule.
     walk(atRule, (node) => {
@@ -167,7 +167,11 @@ export function migrateAtLayerUtilities(): Plugin {
 
       while (
         parent &&
-        !(parent instanceof AtRule && parent.name === 'layer' && parent.params === 'utilities')
+        !(
+          parent instanceof AtRule &&
+          parent.name === 'layer' &&
+          (parent.params === 'utilities' || parent.params === 'components')
+        )
       ) {
         parents.push(parent.clone({ nodes: [] }))