From b80b5bb1a37c442a92667b7f17c5991cd6d08ef5 Mon Sep 17 00:00:00 2001
From: Nurettin Kaya <sibbngheid@gmail.com>
Date: Fri, 30 Apr 2021 06:00:36 -0700
Subject: [PATCH] [JIT] Support CSS Variables in arbitrary calc (#4147)

---
 jit/pluginUtils.js                   | 5 ++++-
 jit/tests/arbitrary-values.test.css  | 9 +++++++++
 jit/tests/arbitrary-values.test.html | 3 +++
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/jit/pluginUtils.js b/jit/pluginUtils.js
index e3089c26a9a1..5cf4c5d36c19 100644
--- a/jit/pluginUtils.js
+++ b/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 = {}) {
diff --git a/jit/tests/arbitrary-values.test.css b/jit/tests/arbitrary-values.test.css
index 511985d276b2..5301191a0c95 100644
--- a/jit/tests/arbitrary-values.test.css
+++ b/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;
 }
diff --git a/jit/tests/arbitrary-values.test.html b/jit/tests/arbitrary-values.test.html
index 6a93e80c974a..76d6a51cced2 100644
--- a/jit/tests/arbitrary-values.test.html
+++ b/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>