diff --git a/packages/preset-mini/src/variants/pseudo.ts b/packages/preset-mini/src/variants/pseudo.ts index e318977e8d..18ae3a2a0a 100644 --- 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 index 626a361fc9..b93bf4aa3a 100644 --- 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 index f47c1a85fe..41ad701798 100644 --- 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 index bfb6be5605..ebe6779e65 100644 --- 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()