Fix incorrect spaces around - in calc() expression (#12283)

* sync package-lock.json

* prevent formatting inside `env()` when formatting `calc` function

* prevent formatting keywords in `calc`

* add dedicated normalization tests

* `calc()` in `env()` should be formatted

* update changelog

Author: RobinMalfait

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix source maps issue resulting in a crash ([#11319](https://github.com/tailwindlabs/tailwindcss/pull/11319))
 - Fallback to RegEx based parser when using custom transformers or extractors ([#11335](https://github.com/tailwindlabs/tailwindcss/pull/11335))
 - Bump `lightningcss` and reflect related improvements in tests ([#11550](https://github.com/tailwindlabs/tailwindcss/pull/11550))
+- Fix incorrect spaces around `-` in `calc()` expression ([#12283](https://github.com/tailwindlabs/tailwindcss/pull/12283))
 
 ### Added
 

package-lock.json

@@ -85,6 +85,29 @@ export function normalize(value, context = null, isRoot = true) {
  */
 function normalizeMathOperatorSpacing(value) {
   let preventFormattingInFunctions = ['theme']
+  let preventFormattingKeywords = [
+    'min-content',
+    'max-content',
+    'fit-content',
+
+    // Env
+    'safe-area-inset-top',
+    'safe-area-inset-right',
+    'safe-area-inset-bottom',
+    'safe-area-inset-left',
+
+    'titlebar-area-x',
+    'titlebar-area-y',
+    'titlebar-area-width',
+    'titlebar-area-height',
+
+    'keyboard-inset-top',
+    'keyboard-inset-right',
+    'keyboard-inset-bottom',
+    'keyboard-inset-left',
+    'keyboard-inset-width',
+    'keyboard-inset-height',
+  ]
 
   return value.replace(/(calc|min|max|clamp)\(.+\)/g, (match) => {
     let result = ''
@@ -127,6 +150,13 @@ function normalizeMathOperatorSpacing(value) {
         result += consumeUntil([')', ','])
       }
 
+      // Skip formatting of known keywords
+      else if (preventFormattingKeywords.some((keyword) => peek(keyword))) {
+        let keyword = preventFormattingKeywords.find((keyword) => peek(keyword))
+        result += keyword
+        i += keyword.length - 1
+      }
+
       // Skip formatting inside known functions
       else if (preventFormattingInFunctions.some((fn) => peek(fn))) {
         result += consumeUntil([')'])

src/util/dataTypes.js

@@ -638,3 +638,31 @@ it('should support underscores in arbitrary modifiers', () => {
     `)
   })
 })
+
+it('should not insert spaces around operators inside `env()`', () => {
+  let config = {
+    content: [{ raw: html`<div class="grid-cols-[calc(env(safe-area-inset-bottom)+1px)]"></div>` }],
+  }
+
+  return run('@tailwind utilities', config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      .grid-cols-\[calc\(env\(safe-area-inset-bottom\)\+1px\)\] {
+        grid-template-columns: calc(env(safe-area-inset-bottom) + 1px);
+      }
+    `)
+  })
+})
+
+it('should not insert spaces around `-` in arbitrary values that use `max-content`', () => {
+  let config = {
+    content: [{ raw: html`<div class="grid-cols-[repeat(3,_minmax(0,_max-content))]"></div>` }],
+  }
+
+  return run('@tailwind utilities', config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      .grid-cols-\[repeat\(3\,_minmax\(0\,_max-content\)\)\] {
+        grid-template-columns: repeat(3, minmax(0, max-content));
+      }
+    `)
+  })
+})

tests/arbitrary-values.test.js

@@ -68,6 +68,21 @@ let table = [
   ['calc(theme(spacing.foo-2))', 'calc(theme(spacing.foo-2))'],
   ['calc(theme(spacing.foo-bar))', 'calc(theme(spacing.foo-bar))'],
 
+  // Prevent formatting inside `var()` functions
+  ['calc(var(--foo-bar-bar)*2)', 'calc(var(--foo-bar-bar) * 2)'],
+
+  // Prevent formatting inside `env()` functions
+  ['calc(env(safe-area-inset-bottom)*2)', 'calc(env(safe-area-inset-bottom) * 2)'],
+  // Should format inside `calc()` nested in `env()`
+  ['env(safe-area-inset-bottom,calc(10px+20px))', 'env(safe-area-inset-bottom,calc(10px + 20px))'],
+  [
+    'calc(env(safe-area-inset-bottom,calc(10px+20px))+5px)',
+    'calc(env(safe-area-inset-bottom,calc(10px + 20px)) + 5px)',
+  ],
+
+  // Prevent formatting keywords
+  ['minmax(min-content,25%)', 'minmax(min-content,25%)'],
+
   // Misc
   ['color(0_0_0/1.0)', 'color(0 0 0/1.0)'],
   ['color(0_0_0_/_1.0)', 'color(0 0 0 / 1.0)'],