Incorrect parsing of theme functions within calc operations without spaces

[thibaudcolas]

What version of Tailwind CSS are you using?

v3.3.1

What build tool (or framework if it abstracts the build tool) are you using?

play.tailwindcss.com or Webpack

What version of Node.js are you using?

N/A

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/sQrIVhIaM7?file=css

Describe your issue

Usage of the theme function isn’t getting replaced by the corresponding value when the function is in a calc expression without spaces. For example:

.test {
  /* Input: */
  inset: calc(-1 * (2*theme("spacing.4")));
  /* Expected: */
  inset: calc(-1 * (2*1rem));
  /* Actual: */
  inset: calc(-1 * (2*theme("spacing.4")));
}

---

I believe this might be the same issue as TrySound/postcss-value-parser#86, but thought I’d report it here as I’m not 100% sure and it definitely affects Tailwind.

This happened for us because we use Sass alongside Tailwind, via Webpack. sass-loader apparently outputs Sass differently in Webpack production and development mode (webpack-contrib/sass-loader#1129), with spaces removed in production.

[thecrypticace]

Hey! I've merged the fix for this in #11157 and it'll be available in the next tagged release. And good find on the postcss-value-parser issue! We ended up inlining it into Tailwind itself and then fixing the parser to resolve this problem. Appreciate it! ✨