search

vercel / styled-jsx

Full CSS support for JSX without compromises
http://npmjs.com/styled-jsx
MIT License
7.65k stars 266 forks source link

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

Open thomasryu opened 1 year ago

thomasryu commented 1 year ago

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)