implement matchVariant API

tailwindlabs · May 14, 2022 · b1a6bf0 · b1a6bf0
1 parent e84d2c6
commit b1a6bf0
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 3 deletions.
diff --git a/src/lib/generateRules.js b/src/lib/generateRules.js
@@ -127,6 +127,14 @@ function applyVariant(variant, matches, context) {
     return matches
   }
 
+  let args
+
+  // Find partial arbitrary variants
+  if (variant.endsWith(']') && !variant.startsWith('[')) {
+    args = variant.slice(variant.lastIndexOf('[') + 1, -1)
+    variant = variant.slice(0, variant.indexOf(args) - 1 /* - */ - 1 /* [ */)
+  }
+
   // Register arbitrary variants
   if (isArbitraryValue(variant) && !context.variantMap.has(variant)) {
     let selector = normalize(variant.slice(1, -1))
@@ -204,6 +212,7 @@ function applyVariant(variant, matches, context) {
           format(selectorFormat) {
             collectedFormats.push(selectorFormat)
           },
+          args,
         })
 
         if (typeof ruleWithVariant === 'string') {

diff --git a/src/lib/setupContextUtils.js b/src/lib/setupContextUtils.js
@@ -22,6 +22,8 @@ import isValidArbitraryValue from '../util/isValidArbitraryValue'
 import { generateRules } from './generateRules'
 import { hasContentChanged } from './cacheInvalidation.js'
 
+let MATCH_VARIANT = Symbol()
+
 function prefix(context, selector) {
   let prefix = context.tailwindConfig.prefix
   return typeof prefix === 'function' ? prefix(selector) : prefix + selector
@@ -219,13 +221,18 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
     return context.tailwindConfig.prefix + identifier
   }
 
-  return {
+  let api = {
     addVariant(variantName, variantFunctions, options = {}) {
       variantFunctions = [].concat(variantFunctions).map((variantFunction) => {
         if (typeof variantFunction !== 'string') {
           // Safelist public API functions
-          return ({ modifySelectors, container, separator }) => {
-            let result = variantFunction({ modifySelectors, container, separator })
+          return ({ args, modifySelectors, container, separator, wrap, format }) => {
+            let result = variantFunction(
+              Object.assign(
+                { modifySelectors, container, separator },
+                variantFunction[MATCH_VARIANT] && { args, wrap, format }
+              )
+            )
 
             if (typeof result === 'string' && !isValidVariantFormatString(result)) {
               throw new Error(
@@ -462,7 +469,31 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
         context.candidateRuleMap.get(prefixedIdentifier).push(withOffsets)
       }
     },
+    matchVariant: function (variants, options) {
+      for (let variant in variants) {
+        api.addVariant(
+          variant,
+          Object.assign(
+            ({ args, wrap }) => {
+              let formatString = variants[variant](args)
+              if (!formatString) return null
+
+              if (!formatString.startsWith('@')) {
+                return formatString
+              }
+
+              let [, name, params] = /@(.*?)( .+|[({].*)/g.exec(formatString)
+              return wrap(postcss.atRule({ name, params: params.trim() }))
+            },
+            { [MATCH_VARIANT]: true }
+          ),
+          options
+        )
+      }
+    },
   }
+
+  return api
 }
 
 let fileModifiedMapCache = new WeakMap()