fix(core): improve multiple variant sorting (#987)

packages/core/src/generator/index.ts

@@ -298,7 +298,7 @@ export class UnoGenerator {
         processed = handler.matcher
         if (Array.isArray(handler.parent))
           this.parentOrders.set(handler.parent[0], handler.parent[1])
-        handlers.push(handler)
+        handlers.unshift(handler)
         variants.add(v)
         applied = true
         break
@@ -316,8 +316,9 @@ export class UnoGenerator {
   applyVariants(parsed: ParsedUtil, variantHandlers = parsed[4], raw = parsed[1]): UtilObject {
     const handlers = [...variantHandlers].sort((a, b) => (a.order || 0) - (b.order || 0))
     const entries = handlers.reduce((p, v) => v.body?.(p) || p, parsed[2])
+    const selector = handlers.reduce((p, v) => v.selector?.(p, entries) || p, toEscapedSelector(raw))
     const obj: UtilObject = {
-      selector: handlers.reduce((p, v) => v.selector?.(p, entries) || p, toEscapedSelector(raw)),
+      selector: movePseudoElementsEnd(selector),
       entries,
       parent: handlers.reduce((p: string | undefined, v) => Array.isArray(v.parent) ? v.parent[0] : v.parent || p, undefined),
       layer: handlers.reduce((p: string | undefined, v) => v.layer || p, undefined),
@@ -544,6 +545,15 @@ function applyScope(css: string, scope?: string) {
     return scope ? `${scope} ${css}` : css
 }
 
+export function movePseudoElementsEnd(selector: string) {
+  const pseudoElements = selector.match(/::[\w-]+/g)
+  if (pseudoElements) {
+    pseudoElements.forEach(e => (selector = selector.replace(e, '')))
+    selector += pseudoElements.join('')
+  }
+  return selector
+}
+
 const attributifyRe = /^\[(.+?)(~?=)"(.*)"\]$/
 export function toEscapedSelector(raw: string) {
   if (attributifyRe.test(raw))

test/__snapshots__/order.test.ts.snap

@@ -1,11 +1,19 @@
 // Vitest Snapshot v1
 
+exports[`order > movePseudoElementsEnd 1`] = `".marker\\\\:file\\\\:hover\\\\:selection\\\\:mb-4:hover::marker::file-selector-button::selection"`;
+
+exports[`order > multiple variant sorting 1`] = `
+"/* layer: default */
+.dark .group:hover:focus-within .dark\\\\:group-hover\\\\:group-focus-within\\\\:bg-blue-600{--un-bg-opacity:1;background-color:rgba(37,99,235,var(--un-bg-opacity));}
+.group:hover:focus-within .dark .group-hover\\\\:group-focus-within\\\\:dark\\\\:bg-red-600{--un-bg-opacity:1;background-color:rgba(220,38,38,var(--un-bg-opacity));}"
+`;
+
 exports[`order > variant ordering 1`] = `
 "/* layer: default */
 .dark .group .dark\\\\:group\\\\:foo-3{name:foo-3;}
 .dark .group .group\\\\:dark\\\\:foo-4{name:foo-4;}
-.group .light .light\\\\:group\\\\:foo-1{name:foo-1;}
-.light .group .group\\\\:light\\\\:foo-2{name:foo-2;}"
+.group .light .group\\\\:light\\\\:foo-2{name:foo-2;}
+.light .group .light\\\\:group\\\\:foo-1{name:foo-1;}"
 `;
 
 exports[`order > variant sorting 1`] = `

test/__snapshots__/preset-mini.test.ts.snap

@@ -109,12 +109,12 @@ div:hover .group-\\\\[div\\\\:hover\\\\]-\\\\[combinator\\\\:test-4\\\\]{combina
 .file\\\\:bg-violet-50::file-selector-button{--un-bg-opacity:1;background-color:rgba(245,243,255,var(--un-bg-opacity));}
 .first-letter\\\\:bg-green-400::first-letter,
 .first-line\\\\:bg-green-400::first-line{--un-bg-opacity:1;background-color:rgba(74,222,128,var(--un-bg-opacity));}
-.focus-within\\\\:has-first\\\\:checked\\\\:bg-gray\\\\/20:focus-within:has(:first-child):checked,
-.focus-within\\\\:where-first\\\\:checked\\\\:bg-gray\\\\/20:focus-within:where(:first-child):checked{background-color:rgba(156,163,175,0.2);}
+.focus-within\\\\:has-first\\\\:checked\\\\:bg-gray\\\\/20:checked:has(:first-child):focus-within,
+.focus-within\\\\:where-first\\\\:checked\\\\:bg-gray\\\\/20:checked:where(:first-child):focus-within{background-color:rgba(156,163,175,0.2);}
 .hover\\\\:file\\\\:bg-violet-100:hover::file-selector-button{--un-bg-opacity:1;background-color:rgba(237,233,254,var(--un-bg-opacity));}
-.hover\\\\:is-first\\\\:checked\\\\:bg-true-gray\\\\/10:hover:is(:first-child):checked,
-.hover\\\\:not-first\\\\:checked\\\\:bg-true-gray\\\\/10:hover:not(:first-child):checked{background-color:rgba(163,163,163,0.1);}
-.hover\\\\:not-first\\\\:checked\\\\:bg-red\\\\/10:hover:not(:first-child):checked{background-color:rgba(248,113,113,0.1);}
+.hover\\\\:is-first\\\\:checked\\\\:bg-true-gray\\\\/10:checked:is(:first-child):hover,
+.hover\\\\:not-first\\\\:checked\\\\:bg-true-gray\\\\/10:checked:not(:first-child):hover{background-color:rgba(163,163,163,0.1);}
+.hover\\\\:not-first\\\\:checked\\\\:bg-red\\\\/10:checked:not(:first-child):hover{background-color:rgba(248,113,113,0.1);}
 .marker\\\\:bg-violet-200::marker{--un-bg-opacity:1;background-color:rgba(221,214,254,var(--un-bg-opacity));}
 .peer:checked~.peer-checked\\\\:bg-blue-500{--un-bg-opacity:1;background-color:rgba(59,130,246,var(--un-bg-opacity));}
 .previous:checked+.previous-checked\\\\:bg-red-500{--un-bg-opacity:1;background-color:rgba(239,68,68,var(--un-bg-opacity));}
@@ -325,7 +325,7 @@ div:hover .group-\\\\[div\\\\:hover\\\\]-\\\\[combinator\\\\:test-4\\\\]{combina
 .text-shadow-color-op-30{--un-text-shadow-opacity:0.3;}
 .case-upper{text-transform:uppercase;}
 .case-normal{text-transform:none;}
-.group:focus:hover .group-hover\\\\:group-focus\\\\:text-center,
+.group:hover:focus .group-hover\\\\:group-focus\\\\:text-center,
 .parent:hover>.parent-hover\\\\:text-center{text-align:center;}
 .text-left,
 [dir=\\"ltr\\"] .ltr\\\\:text-left{text-align:left;}

test/order.test.ts

@@ -1,6 +1,7 @@
-import { createGenerator } from '@unocss/core'
+import { createGenerator, movePseudoElementsEnd } from '@unocss/core'
 import { describe, expect, test } from 'vitest'
 import { variantMatcher } from '@unocss/preset-mini/utils'
+import presetMini from '@unocss/preset-mini'
 
 describe('order', () => {
   test('static', async () => {
@@ -59,6 +60,26 @@ describe('order', () => {
     expect(css).toEqual(css2)
   })
 
+  test('multiple variant sorting', async () => {
+    const uno = createGenerator({
+      presets: [
+        presetMini(),
+      ],
+    })
+
+    const { css } = await uno.generate([
+      'dark:group-hover:group-focus-within:bg-blue-600',
+      'group-hover:group-focus-within:dark:bg-red-600',
+    ].join(' '))
+
+    expect(css).toMatchSnapshot()
+  })
+
+  test('movePseudoElementsEnd', () => {
+    expect(movePseudoElementsEnd('.marker\\:file\\:hover\\:selection\\:mb-4::marker::file-selector-button:hover::selection'))
+      .toMatchSnapshot()
+  })
+
   test('variant sorting', async () => {
     const uno = createGenerator({
       rules: [