diff --git a/CHANGELOG.md b/CHANGELOG.md index 6ae90ce6d6ee..631d40443600 100644 --- 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 index 1d888e211ba3..9936935a59fe 100644 --- 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 index 6968de7258c5..dead24b1c190 100644 --- 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 index 083c76def893..4d8be18cdca2 100644 --- a/tests/arbitrary-values.test.html +++ b/tests/arbitrary-values.test.html @@ -67,6 +67,9 @@
+
+
+