fix(postcss): incorrect order of breakpoints (#3064)

unocss · Sep 2, 2023 · eff0866 · eff0866
1 parent bccd4fd
commit eff0866
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 7 deletions.
diff --git a/packages/postcss/src/apply.ts b/packages/postcss/src/apply.ts
@@ -36,6 +36,8 @@ export async function parseApply(root: Root, uno: UnoGenerator, directiveName: s
     if (!utils.length)
       return
 
+    const parentAfterNodes: Root[] = []
+
     for (const i of utils) {
       const [, _selector, body, parent] = i
       const selector = _selector?.replace(regexScopePlaceholder, ' ') || _selector
@@ -71,7 +73,7 @@ export async function parseApply(root: Root, uno: UnoGenerator, directiveName: s
         css_parsed.walkDecls((declaration) => {
           declaration.source = source
         })
-        rule.parent.after(css_parsed)
+        parentAfterNodes.push(css_parsed)
       }
       else {
         const css = postcss.parse(body)
@@ -81,7 +83,7 @@ export async function parseApply(root: Root, uno: UnoGenerator, directiveName: s
         rule.parent.append(css)
       }
     }
-
+    rule.parent.after(parentAfterNodes)
     rule.remove()
   })
 }
diff --git a/test/__snapshots__/postcss.test.ts.snap b/test/__snapshots__/postcss.test.ts.snap
@@ -1,10 +1,14 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`postcss > @apply 1`] = `"div{--un-bg-opacity:1;background-color:rgba(248,113,113,var(--un-bg-opacity));}div:hover{--un-text-opacity:1;color:rgba(255,255,255,var(--un-text-opacity));}.dark div>:focus:hover{font-size:20px;}"`;
+exports[`postcss > @apply > basic 1`] = `"div{--un-bg-opacity:1;background-color:rgba(248,113,113,var(--un-bg-opacity));}.dark div>:focus:hover{font-size:20px;}div:hover{--un-text-opacity:1;color:rgba(255,255,255,var(--un-text-opacity));}"`;
+
+exports[`postcss > @apply > media 1`] = `"div{}@media (min-width: 640px){div{--un-bg-opacity:1;background-color:rgba(248,113,113,var(--un-bg-opacity));}}@media (min-width: 768px){div{--un-bg-opacity:1;background-color:rgba(96,165,250,var(--un-bg-opacity));}}@media (min-width: 1024px){div{--un-bg-opacity:1;background-color:rgba(244,114,182,var(--un-bg-opacity));}}@media (min-width: 1280px){div{--un-bg-opacity:1;background-color:rgba(255,255,255,var(--un-bg-opacity));}}"`;
 
 exports[`postcss > @screen 1`] = `
 "@media (min-width: 768px) and (max-width: 1023.9px) {
-      div{--un-bg-opacity:1;background-color:rgba(248,113,113,var(--un-bg-opacity));}div:hover{--un-text-opacity:1;color:rgba(255,255,255,var(--un-text-opacity));}.dark div>:focus:hover{font-size:20px;}
+      div{--un-bg-opacity:1;background-color:rgba(248,113,113,var(--un-bg-opacity));}
+      .dark div>:focus:hover{font-size:20px;}
+      div:hover{--un-text-opacity:1;color:rgba(255,255,255,var(--un-text-opacity));}
       div{color:#dc2626}
     }"
 `;

diff --git a/test/postcss.test.ts b/test/postcss.test.ts
@@ -115,10 +115,17 @@ describe('postcss', () => {
     expect(css).toMatchSnapshot()
   })
 
-  test('@apply', async () => {
-    const { css } = await pcssLite().process('div{@apply bg-red hover:text-white dark:hover:[&>:focus]:text-[20px];}', processOptions)
+  describe('@apply', () => {
+    test('basic', async () => {
+      const { css } = await pcssLite().process('div{@apply bg-red hover:text-white dark:hover:[&>:focus]:text-[20px];}', processOptions)
 
-    expect(css).toMatchSnapshot()
+      expect(css).toMatchSnapshot()
+    })
+
+    test('media', async () => {
+      const { css } = await pcssLite().process('div{@apply sm:bg-red lg:bg-pink xl:bg-white md:bg-blue}', processOptions)
+      expect(css).toMatchSnapshot()
+    })
   })
 
   test('theme()', async () => {