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 <jordan@cryptica.me>

Author: sibbng

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
 

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

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;
 }

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>