calc() not normalizing

[wongjn]

What version of Tailwind CSS are you using?

v3.3.3

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

PostCSS 8.4.27
PostCSS Loader 6.2.1
Webpack 5.88.2

Also reproduced in Tailwind Play (see below)

What version of Node.js are you using?

16.13.0

What browser are you using?

Chrome

What operating system are you using?

Windows

Reproduction URL

https://play.tailwindcss.com/7lVcDok0HN

Describe your issue

Unfortunately, I come bearing a case where calc() value is not properly normalized in an arbitrary value:

[--foo:calc((704-320)/(1400-782))]

Which I then extrapolated to more cases to try to narrow down a pattern:

❌ w-[calc((7-32)/(1400-782))]
✅ [--foo:calc((7-3)/(1400-782))]
❌ [--foo:calc((7-32)/(1400-782))]
✅ [--foo:calc((70-3)/(1400-782))]
❌ [--foo:calc((70-32)/(1400-782))]
✅ [--foo:calc((704-3)/(1400-782))]
✅ [--foo:calc((704-320))]
❌ [--foo:calc((704-320)/1)]
❌ [--foo:calc((704-320)/(1400-782))]

For the classes marked with a cross (❌), there is no space around the subtraction operator (-) in the first set of parentheses in the generated CSS rule value, causing the calc() value to be invalid.

[anasbehhari]

same here !
v3.3.3

h-[calc(100%-70px)] | h-[calc(10vh-70px)]

[RobinMalfait]

@anasbehhari that seems like an unrelated issue, both cases seem to work: https://play.tailwindcss.com/Q5BkOgRte1
If they don't work for you, could you open a separate issue with a minimal reproduction repo / Tailwind Play attached so that we can take a look?

[RobinMalfait]

Hey, thank you for this bug report! 🙏

This should be fixed by #11686, and will be available in the next release.

You can already try it by using the insiders build npm install tailwindcss@insiders.