From d91e2adc0c1187ebd9e022bc9b1a4ee4a6d9664a Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Thu, 24 Oct 2024 22:00:15 +0200
Subject: [PATCH 1/2] update comment

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
---
 packages/@tailwindcss-upgrade/src/index.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/@tailwindcss-upgrade/src/index.ts b/packages/@tailwindcss-upgrade/src/index.ts
index b2f211b45957..46b1fd6729e6 100644
--- a/packages/@tailwindcss-upgrade/src/index.ts
+++ b/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')
         ) {

From c0301447124597e1397ba2289f460706a53bc5fb Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Thu, 24 Oct 2024 22:01:09 +0200
Subject: [PATCH 2/2] update test to be more realistic

Put `tailwindcss/components` above the `tailwindcss/utilities`.

This now also updates the `layer(utilities)` to `layer(components)` on
the `@import './my-other.css' layer(components);` at-rule.
---
 integrations/upgrade/index.test.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/integrations/upgrade/index.test.ts b/integrations/upgrade/index.test.ts
index 3680e8ae353c..cd89f6d38b6f 100644
--- a/integrations/upgrade/index.test.ts
+++ b/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,8 +1600,6 @@ test(
     expect(await fs.dumpFiles('./src/**/*.css')).toMatchInlineSnapshot(`
       "
       --- ./src/index.css ---
-      @import 'tailwindcss/utilities' layer(utilities);
-
       /* No layer expected */
       @import './my-components.css';
 
@@ -1609,7 +1607,9 @@ test(
       @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 {