From ebf5a17fbf0d8c4406f7daf208c71dfaaaf402a6 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Wed, 18 Sep 2024 14:26:53 +0200
Subject: [PATCH] add advanced test with various combinations

---
 .../migrate-at-layer-utilities.test.ts        | 75 +++++++++++++++++++
 1 file changed, 75 insertions(+)

diff --git a/packages/@tailwindcss-upgrade/src/codemods/migrate-at-layer-utilities.test.ts b/packages/@tailwindcss-upgrade/src/codemods/migrate-at-layer-utilities.test.ts
index 7d1b48043447..413613a53957 100644
--- a/packages/@tailwindcss-upgrade/src/codemods/migrate-at-layer-utilities.test.ts
+++ b/packages/@tailwindcss-upgrade/src/codemods/migrate-at-layer-utilities.test.ts
@@ -419,3 +419,78 @@ it('should not migrate nested classes inside a `:not(…)`', async () => {
     "
   `)
 })
+
+it('should migrate advanced combinations', async () => {
+  expect(
+    await migrate(css`
+      @layer utilities {
+        @media (width >= 100px) {
+          @supports (display: none) {
+            .foo .bar:not(.qux):has(.baz) {
+              display: none;
+            }
+          }
+
+          .bar {
+            color: red;
+          }
+        }
+
+        @media (width >= 200px) {
+          .foo {
+            &:hover {
+              @apply bg-red-500;
+
+              .bar {
+                color: red;
+              }
+            }
+          }
+        }
+      }
+    `),
+  ).toMatchInlineSnapshot(`
+    "@utility foo {
+      @media (width >= 100px) {
+        @supports (display: none) {
+          & .bar:not(.qux):has(.baz) {
+            display: none;
+          }
+        }
+      }
+      @media (width >= 200px) {
+        &:hover {
+          @apply bg-red-500;
+
+          .bar {
+            color: red;
+          }
+        }
+      }
+    }
+    @utility bar {
+      @media (width >= 100px) {
+        @supports (display: none) {
+          .foo &:not(.qux):has(.baz) {
+            display: none;
+          }
+        }
+      }
+      @media (width >= 100px) {
+        color: red;
+      }
+    }
+    @utility baz {
+      @media (width >= 100px) {
+        @supports (display: none) {
+          .foo .bar:not(.qux):has(&) {
+            display: none;
+          }
+        }
+      }
+    }
+
+
+    "
+  `)
+})