Building breaks css with calc and var and double brackets

[VulumeCode]

1. create a new app
2. edit App.css
   add this to the rule for .App-header

  --margin: 1.5em;
  margin: calc((var(--margin)/2));

notice the redundant braces in calc.

3. run the project in dev mode, it has a margin as expected.
4. build the project and serve it, there is no margin to be seen.
5. look at the generated main.xxxx.css, calc is gone! margin:(var(--margin)/2) is a broken rule!

Some research:

• Without redundant braces, it works.
• I tried it in https://cssnano.co/playground/ and it doesn't break the rule, neither does https://preset-env.cssdb.org/playground/

[1vinith]

### Problem:
When using calc and var in your CSS rule for .App-header, the calc expression seems to break after building the project.
The issue specifically arises when you have redundant braces within the calc expression.

Possible Solutions:

Check the Build Process:
Ensure that your build process isn't stripping out or modifying the CSS properties during minification or optimization. Sometimes, build tools can unintentionally alter CSS syntax.
Test in Different Environments:
Since you mentioned that the code works fine in online playgrounds, try to isolate whether the issue lies within your local development environment or the build process itself. This might involve testing the code in different environments or configurations.
Review CSS Post-Processing:
If you're using any CSS post-processing tools like Autoprefixer or CSS Nano, they might be affecting the way your CSS rules are processed and outputted. Check the configuration and ensure that it's not causing unintended side effects.
Minification Settings:
Check the settings for CSS minification during the build process. Some minifiers might have specific rules or limitations regarding calc expressions, especially when they involve variables....

[VulumeCode]

I don't understand the need for this comment. My problem is solved, I'm reporting a bug in the CRA defaults.