diff --git a/src/variants/pseudo.ts b/src/variants/pseudo.ts index 216514d..02647b8 100644 --- a/src/variants/pseudo.ts +++ b/src/variants/pseudo.ts @@ -84,8 +84,16 @@ const PseudoClassFunctions = [ 'has', ] -const PseudoClassesStr = Object.entries(PseudoClasses).filter(([, pseudo]) => !pseudo.startsWith('::')).map(([key]) => key).join('|') -const PseudoClassesColonStr = Object.entries(PseudoClassesColon).filter(([, pseudo]) => !pseudo.startsWith('::')).map(([key]) => key).join('|') +const PseudoClassesStr = Object.entries(PseudoClasses) + .filter(([, pseudo]) => !pseudo.startsWith('::')) + .map(([key]) => key) + .sort((a, b) => b.length - a.length) + .join('|') +const PseudoClassesColonStr = Object.entries(PseudoClassesColon) + .filter(([, pseudo]) => !pseudo.startsWith('::')) + .map(([key]) => key) + .sort((a, b) => b.length - a.length) + .join('|') const PseudoClassFunctionsStr = PseudoClassFunctions.join('|') function taggedPseudoClassMatcher(tag: string, parent: string, combinator: string): VariantObject { @@ -184,8 +192,14 @@ function taggedPseudoClassMatcher(tag: string, parent: string, combinator: strin } } -const PseudoClassesAndElementsStr = Object.entries(PseudoClasses).map(([key]) => key).join('|') -const PseudoClassesAndElementsColonStr = Object.entries(PseudoClassesColon).map(([key]) => key).join('|') +const PseudoClassesAndElementsStr = Object.entries(PseudoClasses) + .map(([key]) => key) + .sort((a, b) => b.length - a.length) + .join('|') +const PseudoClassesAndElementsColonStr = Object.entries(PseudoClassesColon) + .map(([key]) => key) + .sort((a, b) => b.length - a.length) + .join('|') export function variantPseudoClassesAndElements(): VariantObject { let PseudoClassesAndElementsRE: RegExp diff --git a/test/assets/output/preset-mini-targets.css b/test/assets/output/preset-mini-targets.css index d5f4282..6470a10 100644 --- a/test/assets/output/preset-mini-targets.css +++ b/test/assets/output/preset-mini-targets.css @@ -937,6 +937,7 @@ unocss .scope-\[unocss\]\:block{display:block;} .outline-revert-layer{outline-style:revert-layer;} .outline-unset{outline-style:unset;} .outline-none{outline:2px solid transparent;outline-offset:2px;} +.focus-visible\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px;} .appearance-none{-webkit-appearance:none;appearance:none;} .order-\$variable{order:var(--variable);} .order-first{order:-9999;} diff --git a/test/assets/output/preset-weapp-rules.css b/test/assets/output/preset-weapp-rules.css index 01fbe20..20d5980 100644 --- a/test/assets/output/preset-weapp-rules.css +++ b/test/assets/output/preset-weapp-rules.css @@ -938,6 +938,7 @@ unocss .scope-_lfl11_unocss_lfr11__cl11_block{display:block;} .outline-revert-layer{outline-style:revert-layer;} .outline-unset{outline-style:unset;} .outline-none{outline:2px solid transparent;outline-offset:2px;} +.focus-visible_cl11_outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px;} .appearance-none{-webkit-appearance:none;appearance:none;} .order-_do11_variable{order:var(--variable);} .order-first{order:-9999;} diff --git a/test/assets/output/preset-weapp.css b/test/assets/output/preset-weapp.css index ba3cabc..a687747 100644 --- a/test/assets/output/preset-weapp.css +++ b/test/assets/output/preset-weapp.css @@ -940,6 +940,7 @@ unocss .scope-_lfl_unocss_lfr__cl_block{display:block;} .outline-revert-layer{outline-style:revert-layer;} .outline-unset{outline-style:unset;} .outline-none{outline:2px solid transparent;outline-offset:2px;} +.focus-visible_cl_outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px;} .appearance-none{-webkit-appearance:none;appearance:none;} .order-_do_variable{order:var(--variable);} .order-first{order:-9999;} diff --git a/test/assets/preset-mini-targets.ts b/test/assets/preset-mini-targets.ts index 90fedbb..acb55a6 100644 --- a/test/assets/preset-mini-targets.ts +++ b/test/assets/preset-mini-targets.ts @@ -1089,6 +1089,7 @@ export const presetMiniTargets: string[] = [ 'first-line:bg-green-400', 'first-letter:bg-green-400', 'group-hover:group-focus:text-center', + 'focus-visible:outline-none', 'hover:!p-1', 'hover:not-first:checked:bg-red/10', 'hover:p-5',