feat: pseudo-class function for custom arguments

MellowCo · Jun 15, 2023 · 4eac42a · 4eac42a
1 parent 58f8a46
commit 4eac42a
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 9 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -8,6 +8,5 @@
     "unocss",
     "Weapp",
     "whitespaces"
-  ],
-  "testing.automaticallyOpenPeekView": "never"
+  ]
 }
diff --git a/src/variants/pseudo.ts b/src/variants/pseudo.ts
@@ -3,7 +3,7 @@ import { escapeRegExp, escapeSelector, warnOnce } from '@unocss/core'
 
 import { restoreSelector } from 'unplugin-transform-class/utils'
 import type { PresetWeappOptions } from '..'
-import { handler as h, variantGetBracket } from '../utils'
+import { getBracket, h, variantGetBracket } from '../utils'
 import type { Theme } from '../theme'
 
 const PseudoClasses: Record<string, string> = Object.fromEntries([
@@ -94,8 +94,9 @@ function taggedPseudoClassMatcher(tag: string, parent: string, combinator: strin
   let splitRE: RegExp
   let pseudoRE: RegExp
   let pseudoColonRE: RegExp
+  let pseudoVarRE: RegExp
 
-  const matchBracket = (input: string) => {
+  const matchBracket = (input: string): [label: string, rest: string, prefix: string] | undefined => {
     const body = variantGetBracket(`${tag}-`, input, [])
     if (!body)
       return
@@ -114,7 +115,7 @@ function taggedPseudoClassMatcher(tag: string, parent: string, combinator: strin
     ]
   }
 
-  const matchPseudo = (input: string) => {
+  const matchPseudo = (input: string): [label: string, rest: string, prefix: string, pseudoKey: string] | undefined => {
     const match = input.match(pseudoRE) || input.match(pseudoColonRE)
     if (!match)
       return
@@ -133,23 +134,39 @@ function taggedPseudoClassMatcher(tag: string, parent: string, combinator: strin
     ]
   }
 
+  const matchPseudoVar = (input: string): [label: string, rest: string, prefix: string] | undefined => {
+    const match = input.match(pseudoVarRE)
+    if (!match)
+      return
+    const [original, fn, pseudoValue] = match
+    const label = match[3] ?? ''
+    const pseudo = `:${fn}(${pseudoValue})`
+
+    return [
+      label,
+      input.slice(original.length),
+      `${parent}${escapeSelector(label)}${pseudo}`,
+    ]
+  }
+
   return {
     name: `pseudo:${tag}`,
     match(input, ctx) {
       if (!(splitRE && pseudoRE && pseudoColonRE)) {
         splitRE = new RegExp(`(?:${ctx.generator.config.separators.join('|')})`)
         pseudoRE = new RegExp(`^${tag}-(?:(?:(${PseudoClassFunctionsStr})-)?(${PseudoClassesStr}))(?:(/\\w+))?(?:${ctx.generator.config.separators.join('|')})`)
         pseudoColonRE = new RegExp(`^${tag}-(?:(?:(${PseudoClassFunctionsStr})-)?(${PseudoClassesColonStr}))(?:(/\\w+))?(?:${ctx.generator.config.separators.filter(x => x !== '-').join('|')})`)
+        pseudoVarRE = new RegExp(`^${tag}-(?:(${PseudoClassFunctionsStr})-)?\\[(.+)\\](?:(/\\w+))?(?:${ctx.generator.config.separators.filter(x => x !== '-').join('|')})`)
       }
 
       if (!input.startsWith(tag))
         return
 
-      const result = matchBracket(input) || matchPseudo(input)
+      const result = matchBracket(input) || matchPseudo(input) || matchPseudoVar(input)
       if (!result)
         return
 
-      const [label, matcher, prefix, pseudoName = ''] = result as [string, string, string, string | undefined]
+      const [label, matcher, prefix, pseudoName = ''] = result
 
       if (label !== '')
         warnOnce('The labeled variant is experimental and may not follow semver.')
@@ -222,17 +239,21 @@ export function variantPseudoClassesAndElements(): VariantObject<Theme> {
 export function variantPseudoClassFunctions(): VariantObject {
   let PseudoClassFunctionsRE: RegExp
   let PseudoClassColonFunctionsRE: RegExp
+  let PseudoClassVarFunctionRE: RegExp
+
   return {
     match(input, ctx) {
       if (!(PseudoClassFunctionsRE && PseudoClassColonFunctionsRE)) {
         PseudoClassFunctionsRE = new RegExp(`^(${PseudoClassFunctionsStr})-(${PseudoClassesStr})(?:${ctx.generator.config.separators.join('|')})`)
         PseudoClassColonFunctionsRE = new RegExp(`^(${PseudoClassFunctionsStr})-(${PseudoClassesColonStr})(?:${ctx.generator.config.separators.filter(x => x !== '-').join('|')})`)
+        PseudoClassVarFunctionRE = new RegExp(`^(${PseudoClassFunctionsStr})-(\\[.+\\])(?:${ctx.generator.config.separators.filter(x => x !== '-').join('|')})`)
       }
 
-      const match = input.match(PseudoClassFunctionsRE) || input.match(PseudoClassColonFunctionsRE)
+      const match = input.match(PseudoClassFunctionsRE) || input.match(PseudoClassColonFunctionsRE) || input.match(PseudoClassVarFunctionRE)
       if (match) {
         const fn = match[1]
-        const pseudo = PseudoClasses[match[2]] || PseudoClassesColon[match[2]] || `:${match[2]}`
+        const fnVal = getBracket(match[2], '[', ']')
+        const pseudo = fnVal ? h.bracket(match[2]) : (PseudoClasses[match[2]] || PseudoClassesColon[match[2]] || `:${match[2]}`)
         return {
           matcher: input.slice(match[0].length),
           selector: s => `${s}:${fn}(${pseudo})`,