Support forcing coercion type with arbitrary value syntax

src/jit/lib/generateRules.js

@@ -192,9 +192,13 @@ function* resolveMatchedPlugins(classCandidate, context) {
   }
 }
 
+function splitWithSeparator(input, separator) {
+  return input.split(new RegExp(`\\${separator}(?![^[]*\\])`, 'g'))
+}
+
 function* resolveMatches(candidate, context) {
   let separator = context.tailwindConfig.separator
-  let [classCandidate, ...variants] = candidate.split(separator).reverse()
+  let [classCandidate, ...variants] = splitWithSeparator(candidate, separator).reverse()
   let important = false
 
   if (classCandidate.startsWith('!')) {

src/jit/lib/setupContext.js

@@ -534,9 +534,9 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
 
         function wrapped(modifier) {
           let { type = 'any' } = options
-          let value = coerceValue(type, modifier, options.values)
+          let [value, coercedType] = coerceValue(type, modifier, options.values)
 
-          if (value === undefined) {
+          if (type !== coercedType || value === undefined) {
             return []
           }
 

src/util/pluginUtils.js

@@ -205,5 +205,14 @@ let typeMap = {
 }
 
 export function coerceValue(type, modifier, values) {
-  return typeMap[type](modifier, values)
+  if (modifier.startsWith('[') && modifier.endsWith(']')) {
+    let innerModifier = modifier.slice(1, -1)
+    let parts = innerModifier.split(':')
+
+    if (parts.length > 1 && Object.keys(typeMap).includes(parts[0])) {
+      return [asValue(`[${parts.slice(1).join(':')}]`, values), parts[0]]
+    }
+  }
+
+  return [typeMap[type](modifier, values), type]
 }

tests/jit/arbitrary-values.test.css

@@ -269,6 +269,9 @@
 .text-\[2\.23rem\] {
   font-size: 2.23rem;
 }
+.text-\[length\:var\(--font-size\)\] {
+  font-size: var(--font-size);
+}
 .leading-\[var\(--leading\)\] {
   line-height: var(--leading);
 }

tests/jit/arbitrary-values.test.html

@@ -54,6 +54,7 @@
     <div class="skew-x-[3px]"></div>
     <div class="skew-y-[3px]"></div>
     <div class="text-[2.23rem]"></div>
+    <div class="text-[length:var(--font-size)]"></div>
     <div class="duration-[2s]"></div>
     <div class="m-[7px]"></div>
     <div class="mx-[7px]"></div>