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

Dunqing · web-flow · commit eff08662d0d9 · 2023-09-02T22:11:42.000+02:00
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 () => {

Original file line number	Diff line number	Diff line change
`@@ -36,6 +36,8 @@ export async function parseApply(root: Root, uno: UnoGenerator, directiveName: s`
`36`	`36`	`if (!utils.length)`
`37`	`37`	`return`
`38`	`38`
	`39`	`+ const parentAfterNodes: Root[] = []`
	`40`	`+`
`39`	`41`	`for (const i of utils) {`
`40`	`42`	`const [, _selector, body, parent] = i`
`41`	`43`	`const selector = _selector?.replace(regexScopePlaceholder, ' ') \|\| _selector`
`@@ -71,7 +73,7 @@ export async function parseApply(root: Root, uno: UnoGenerator, directiveName: s`
`71`	`73`	`css_parsed.walkDecls((declaration) => {`
`72`	`74`	`declaration.source = source`
`73`	`75`	`})`
`74`		`- rule.parent.after(css_parsed)`
	`76`	`+ parentAfterNodes.push(css_parsed)`
`75`	`77`	`}`
`76`	`78`	`else {`
`77`	`79`	`const css = postcss.parse(body)`
`@@ -81,7 +83,7 @@ export async function parseApply(root: Root, uno: UnoGenerator, directiveName: s`
`81`	`83`	`rule.parent.append(css)`
`82`	`84`	`}`
`83`	`85`	`}`
`84`		`-`
	`86`	`+ rule.parent.after(parentAfterNodes)`
`85`	`87`	`rule.remove()`
`86`	`88`	`})`
`87`	`89`	`}`