feat: pseudo variants generation order

MellowCo · Jun 14, 2023 · 95f82ae · 95f82ae
1 parent f3bfda7
commit 95f82ae
Show file tree

Hide file tree

Showing 5 changed files with 178 additions and 178 deletions.
diff --git a/src/variants/default.ts b/src/variants/default.ts
@@ -10,7 +10,7 @@ import { variantNegative } from './negative'
 import { variantImportant } from './important'
 import { variantCustomMedia, variantPrint } from './media'
 import { variantSupports } from './supports'
-import { partClasses, variantPseudoClassFunctions, variantPseudoClassesAndElements, variantTaggedPseudoClasses } from './pseudo'
+import { variantPartClasses, variantPseudoClassFunctions, variantPseudoClassesAndElements, variantTaggedPseudoClasses } from './pseudo'
 import { variantAria } from './aria'
 import { variantDataAttribute } from './data'
 import { variantContainerQuery } from './container'
@@ -36,7 +36,7 @@ export function variants(options: PresetWeappOptions): Variant<Theme>[] {
     variantPseudoClassFunctions,
     ...variantTaggedPseudoClasses(options),
 
-    partClasses,
+    variantPartClasses,
     ...variantColorsMediaOrClass(options),
     ...variantLanguageDirections,
     variantScope,

diff --git a/src/variants/pseudo.ts b/src/variants/pseudo.ts
@@ -18,29 +18,32 @@ const PseudoClasses: Record<string, string> = Object.fromEntries([
   'target',
   ['open', '[open]'],
 
-  // user action
-  'hover',
-  'active',
-  'focus-visible',
-  'focus-within',
-  'focus',
-
-  // input
-  'autofill',
-  'enabled',
-  'disabled',
-  'read-only',
-  'read-write',
-  'placeholder-shown',
+  // forms
   'default',
   'checked',
   'indeterminate',
+  'placeholder-shown',
+  'autofill',
+  'optional',
+  'required',
   'valid',
   'invalid',
   'in-range',
   'out-of-range',
-  'required',
-  'optional',
+  'read-only',
+  'read-write',
+
+  // content
+  'empty',
+
+  // interactions
+  'focus-within',
+  'hover',
+  'focus',
+  'focus-visible',
+  'active',
+  'enabled',
+  'disabled',
 
   // tree-structural
   'root',
@@ -66,10 +69,14 @@ const PseudoClasses: Record<string, string> = Object.fromEntries([
   ['file', '::file-selector-button'],
 ].map(key => Array.isArray(key) ? key : [key, `:${key}`]))
 
+const PseudoClassesKeys = Object.keys(PseudoClasses)
+
 const PseudoClassesColon: Record<string, string> = Object.fromEntries([
   ['backdrop', '::backdrop'],
 ].map(key => Array.isArray(key) ? key : [key, `:${key}`]))
 
+const PseudoClassesColonKeys = Object.keys(PseudoClassesColon)
+
 const PseudoClassFunctions = [
   'not',
   'is',
@@ -81,22 +88,6 @@ 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('|')
 
-function pseudoModifier(pseudo: string) {
-  if (pseudo === 'focus') {
-    return {
-      sort: 10,
-      noMerge: true,
-    }
-  }
-
-  if (pseudo === 'active') {
-    return {
-      sort: 20,
-      noMerge: true,
-    }
-  }
-}
-
 function taggedPseudoClassMatcher(tag: string, parent: string, combinator: string): VariantObject {
   const rawRE = new RegExp(`^(${escapeRegExp(parent)}:)(\\S+)${escapeRegExp(combinator)}\\1`)
   const pseudoRE = new RegExp(`^${tag}-(?:(?:(${PseudoClassFunctionsStr})-)?(${PseudoClassesStr}))(?:(/\\w+))?[:-]`)
@@ -160,7 +151,7 @@ function taggedPseudoClassMatcher(tag: string, parent: string, combinator: strin
         handle: (input, next) => next({
           ...input,
           prefix: `${prefix}${combinator}${input.prefix}`.replace(rawRE, '$1$2:'),
-          ...pseudoModifier(pseudoName),
+          sort: PseudoClassesKeys.indexOf(pseudoName) ?? PseudoClassesColonKeys.indexOf(pseudoName),
         }),
       }
     },
@@ -170,6 +161,7 @@ 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 PseudoClassesAndElementsRE = new RegExp(`^(${PseudoClassesAndElementsStr})[:-]`)
 const PseudoClassesAndElementsColonRE = new RegExp(`^(${PseudoClassesAndElementsColonStr})[:]`)
 
@@ -182,6 +174,13 @@ export const variantPseudoClassesAndElements: VariantObject<Theme> = {
     if (match) {
       const pseudo = PseudoClasses[match[1]] || PseudoClassesColon[match[1]] || `:${match[1]}`
 
+      // order of pseudo classes
+      let index: number | undefined = PseudoClassesKeys.indexOf(match[1])
+      if (index === -1)
+        index = PseudoClassesColonKeys.indexOf(match[1])
+      if (index === -1)
+        index = undefined
+
       return {
         matcher: input.slice(match[0].length),
         handle: (input, next) => {
@@ -196,7 +195,8 @@ export const variantPseudoClassesAndElements: VariantObject<Theme> = {
           return next({
             ...input,
             ...selectors,
-            ...pseudoModifier(match[1]),
+            sort: index,
+            noMerge: true,
           })
         },
       }
@@ -239,7 +239,7 @@ export function variantTaggedPseudoClasses(options: PresetWeappOptions = {}): Va
 }
 
 const PartClassesRE = /(part-\[(.+)]:)(.+)/
-export const partClasses: VariantObject = {
+export const variantPartClasses: VariantObject = {
   match(input: string) {
     const match = input.match(PartClassesRE)
     if (match) {