Handle feedback from #14783 (#14788)

This PR is a continuation of #14783 to handle the feedback on that PR.

1. Update the test to be more realistic
2. Updated the comment

---------

Co-authored-by: Adam Wathan <[email protected]>

Author: RobinMalfait

Diff for: integrations/upgrade/index.test.ts

@@ -1560,7 +1560,7 @@ test(
       `,
       'tailwind.config.js': js`module.exports = {}`,
       'src/index.css': css`
-        @import 'tailwindcss/utilities';
+        @import 'tailwindcss/components';
 
         /* No layer expected */
         @import './my-components.css';
@@ -1571,7 +1571,7 @@ test(
         /* Expecting a layer */
         @import './my-other.css';
 
-        @import 'tailwindcss/components';
+        @import 'tailwindcss/utilities';
       `,
       'src/my-components.css': css`
         @layer components {
@@ -1600,16 +1600,16 @@ test(
     expect(await fs.dumpFiles('./src/**/*.css')).toMatchInlineSnapshot(`
       "
       --- ./src/index.css ---
-      @import 'tailwindcss/utilities' layer(utilities);
-
       /* No layer expected */
       @import './my-components.css';
 
       /* No layer expected */
       @import './my-utilities.css';
 
       /* Expecting a layer */
-      @import './my-other.css' layer(utilities);
+      @import './my-other.css' layer(components);
+
+      @import 'tailwindcss/utilities' layer(utilities);
 
       --- ./src/my-components.css ---
       @utility foo {

Diff for: packages/@tailwindcss-upgrade/src/index.ts

@@ -158,8 +158,8 @@ async function run() {
         )
         if (!importedSheet) continue
 
-        // Only remove the `layer(…)` next to the import, if any of the children
-        // contains an `@utility`. Otherwise the `@utility` will not be top-level.
+        // Only remove the `layer(…)` next to the import if any of the children
+        // contain `@utility`. Otherwise `@utility` will not be top-level.
         if (
           !importedSheet.containsRule((node) => node.type === 'atrule' && node.name === 'utility')
         ) {