add advanced test with various combinations

tailwindlabs · Sep 18, 2024 · ebf5a17 · ebf5a17
1 parent 74e21a9
commit ebf5a17
Showing 1 changed file with 75 additions and 0 deletions.
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
@@ -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;
+          }
+        }
+      }
+    }
+
+
+    "
+  `)
+})