Subtraction in calc() arbitrary values not always normalized properly

[wongjn]

What version of Tailwind CSS are you using?

v3.2.4

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

Tailwind Play, Webpack v5

What version of Node.js are you using?

v16.13.0

What browser are you using?

Chrome

What operating system are you using?

Ubuntu 18.04 via WSL

Reproduction URL

https://play.tailwindcss.com/KnpyuskR45

Describe your issue

A value like calc(1-(var(--something)*0.5)) or calc(1-var(--something)*0.5) in an arbitrary variant is not normalized properly, with spaces missing around the subtraction operator:

.mt-\[calc\(1-var\(--something\)\*0\.5\)\] {
  margin-top: calc(1-var(--something) * 0.5);
  /* expected margin-top: calc(1 - var(--something) * 0.5); */
}

I would have expected this function consistently akin to the other mathematical operators which seem to be fine:

.mt-\[calc\(1\+\(var\(--something\)\*0\.5\)\)\] {
  margin-top: calc(1 + (var(--something) * 0.5));
}

[B54Carey2]

The only place you can use the calc() function is in values. See these examples where we’re setting the value for a number of different properties.

.el {
font-size: calc(3vw + 2px);
width: calc(100% - 20px);
height: calc(100vh - 20px);
padding: calc(1vw + 5px);
}

[thecrypticace]

I merged in the fix for this in #10074 (thanks @sibbng!). It'll be available in our next release but you can test it in the mean time via our insiders build: npm install tailwindcss@insiders