Production Build Stripping Important Parentheses from CSS

Describe the bug

Some parentheses in CSS is being incorrectly stripped out, changes meaning completely due to incorrect order of operations

Did you try recovering your dependencies?

yes

Which terms did you search for in User Guide?

parentheses, strip, css

Environment

System: OS: Linux 5.4 Arch Linux CPU: (8) x64 Intel® Core™ i7-7700K CPU @ 4.20GHz Binaries: Node: 13.6.0 - /usr/bin/node Yarn: 1.21.1 - /usr/bin/yarn npm: 6.13.6 - /usr/bin/npm Browsers: Chrome: Not Found Firefox: 72.0.1 npmPackages: react: Not Found react-dom: Not Found react-scripts: Not Found npmGlobalPackages: create-react-app: Not Found

Steps to reproduce

(Write your steps here:)

1. import the following css:

  body .chat-wrapper {
    padding: 0 calc(((100vw - 1140px) / 2) - (1.5rem + 24px));
  }

1. run build

Expected behavior

the parentheses are kept because they are semantically different than without them

Actual behavior

the css is compiled to: body .chat-wrapper{max-width:100vw;padding:0 calc((100vw - 1140px)/2 - 1.5rem + 24px)} (missing required parentheses around 1.5rem + 24px)

Reproducible demo

https://github.com/SampsonCrowley/css-bug-demo

[rflmyk]

It’s happen on develop env as well, take a look:

On source:

    flex: 0 0 calc(var(--grid-column) * 2);
    max-width: 16.66667%;
    max-width: calc(var(--grid-column) * 2);

After compile:

    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc(var(--grid-column);
    max-width: 16.66667%;
    max-width: calc(var(--grid-column) * 2)

Someone have idea how fix it?

[stale[bot]]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.