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

* Support forcing coercion type with arbitrary value syntax * Refactor + more tests
tailwindlabs · May 7, 2021 · e764df5 · e764df5
1 parent 4a374eb
commit e764df5
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 4 deletions.
diff --git a/src/jit/lib/generateRules.js b/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('!')) {

diff --git a/src/jit/lib/setupContext.js b/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 []
           }
 

diff --git a/src/util/pluginUtils.js b/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]
 }
diff --git a/tests/jit/arbitrary-values.test.css b/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);
 }

diff --git a/tests/jit/arbitrary-values.test.html b/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>