CSS Variables are lost when running ng build --prod

[neofuture]

When running ng build --prod in release candidate of Angular 9 the CSS variables are removed from some elements please see screenshots these are originally in styles.css

Development Mode

Production Mode

[neofuture]

Work around seems to be changing

border-top:1px solid var(--background-grey) !important;

to

border-top:1px solid !important;
border-color:var(--background-grey) !important;

[neofuture]

Here is a repo to illustrate the issue

https://github.com/neofuture/css-issue

[IgorMinar]

This is either a compiler or one of the optimization passes in CLI.

@neofuture does this reproduce with v8 as well?

[neofuture]

Yes the same thing happens in v8

[IgorMinar]

I don't believe that this has anything to do with the compiler because it's --prod mode specific. I'm going to transfer this over to the Angular CLI repo.

[clydin]

I believe you are encountering the following defect from the CSS optimizer: clean-css/clean-css#1060

As a workaround until the defect has been corrected, the section in question can be altered to add ignore comments (reference) to prevent the optimizer from altering the rule. As an example using the provided reproduction code:

/* clean-css ignore:start */
.border-box {
  border:1px solid var(--red) !important;
}
/* clean-css ignore:end */
:root {
  --red: #ff0000;
}

[angular-automatic-lock-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.}