Using more complex calculations in CSS calc expressions will be incorrect in production builds #17890
Description
🐞 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