[JIT] Support CSS Variables in arbitrary calc (#4147)

Author: sibbng

jit/pluginUtils.js

@@ -112,7 +112,10 @@ function asValue(modifier, lookup = {}, { validate = () => true, transform = (v)
   }
 
   // add spaces around operators inside calc() that do not follow an operator or (
-  return transform(value).replace(/(?<=^calc\(.+?)(?<![-+*/(])([-+*/])/g, ' $1 ')
+  return transform(value).replace(
+    /(-?\d*\.?\d(?!\b-.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([+\-/*])/g,
+    '$1 $2 '
+  )
 }
 
 function asUnit(modifier, units, lookup = {}) {

jit/tests/arbitrary-values.test.css

@@ -49,9 +49,18 @@
 .w-\[calc\(100\%\+1rem\)\] {
   width: calc(100% + 1rem);
 }
+.w-\[calc\(var\(--10-10px\2c calc\(-20px-\(-30px--40px\)\)\)-50px\)\] {
+  width: calc(var(--10-10px, calc(-20px - (-30px - -40px))) - 50px);
+}
 .w-\[var\(--width\)\] {
   width: var(--width);
 }
+.w-\[var\(--width\2c calc\(100\%\+1rem\)\)\] {
+  width: var(--width, calc(100% + 1rem));
+}
+.w-\[calc\(100\%\/3-1rem\*2\)\] {
+  width: calc(100% / 3 - 1rem * 2);
+}
 .min-w-\[3\.23rem\] {
   min-width: 3.23rem;
 }

jit/tests/arbitrary-values.test.html

@@ -16,7 +16,10 @@
     <div class="border-[2.5px]"></div>
     <div class="w-[3.23rem]"></div>
     <div class="w-[calc(100%+1rem)]"></div>
+    <div class="w-[calc(var(--10-10px,calc(-20px-(-30px--40px)))-50px)]"></div>
     <div class="w-[var(--width)]"></div>
+    <div class="w-[var(--width,calc(100%+1rem))]"></div>
+    <div class="w-[calc(100%/3-1rem*2)]"></div>
     <div class="min-w-[3.23rem]"></div>
     <div class="min-w-[calc(100%+1rem)]"></div>
     <div class="min-w-[var(--width)]"></div>