René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"Using more complex calculations in CSS calc expressions will be incorrect in production builds","articleBody":"# 🐞 bug report\r\n\r\n### Affected Package\r\n    \"@angular-devkit/build-angular\": \"~0.901.7\",\r\n    \"@angular/cli\": \"~9.1.7\",\r\n    \"@angular/compiler-cli\": \"~9.1.9\",\r\n\r\n\r\n### Is this a regression?\r\nI don't think so...\r\n\r\n### Description\r\nWhen using more complex calculations in CSS `calc` expressions, production builds will be incorrect. Have look at the sample repo:\r\n\r\nI have added the following to `styles.css`:\r\n\r\n```css\r\n:root {\r\n    --width-a: 10em;\r\n}\r\n.box {\r\n    background-color: #ccc;\r\n    width: calc(var(--width-a)/2 + var(--width-a)/2);\r\n    height: calc(var(--width-a)/2 + var(--width-a)/2);\r\n}\r\n```\r\nwhich gets compiled to the following in production builds (`ng build --prod`):\r\n\r\n```css\r\n.box {\r\n    background-color: #ccc;\r\n    width: calc(var(--width-a) + var(--width-a));\r\n    height: calc(var(--width-a) + var(--width-a));\r\n}\r\n```\r\n\r\nI think the problem comes from: https://github.com/postcss/postcss-calc/issues/107. But not sure if this plugin is used under the hood.\r\nUnfortunately we cannot disable specific PostCSS plugins: https://github.com/angular/angular-cli/issues/8427\r\n\r\n\r\n\r\n## 🔬 Minimal Reproduction\r\nSee: https://github.com/loxy/angular-cs-calc-bug\r\n\r\n\r\n## 🌍  Your Environment\r\n\r\n**Angular Version:**\r\n\u003cpre\u003e\u003ccode\u003e\r\nAngular CLI: 9.1.7\r\nNode: 12.12.0\r\nOS: win32 x64\r\n\r\nAngular: 9.1.9\r\n... animations, common, compiler, compiler-cli, core, forms\r\n... platform-browser, platform-browser-dynamic, router\r\nIvy Workspace: Yes\r\n\r\nPackage                           Version\r\n-----------------------------------------------------------\r\n@angular-devkit/architect         0.901.7\r\n@angular-devkit/build-angular     0.901.7\r\n@angular-devkit/build-optimizer   0.901.7\r\n@angular-devkit/build-webpack     0.901.7\r\n@angular-devkit/core              9.1.7\r\n@angular-devkit/schematics        9.1.7\r\n@angular/cli                      9.1.7\r\n@ngtools/webpack                  9.1.7\r\n@schematics/angular               9.1.7\r\n@schematics/update                0.901.7\r\nrxjs                              6.5.5\r\ntypescript                        3.8.3\r\nwebpack                           4.42.0\r\n\u003c/code\u003e\u003c/pre\u003e\r\n\r\n**Anything else relevant?**\r\nNo\r\n","author":{"url":"https://github.com/loxy","@type":"Person","name":"loxy"},"datePublished":"2020-06-09T09:35:57.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1},"url":"https://github.com/17890/angular-cli/issues/17890"}