Skip calc() normalisation in nested theme() calls (#11705)

* add `calc` normalisation test cases using `theme()`

* ignore formatting in some known functions, such as `theme`

* update changelog

Author: RobinMalfait

CHANGELOG.md

@@ -24,6 +24,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Make PostCSS plugin async to improve performance ([#11548](https://github.com/tailwindlabs/tailwindcss/pull/11548))
 - Allow variant to be an at-rule without a prelude ([#11589](https://github.com/tailwindlabs/tailwindcss/pull/11589))
 - Improve normalisation of `calc()`-like functions ([#11686](https://github.com/tailwindlabs/tailwindcss/pull/11686))
+- Skip `calc()` normalisation in nested `theme()` calls ([#11705](https://github.com/tailwindlabs/tailwindcss/pull/11705))
 
 ### Added
 

src/util/dataTypes.js

@@ -59,6 +59,8 @@ export function normalize(value, isRoot = true) {
  * @returns {string}
  */
 function normalizeMathOperatorSpacing(value) {
+  let preventFormattingInFunctions = ['theme']
+
   return value.replace(/(calc|min|max|clamp)\(.+\)/g, (match) => {
     let result = ''
 
@@ -100,6 +102,11 @@ function normalizeMathOperatorSpacing(value) {
         result += consumeUntil([')', ','])
       }
 
+      // Skip formatting inside known functions
+      else if (preventFormattingInFunctions.some((fn) => peek(fn))) {
+        result += consumeUntil([')'])
+      }
+
       // Handle operators
       else if (
         ['+', '-', '*', '/'].includes(char) &&

tests/normalize-data-types.test.js

@@ -60,6 +60,12 @@ let table = [
     'calc(var(--10-10px,calc(-20px-(-30px--40px)-50px)',
     'calc(var(--10-10px,calc(-20px - (-30px - -40px) - 50px)',
   ],
+  ['calc(theme(spacing.1-bar))', 'calc(theme(spacing.1-bar))'],
+  ['theme(spacing.1-bar)', 'theme(spacing.1-bar)'],
+  ['calc(theme(spacing.1-bar))', 'calc(theme(spacing.1-bar))'],
+  ['calc(1rem-theme(spacing.1-bar))', 'calc(1rem - theme(spacing.1-bar))'],
+  ['calc(theme(spacing.foo-2))', 'calc(theme(spacing.foo-2))'],
+  ['calc(theme(spacing.foo-bar))', 'calc(theme(spacing.foo-bar))'],
 
   // Misc
   ['color(0_0_0/1.0)', 'color(0 0 0/1.0)'],