Using external string variables inside calc() break the operation on built version

[thomasryu]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
Using a variable inside a calc() operator removes the whitespaces, causing + and - operations to break.

If the current behavior is a bug, please provide the steps to reproduce and possibly a minimal demo or testcase in the form of a Next.js app, CodeSandbox URL or similar

styles.ts:

const contentSize = '1140px'

export default css`
  .container {
    padding: 0 calc((100vw - ${contentSize}) / 2);
  }
`  

What is the expected behavior?
The component should style properly, with a lateral padding.
But what happens is, the built CSS removes the whitespaces around the - and break the calc() .

Environment (include versions)
Version of styled-jsx (or next.js if it's being used): next.js 12.0.9
Browser: Google Chrome Version 95.0.4638.69 (Official Build) (64-bit)
OS: Ubuntu 20.04.2 LTS (fossa-kakuna X63)