Properly handle subtraction followed by a variable in arbitrary values (

#10074) * fix normalizing subtraction followed by a variable * Add test * Update changelog Co-authored-by: Jordan Pittman <[email protected]>
tailwindlabs · Dec 14, 2022 · ce7ac96 · ce7ac96
1 parent 25d17db
commit ce7ac96
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -26,6 +26,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Deterministic sorting of arbitrary variants ([#10016](https://github.com/tailwindlabs/tailwindcss/pull/10016))
 - Add `data` key to theme types ([#10023](https://github.com/tailwindlabs/tailwindcss/pull/10023))
 - Prevent invalid arbitrary variant selectors from failing the build ([#10059](https://github.com/tailwindlabs/tailwindcss/pull/10059))
+- Properly handle subtraction followed by a variable ([#10074](https://github.com/tailwindlabs/tailwindcss/pull/10074))
 
 ### Changed
 

diff --git a/src/util/dataTypes.js b/src/util/dataTypes.js
@@ -10,6 +10,9 @@ function isCSSFunction(value) {
   return cssFunctions.some((fn) => new RegExp(`^${fn}\\(.*\\)`).test(value))
 }
 
+const placeholder = '--tw-placeholder'
+const placeholderRe = new RegExp(placeholder, 'g')
+
 // This is not a data type, but rather a function that can normalize the
 // correct values.
 export function normalize(value, isRoot = true) {
@@ -49,10 +52,14 @@ export function normalize(value, isRoot = true) {
   // Add spaces around operators inside math functions like calc() that do not follow an operator
   // or '('.
   value = value.replace(/(calc|min|max|clamp)\(.+\)/g, (match) => {
-    return match.replace(
-      /(-?\d*\.?\d(?!\b-.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([+\-/*])/g,
-      '$1 $2 '
-    )
+    let vars = []
+    return match
+      .replace(/var\((--.+?)[,)]/g, (match, g1) => {
+        vars.push(g1)
+        return match.replace(g1, placeholder)
+      })
+      .replace(/(-?\d*\.?\d(?!\b-\d.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([+\-/*])/g, '$1 $2 ')
+      .replace(placeholderRe, () => vars.shift())
   })
 
   return value

diff --git a/tests/arbitrary-values.test.css b/tests/arbitrary-values.test.css
@@ -191,6 +191,15 @@
 .w-\[\'\}\{\}\'\] {
   width: '}{}';
 }
+.min-w-\[calc\(1-var\(--something\)\*0\.5\)\] {
+  min-width: calc(1 - var(--something) * 0.5);
+}
+.min-w-\[calc\(1-\(var\(--something\)\*0\.5\)\)\] {
+  min-width: calc(1 - (var(--something) * 0.5));
+}
+.min-w-\[calc\(1-\(\(12-3\)\*0\.5\)\)\] {
+  min-width: calc(1 - ((12 - 3) * 0.5));
+}
 .min-w-\[3\.23rem\] {
   min-width: 3.23rem;
 }

diff --git a/tests/arbitrary-values.test.html b/tests/arbitrary-values.test.html
@@ -67,6 +67,9 @@
     <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-[calc(1-var(--something)*0.5)]"></div>
+    <div class="min-w-[calc(1-(var(--something)*0.5))]"></div>
+    <div class="min-w-[calc(1-((12-3)*0.5))]"></div>
 
     <div class="min-w-[3.23rem]"></div>
     <div class="min-w-[calc(100%+1rem)]"></div>