diff --git a/packages/preset-mini/src/_variants/pseudo.ts b/packages/preset-mini/src/_variants/pseudo.ts index 4bd789b7c7..e02df66e09 100644 --- a/packages/preset-mini/src/_variants/pseudo.ts +++ b/packages/preset-mini/src/_variants/pseudo.ts @@ -77,9 +77,13 @@ const PseudoClassesStr = Object.entries(PseudoClasses).filter(([, pseudo]) => !p const PseudoClassesColonStr = Object.entries(PseudoClassesColon).filter(([, pseudo]) => !pseudo.startsWith('::')).map(([key]) => key).join('|') const PseudoClassFunctionsStr = PseudoClassFunctions.join('|') -const sortValue = (pseudo: string) => { - if (pseudo === 'active') - return 1 +const pseudoModifier = (pseudo: string) => { + if (pseudo === 'active') { + return { + sort: 1, + noMerge: true, + } + } } const taggedPseudoClassMatcher = (tag: string, parent: string, combinator: string): VariantObject => { @@ -122,7 +126,7 @@ const taggedPseudoClassMatcher = (tag: string, parent: string, combinator: strin label, input.slice(original.length), `${parent}${escapeSelector(label)}${pseudo}`, - sortValue(pseudoKey), + pseudoKey, ] } @@ -142,7 +146,7 @@ const taggedPseudoClassMatcher = (tag: string, parent: string, combinator: strin if (!result) return - const [label, matcher, prefix, sort] = result as [string, string, string, number | undefined] + const [label, matcher, prefix, pseudoName = ''] = result as [string, string, string, string | undefined] if (label !== '') warnOnce('The labeled variant is experimental and may not follow semver.') @@ -151,8 +155,8 @@ const taggedPseudoClassMatcher = (tag: string, parent: string, combinator: strin handle: (input, next) => next({ ...input, prefix: `${prefix}${combinator}${input.prefix}`.replace(rawRE, '$1$2:'), + ...pseudoModifier(pseudoName), }), - sort, } }, multiPass: true, @@ -189,7 +193,7 @@ export const variantPseudoClassesAndElements = (): VariantObject => { return next({ ...input, ...selectors, - sort: sortValue(match[1]), + ...pseudoModifier(match[1]), }) }, } diff --git a/test/__snapshots__/preset-mini.test.ts.snap b/test/__snapshots__/preset-mini.test.ts.snap index 00883c8d4e..75b0f128da 100644 --- a/test/__snapshots__/preset-mini.test.ts.snap +++ b/test/__snapshots__/preset-mini.test.ts.snap @@ -951,9 +951,9 @@ unocss .scope-\\\\[unocss\\\\]\\\\:block{display:block;} .skew-y-10deg{--un-skew-y:10deg;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));} .skew-y-2grad{--un-skew-y:2grad;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));} .skew-y-3\\\\.14rad{--un-skew-y:3.14rad;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));} -.hover\\\\:scale-4:hover, -.active\\\\:scale-4:active{--un-scale-x:0.04;--un-scale-y:0.04;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));} +.hover\\\\:scale-4:hover{--un-scale-x:0.04;--un-scale-y:0.04;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));} .scale-\\\\$variable{--un-scale-x:var(--variable);--un-scale-y:var(--variable);transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));} +.active\\\\:scale-4:active{--un-scale-x:0.04;--un-scale-y:0.04;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));} .-scale-x-full{--un-scale-x:-100%;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));} .scale-x-\\\\$variable{--un-scale-x:var(--variable);transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));} .preserve-3d{transform-style:preserve-3d;} @@ -1051,3 +1051,10 @@ unocss .scope-\\\\[unocss\\\\]\\\\:block{display:block;} /* layer: uno_css */ .uno-layer-uno_css\\\\:block{display:block;}" `; + +exports[`preset-mini > the :active pseudo is sorted and separated after other pseudo 1`] = ` +"/* layer: default */ +.focus\\\\:bg-blue-3:focus, +.hover\\\\:bg-blue-3:hover{--un-bg-opacity:1;background-color:rgba(147,197,253,var(--un-bg-opacity));} +.active\\\\:bg-blue-3:active{--un-bg-opacity:1;background-color:rgba(147,197,253,var(--un-bg-opacity));}" +`; diff --git a/test/__snapshots__/shortcuts.test.ts.snap b/test/__snapshots__/shortcuts.test.ts.snap index 32afb518ec..1cd3b8f038 100644 --- a/test/__snapshots__/shortcuts.test.ts.snap +++ b/test/__snapshots__/shortcuts.test.ts.snap @@ -107,7 +107,7 @@ exports[`shortcuts > static 1`] = ` exports[`shortcuts > variant order 1`] = ` "/* layer: shortcuts */ .shortcut-hover-active-1:focus, -.shortcut-hover-active-1:hover, +.shortcut-hover-active-1:hover{--un-bg-opacity:1;background-color:rgba(134,239,172,var(--un-bg-opacity));} .shortcut-hover-active-1:active{--un-bg-opacity:1;background-color:rgba(134,239,172,var(--un-bg-opacity));}" `; @@ -138,6 +138,6 @@ exports[`shortcuts > variant order 5`] = ` "/* layer: shortcuts */ .shortcut-hover-active-2:focus{--un-bg-opacity:1;background-color:rgba(252,165,165,var(--un-bg-opacity));} .shortcut-hover-active-2:hover{--un-bg-opacity:1;background-color:rgba(253,224,71,var(--un-bg-opacity));} -.uno-layer-shortcuts\\\\:bg-blue-300, +.uno-layer-shortcuts\\\\:bg-blue-300{--un-bg-opacity:1;background-color:rgba(147,197,253,var(--un-bg-opacity));} .shortcut-hover-active-2:active{--un-bg-opacity:1;background-color:rgba(147,197,253,var(--un-bg-opacity));}" `; diff --git a/test/preset-mini.test.ts b/test/preset-mini.test.ts index 2666047371..8e4f1e642c 100644 --- a/test/preset-mini.test.ts +++ b/test/preset-mini.test.ts @@ -176,4 +176,22 @@ describe('preset-mini', () => { expect(css).toMatchSnapshot() }) + + test('the :active pseudo is sorted and separated after other pseudo', async () => { + const uno = createGenerator({ + presets: [ + presetMini(), + ], + }) + + const { css } = await uno.generate([ + 'hover:bg-blue-3', + 'active:bg-blue-3', + 'focus:bg-blue-3', + ].join(' '), { + preflights: false, + }) + + expect(css).toMatchSnapshot() + }) })