Fix missing spaces around arithmetic operators (#8615)

* add tests for spaced around operators in CSS math functions

* fix CSS math functons besides calc not getting the love they deserve

* improve comment

* update changelog

* update changelog

Co-authored-by: Robin Malfait <malfait.robin@gmail.com>

Author: dcastil

CHANGELOG.md

@@ -7,9 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+
 - Fix extraction of multi-word utilities with arbitrary values and quotes ([#8604](https://github.com/tailwindlabs/tailwindcss/pull/8604))
 - Fix casing of import of `corePluginList` type definition ([#8587](https://github.com/tailwindlabs/tailwindcss/pull/8587))
 - Ignore PostCSS nodes returned by `addVariant` ([#8608](https://github.com/tailwindlabs/tailwindcss/pull/8608))
+- Fix missing spaces around arithmetic operators ([#8615](https://github.com/tailwindlabs/tailwindcss/pull/8615))
 
 ## [3.1.2] - 2022-06-10
 

src/util/dataTypes.js

@@ -40,9 +40,9 @@ export function normalize(value, isRoot = true) {
     value = value.trim()
   }
 
-  // Add spaces around operators inside calc() that do not follow an operator
+  // Add spaces around operators inside math functions like calc() that do not follow an operator
   // or '('.
-  value = value.replace(/calc\(.+\)/g, (match) => {
+  value = value.replace(/(calc|min|max|clamp)\(.+\)/g, (match) => {
     return match.replace(
       /(-?\d*\.?\d(?!\b-.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([+\-/*])/g,
       '$1 $2 '

tests/normalize-data-types.test.js

@@ -20,7 +20,7 @@ let table = [
   ['var(--foo)', 'var(--foo)'],
   ['var(--headings-h1-size)', 'var(--headings-h1-size)'],
 
-  // calc(…) get's spaces around operators
+  // math functions like calc(…) get spaces around operators
   ['calc(1+2)', 'calc(1 + 2)'],
   ['calc(100%+1rem)', 'calc(100% + 1rem)'],
   ['calc(1+calc(100%-20px))', 'calc(1 + calc(100% - 20px))'],
@@ -29,6 +29,9 @@ let table = [
     'calc(var(--headings-h1-size)*calc(100%+50%))',
     'calc(var(--headings-h1-size) * calc(100% + 50%))',
   ],
+  ['min(1+2)', 'min(1 + 2)'],
+  ['max(1+2)', 'max(1 + 2)'],
+  ['clamp(1+2,1+3,1+4)', 'clamp(1 + 2,1 + 3,1 + 4)'],
   ['var(--heading-h1-font-size)', 'var(--heading-h1-font-size)'],
   ['var(--my-var-with-more-than-3-words)', 'var(--my-var-with-more-than-3-words)'],
   ['var(--width, calc(100%+1rem))', 'var(--width, calc(100% + 1rem))'],