fix(preset-mini): add tagged variants' pseudo in order

unocss · Jun 25, 2022 · 1be1bd0 · 1be1bd0
1 parent fc2ed5b
commit 1be1bd0
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 23 deletions.
diff --git a/packages/preset-mini/src/variants/pseudo.ts b/packages/preset-mini/src/variants/pseudo.ts
@@ -82,7 +82,7 @@ const sortValue = (pseudo: string) => {
 }
 
 const taggedPseudoClassMatcher = (tag: string, parent: string, combinator: string): VariantObject => {
-  const rawRe = new RegExp(`${escapeRegExp(parent)}:`)
+  const rawRe = new RegExp(`(${escapeRegExp(parent)}:)(\\S+)${escapeRegExp(combinator)}\\1`)
   const pseudoRE = new RegExp(`^${tag}-((?:(${PseudoClassFunctionsStr})-)?(${PseudoClassesStr}))[:-]`)
   const pseudoColonRE = new RegExp(`^${tag}-((?:(${PseudoClassFunctionsStr})-)?(${PseudoClassesColonStr}))[:]`)
   return {
@@ -97,14 +97,13 @@ const taggedPseudoClassMatcher = (tag: string, parent: string, combinator: strin
           matcher: input.slice(match[0].length),
           handle: (input, next) => next({
             ...input,
-            prefix: rawRe.test(input.prefix)
-              ? input.prefix.replace(rawRe, `${parent}${pseudo}:`)
-              : `${input.prefix}${parent}${pseudo}${combinator}`,
+            prefix: `${input.prefix}${parent}${pseudo}${combinator}`.replace(rawRe, '$1$2:'),
             sort: sortValue(match[3]),
           }),
         }
       }
     },
+    multiPass: true,
   }
 }
 
@@ -164,22 +163,10 @@ export const variantTaggedPseudoClasses = (options: PresetMiniOptions = {}): Var
   const attributify = !!options?.attributifyPseudo
 
   return [
-    {
-      ...taggedPseudoClassMatcher('group', attributify ? '[group=""]' : '.group', ' '),
-      multiPass: true,
-    },
-    {
-      ...taggedPseudoClassMatcher('peer', attributify ? '[peer=""]' : '.peer', '~'),
-      multiPass: true,
-    },
-    {
-      ...taggedPseudoClassMatcher('parent', attributify ? '[parent=""]' : '.parent', '>'),
-      multiPass: true,
-    },
-    {
-      ...taggedPseudoClassMatcher('previous', attributify ? '[previous=""]' : '.previous', '+'),
-      multiPass: true,
-    },
+    taggedPseudoClassMatcher('group', attributify ? '[group=""]' : '.group', ' '),
+    taggedPseudoClassMatcher('peer', attributify ? '[peer=""]' : '.peer', '~'),
+    taggedPseudoClassMatcher('parent', attributify ? '[parent=""]' : '.parent', '>'),
+    taggedPseudoClassMatcher('previous', attributify ? '[previous=""]' : '.previous', '+'),
   ]
 }
 

diff --git a/test/__snapshots__/order.test.ts.snap b/test/__snapshots__/order.test.ts.snap
@@ -14,8 +14,9 @@ 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));}
+.parent:hover>.dark .parent:focus-within>.parent-hover\\\\:dark\\\\:parent-focus-within\\\\:bg-yellow-600{--un-bg-opacity:1;background-color:rgba(202,138,4,var(--un-bg-opacity));}"
 `;
 
 exports[`order > variant ordering 1`] = `

diff --git a/test/__snapshots__/preset-mini.test.ts.snap b/test/__snapshots__/preset-mini.test.ts.snap
@@ -335,7 +335,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;}

diff --git a/test/order.test.ts b/test/order.test.ts
@@ -102,6 +102,7 @@ describe('order', () => {
     const { css } = await uno.generate([
       'dark:group-hover:group-focus-within:bg-blue-600',
       'group-hover:group-focus-within:dark:bg-red-600',
+      'parent-hover:dark:parent-focus-within:bg-yellow-600',
     ].join(' '), { preflights: false })
 
     expect(css).toMatchSnapshot()