feat: focus-visible:

MellowCo · Jun 15, 2023 · b6c4a17 · b6c4a17
1 parent e8732e4
commit b6c4a17
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 4 deletions.
diff --git 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<Theme> {
   let PseudoClassesAndElementsRE: RegExp

diff --git 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
@@ -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
@@ -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
@@ -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',