feat(core): variant ordering (#342)

packages/core/src/generator/index.ts

@@ -279,11 +279,12 @@ export class UnoGenerator {
   }
 
   applyVariants(parsed: ParsedUtil, variantHandlers = parsed[4], raw = parsed[1]): UtilObject {
-    const entries = variantHandlers.reduce((p, v) => v.body?.(p) || p, parsed[2])
+    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 obj: UtilObject = {
-      selector: variantHandlers.reduce((p, v) => v.selector?.(p, entries) || p, toEscapedSelector(raw)),
+      selector: handlers.reduce((p, v) => v.selector?.(p, entries) || p, toEscapedSelector(raw)),
       entries,
-      parent: variantHandlers.reduce((p: string | undefined, v) => Array.isArray(v.parent) ? v.parent[0] : v.parent || p, undefined),
+      parent: handlers.reduce((p: string | undefined, v) => Array.isArray(v.parent) ? v.parent[0] : v.parent || p, undefined),
     }
 
     for (const p of this.config.postprocess)

packages/core/src/types.ts

@@ -158,6 +158,10 @@ export interface VariantHandler {
    * Provide a parent selector(e.g. media query) to the output css.
    */
   parent?: string | [string, number] | undefined
+  /**
+   * Variant ordering.
+   */
+  order?: number
 }
 
 export type VariantFunction<Theme extends {} = {}> = (matcher: string, context: Readonly<VariantContext<Theme>>) => string | VariantHandler | undefined

test/__snapshots__/order.test.ts.snap

@@ -0,0 +1,9 @@
+// Vitest Snapshot v1
+
+exports[`order > variant 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;}"
+`;

test/order.test.ts

@@ -1,5 +1,6 @@
 import { createGenerator } from '@unocss/core'
 import { describe, expect, test } from 'vitest'
+import { variantMatcher } from '@unocss/preset-mini/utils'
 
 describe('order', () => {
   test('static', async() => {
@@ -25,4 +26,36 @@ describe('order', () => {
     const { css } = await uno.generate('foo')
     expect(css).toContain('bar2')
   })
+
+  test('variant', async() => {
+    const uno = createGenerator({
+      rules: [
+        [/^foo-.$/, ([m]) => ({ name: m })],
+      ],
+      presets: [],
+      variants: [
+        variantMatcher('light', input => `.light $$ ${input}`),
+        variantMatcher('group', input => `.group ${input}`),
+        (v) => {
+          const match = variantMatcher('dark', input => `.dark $$ ${input}`)(v)
+          if (match) {
+            return {
+              ...match,
+              order: 1,
+            }
+          }
+        },
+      ],
+    })
+    const code = [
+      'light:group:foo-1',
+      'group:light:foo-2',
+      'dark:group:foo-3',
+      'group:dark:foo-4',
+    ].join(' ')
+    const { css } = await uno.generate(code)
+    const { css: css2 } = await uno.generate(code)
+    expect(css).toMatchSnapshot()
+    expect(css).toEqual(css2)
+  })
 })