Support forcing coercion type with arbitrary value syntax (tailwindlabs#4263)

* Support forcing coercion type with arbitrary value syntax

* Refactor + more tests

Author: adamwathan

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

@@ -204,6 +204,18 @@ let typeMap = {
   lookup: asLookupValue,
 }
 
+function splitAtFirst(input, delim) {
+  return (([first, ...rest]) => [first, rest.join(delim)])(input.split(delim))
+}
+
 export function coerceValue(type, modifier, values) {
-  return typeMap[type](modifier, values)
+  if (modifier.startsWith('[') && modifier.endsWith(']')) {
+    let [explicitType, value] = splitAtFirst(modifier.slice(1, -1), ':')
+
+    if (value.length > 0 && Object.keys(typeMap).includes(explicitType)) {
+      return [asValue(`[${value}]`, values), explicitType]
+    }
+  }
+
+  return [typeMap[type](modifier, values), type]
 }

tests/jit/arbitrary-values.test.css

@@ -269,12 +269,18 @@
 .text-\[2\.23rem\] {
   font-size: 2.23rem;
 }
+.text-\[length\:var\(--font-size\)\] {
+  font-size: var(--font-size);
+}
 .leading-\[var\(--leading\)\] {
   line-height: var(--leading);
 }
 .tracking-\[var\(--tracking\)\] {
   letter-spacing: var(--tracking);
 }
+.text-\[color\:var\(--color\)\] {
+  color: var(--color);
+}
 .placeholder-\[var\(--placeholder\)\]::placeholder {
   color: var(--placeholder);
 }

tests/jit/arbitrary-values.test.html

@@ -54,6 +54,9 @@
     <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="text-[color:var(--color)]"></div>
+    <div class="text-[angle:var(--angle)]"></div>
     <div class="duration-[2s]"></div>
     <div class="m-[7px]"></div>
     <div class="mx-[7px]"></div>