Using more complex calculations in CSS calc expressions will be incorrect in production builds

[loxy]

🐞 bug report

Affected Package

"@angular-devkit/build-angular": "~0.901.7",
"@angular/cli": "~9.1.7",
"@angular/compiler-cli": "~9.1.9",

Is this a regression?

I don't think so...

Description

When using more complex calculations in CSS calc expressions, production builds will be incorrect. Have look at the sample repo:

I have added the following to styles.css:

:root {
    --width-a: 10em;
}
.box {
    background-color: #ccc;
    width: calc(var(--width-a)/2 + var(--width-a)/2);
    height: calc(var(--width-a)/2 + var(--width-a)/2);
}

which gets compiled to the following in production builds (ng build --prod):

.box {
    background-color: #ccc;
    width: calc(var(--width-a) + var(--width-a));
    height: calc(var(--width-a) + var(--width-a));
}

I think the problem comes from: postcss/postcss-calc#107. But not sure if this plugin is used under the hood.
Unfortunately we cannot disable specific PostCSS plugins: #8427

🔬 Minimal Reproduction

See: https://github.com/loxy/angular-cs-calc-bug

🌍 Your Environment

Angular Version:

Angular CLI: 9.1.7
Node: 12.12.0
OS: win32 x64

Angular: 9.1.9
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.7
@angular-devkit/build-angular     0.901.7
@angular-devkit/build-optimizer   0.901.7
@angular-devkit/build-webpack     0.901.7
@angular-devkit/core              9.1.7
@angular-devkit/schematics        9.1.7
@angular/cli                      9.1.7
@ngtools/webpack                  9.1.7
@schematics/angular               9.1.7
@schematics/update                0.901.7
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.42.0

Anything else relevant?
No