Angular-cli: ng build --prod removes 'var' variables from css file

[harshkoralwala]

Hello,
I have an Angular project.

My css looks like :

:root{ --table-row:#f3f3f3; --table-shadow:#9EA1A2; --execution-log-background:#000; --tooltip-arrow:#24272A; --invalid-ele-border:#ff6170; } .invalidElement input.ng-invalid, .invalidElement textarea.ng-invalid{ border: 1px solid var(--invalid-ele-border) !important; border-radius: 3px !important; }

When I run command for production version:_ng build --prod=true --deleteOutputPath=true --optimization=true --progress=true --showCircularDependencies=true_

it results as (from dist folder):

:root{--white:#fff;--theme-red:#bc0134;--bright-green:#73d94b;--bg-light-gray:#eeeeee;--bg-med-gray:#dddddd;--bg-dark-gray:#cecece;--bg-green:#d5f3c9;--bg-light-red:#ffe2ea;--bg-switch:#cccccc;--menu-divider:#a8a8a8;--text-dark-gray:#4c4c4c;--text-med-gray:#777777;--text-light-gray:#999999;--text-icon-green:#47ad33;--btn-icon-gray:#bbbbbb;--border-gray:#ddd;--border-dark-gray:#999;--border-light-red:#d5aab6;--shadow-light-red:#d5aab640;--disabled-bg:#eee;--disabled-text:#666666;--disabled-btn-text:#c3c3c3;--transparent:rgba(0,0,0,0);--trans-black:rgba(0,0,0,0.1);--focus-border-red:#d8bdc4;--focus-shadow:red;--focus-input-border:#999999;--trans-white:#ffffffad;--bg-tooltip:#444;--bg-used:#c0dedd;--table-row:#f3f3f3;--table-shadow:#9EA1A2;--execution-log-background:#000;--tooltip-arrow:#24272A;--invalid-ele-border:#ff6170}.invalidElement input.ng-invalid,.invalidElement textarea.ng-invalid{border:1px solid!important;border-radius:3px!important}

Here u can see in result var(--invalid-ele-border) is missing property form css.

So why this is happening, In a development environment, it works perfectly fine.

Note: extractCss parameter can solve my problem, but it increases files in the dist folder. So I don't want to go with it.

Please help..

Thank You

My Package.json looks like:

{
"name": "css-test",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~8.2.3",
"@angular/common": "~8.2.3",
"@angular/compiler": "~8.2.3",
"@angular/core": "~8.2.3",
"@angular/forms": "~8.2.3",
"@angular/platform-browser": "~8.2.3",
"@angular/platform-browser-dynamic": "~8.2.3",
"@angular/router": "~8.2.3",
"rxjs": "~6.4.0",
"tslib": "^1.10.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.803.0",
"@angular/cli": "~8.3.0",
"@angular/compiler-cli": "~8.2.3",
"@angular/language-service": "~8.2.3",
"@types/node": "~8.9.4",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.5.3"
}
}

[alan-agius4]

Hi @harshkoralwala, this should be fixed in version 9.

To update please following the instructions here: https://update.angular.io/#8.0:9.0

As a workaround until updating you can also disable optimization for the problematic code.

Example:

/* clean-css ignore:start */
.invalidElement input.ng-invalid, .invalidElement textarea.ng-invalid{ border: 1px solid var(--invalid-ele-border) !important; border-radius: 3px !important; }
/* clean-css ignore:end */

It is important to point out that "extractCss": false is not recommended to be used for non development builds.

If the problem persists after upgrading, please open a new issue, provide a simple repository reproducing the problem, and describe the difference between the expected and current
behavior.

[harshkoralwala]

Hello @alan-agius4 ,

Thank you for a quick reply.

As per your response, I can say its an issue for Angular 8.2.3.

As of now, I can not upgrade my project's angular version.

So temporary I m going with your solutions of add comments before and after problematic code.

Thanks.

[destus90]

It is important to point out that "extractCss": true is not recommended to be used for non development builds.

@alan-agius4 Newly created projects have this param in angular.json for production builds. Where can I read why this is not recommended way?

[alan-agius4]

@destus90, apologies I updated the above post. I meant false and not true.

Ie: extractCss is recommended for non development built.

[destus90]

@destus90, apologies I updated the above post. I meant false and not true.

Ie: extractCss is recommended for non development built.

Got it. At first I thought I had missed something.

[harshkoralwala]

Hello @alan-agius4,

Is there any way to get a list of all problematic css code.

I have added a comment before and after problematic css which I have identified. But I want to take care of all the problematic css lines which are unknown to me.

As my css file is big, so it's not possible to identify problematic css lines manually.

I can identify it by comparing individual original css with css produced after the build, but its a very time-consuming task.

Kindly suggest a solution.

Thank You.

[alan-agius4]

@harshkoralwala, problematic css code should result in errors or warnings.

That said, in this case the original code was not problematic but rather a bug in the optimizer which ending up dropping valid code.

Unfortunately, I am not aware of any tool to compare original vs output css. Apart from something like file diff utils.

My recommendation would be to update to version 9 as a lot of bugs are not longer reproducible because we replaced the css optimizer.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}