fix(core)!: revert variant apply order in #1127 (#1162)

* fix(core)!: revert variant apply order in #1127

* fix(core,presets)!: update (revert) variants

Co-authored-by: Saya <chu121su12@gmail.com>

packages/core/src/generator/index.ts

@@ -324,7 +324,7 @@ export class UnoGenerator {
         if (typeof handler === 'string')
           handler = { matcher: handler }
         processed = handler.matcher
-        handlers.push(handler)
+        handlers.unshift(handler)
         variants.add(v)
         applied = true
         break

packages/preset-mini/src/variants/dark.ts

@@ -5,8 +5,8 @@ import { variantMatcher, variantParentMatcher } from '../utils'
 export const variantColorsMediaOrClass = (options: PresetMiniOptions = {}): Variant[] => {
   if (options?.dark === 'class') {
     return [
-      variantMatcher('dark', input => ({ prefix: `${input.prefix}.dark $$ ` })),
-      variantMatcher('light', input => ({ prefix: `${input.prefix}.light $$ ` })),
+      variantMatcher('dark', input => ({ prefix: `.dark $$ ${input.prefix}` })),
+      variantMatcher('light', input => ({ prefix: `.light $$ ${input.prefix}` })),
     ]
   }
 

packages/preset-mini/src/variants/directions.ts

@@ -2,6 +2,6 @@ import type { Variant } from '@unocss/core'
 import { variantMatcher } from '../utils'
 
 export const variantLanguageDirections: Variant[] = [
-  variantMatcher('rtl', input => ({ prefix: `${input.prefix}[dir="rtl"] $$ ` })),
-  variantMatcher('ltr', input => ({ prefix: `${input.prefix}[dir="ltr"] $$ ` })),
+  variantMatcher('rtl', input => ({ prefix: `[dir="rtl"] $$ ${input.prefix}` })),
+  variantMatcher('ltr', input => ({ prefix: `[dir="ltr"] $$ ${input.prefix}` })),
 ]

packages/preset-mini/src/variants/pseudo.ts

@@ -99,7 +99,7 @@ const taggedPseudoClassMatcher = (tag: string, parent: string, combinator: strin
             ...input,
             prefix: rawRe.test(input.prefix)
               ? input.prefix.replace(rawRe, `${parent}${pseudo}:`)
-              : `${input.prefix}${parent}${pseudo}${combinator}`,
+              : `${parent}${pseudo}${combinator}${input.prefix}`,
             sort: sortValue(match[3]),
           }),
         }

packages/preset-wind/src/variants/dark.ts

@@ -2,8 +2,8 @@ import type { Variant } from '@unocss/core'
 import { variantMatcher, variantParentMatcher } from '@unocss/preset-mini/utils'
 
 export const variantColorsScheme: Variant[] = [
-  variantMatcher('.dark', input => ({ prefix: `${input.prefix}.dark $$ ` })),
-  variantMatcher('.light', input => ({ prefix: `${input.prefix}.light $$ ` })),
+  variantMatcher('.dark', input => ({ prefix: `.dark $$ ${input.prefix}` })),
+  variantMatcher('.light', input => ({ prefix: `.light $$ ${input.prefix}` })),
   variantParentMatcher('@dark', '@media (prefers-color-scheme: dark)'),
   variantParentMatcher('@light', '@media (prefers-color-scheme: light)'),
 ]

test/__snapshots__/order.test.ts.snap

@@ -14,24 +14,24 @@ exports[`order > movePseudoElementsEnd 1`] = `".marker\\\\:file\\\\:hover\\\\:se
 
 exports[`order > multiple variant sorting 1`] = `
 "/* layer: default */
-.dark .group:focus-within:hover .dark\\\\:group-hover\\\\:group-focus-within\\\\:bg-blue-600{--un-bg-opacity:1;background-color:rgba(37,99,235,var(--un-bg-opacity));}
-.group:focus-within:hover .dark .group-hover\\\\:group-focus-within\\\\:dark\\\\:bg-red-600{--un-bg-opacity:1;background-color:rgba(220,38,38,var(--un-bg-opacity));}"
+.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 */
 .group .dark .dark\\\\:group\\\\:foo-3{name:foo-3;}
 .group .dark .group\\\\:dark\\\\:foo-4{name:foo-4;}
-.group .light .group\\\\:light\\\\:foo-2{name:foo-2;}
-.light .group .light\\\\:group\\\\:foo-1{name:foo-1;}"
+.group .light .light\\\\:group\\\\:foo-1{name:foo-1;}
+.light .group .group\\\\:light\\\\:foo-2{name:foo-2;}"
 `;
 
 exports[`order > variant ordering reversed 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

@@ -118,12 +118,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));}
@@ -337,7 +337,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;}
@@ -373,7 +373,7 @@ div:hover .group-\\\\[div\\\\:hover\\\\]-\\\\[combinator\\\\:test-4\\\\]{combina
 .c-\\\\$color-variable,
 .c-\\\\$color-variable\\\\/\\\\$opacity-variable,
 .c-\\\\$color-variable\\\\/10{color:var(--color-variable);}
-.checked\\\\:next\\\\:text-slate-100:checked+*{--un-text-opacity:1;color:rgba(241,245,249,var(--un-text-opacity));}
+.checked\\\\:next\\\\:text-slate-100+*:checked{--un-text-opacity:1;color:rgba(241,245,249,var(--un-text-opacity));}
 .color-\\\\$red{color:var(--red);}
 .color-blue,
 .color-blue-400{--un-text-opacity:1;color:rgba(96,165,250,var(--un-text-opacity));}
@@ -390,7 +390,7 @@ div:hover .group-\\\\[div\\\\:hover\\\\]-\\\\[combinator\\\\:test-4\\\\]{combina
 .in-range\\\\:color-pink-100:in-range,
 .open\\\\:color-pink-100[open],
 .out-of-range\\\\:color-pink-100:out-of-range{--un-text-opacity:1;color:rgba(252,231,243,var(--un-text-opacity));}
-.next\\\\:checked\\\\:text-slate-200+*:checked{--un-text-opacity:1;color:rgba(226,232,240,var(--un-text-opacity));}
+.next\\\\:checked\\\\:text-slate-200:checked+*{--un-text-opacity:1;color:rgba(226,232,240,var(--un-text-opacity));}
 .placeholder-color-red-1::placeholder,
 .text-red-100,
 .text-red100{--un-text-opacity:1;color:rgba(254,226,226,var(--un-text-opacity));}
@@ -805,12 +805,12 @@ div:hover .group-\\\\[div\\\\:hover\\\\]-\\\\[combinator\\\\:test-4\\\\]{combina
 @media (max-width: 1023.9px){
 .lt-lg\\\\:m2{margin:0.5rem;}
 }
-@media (min-width: 640px){@media (max-width: 1023.9px){
-.sm\\\\:lt-lg\\\\:p-10{padding:2.5rem;}
-}}
 @media (max-width: 639.9px){
 .lt-sm\\\\:m1{margin:0.25rem;}
 }
+@media (max-width: 1023.9px){@media (min-width: 640px){
+.sm\\\\:lt-lg\\\\:p-10{padding:2.5rem;}
+}}
 @media (min-width: 640px){
 .sm\\\\:important\\\\:p-3{padding:0.75rem !important;}
 .sm\\\\:m-1,

test/__snapshots__/variant-handler.test.ts.snap

@@ -10,9 +10,9 @@ exports[`variants > selector section is merged in order 1`] = `
 
 exports[`variants > variant can stack 1`] = `
 "/* layer: default */
-.append-one\\\\:append-two\\\\:append-three\\\\:foo > :append-one > :append-two > :append-three,
-.append-one\\\\:prepend-three\\\\:prepend-two\\\\:foo > :append-one + :prepend-two + :prepend-three,
-.prepend-one\\\\:prepend-two\\\\:prepend-three\\\\:foo + :prepend-three + :prepend-two + :prepend-one{name:bar;}"
+.append-one\\\\:append-two\\\\:append-three\\\\:foo > :append-three > :append-two > :append-one,
+.append-one\\\\:prepend-three\\\\:prepend-two\\\\:foo > :append-one + :prepend-three + :prepend-two,
+.prepend-one\\\\:prepend-two\\\\:prepend-three\\\\:foo + :prepend-one + :prepend-two + :prepend-three{name:bar;}"
 `;
 
 exports[`variants > variant context is propagated 1`] = `