Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS Variables are lost when running ng build --prod #16123

Closed
neofuture opened this issue Nov 4, 2019 · 7 comments · Fixed by #16539
Closed

CSS Variables are lost when running ng build --prod #16123

neofuture opened this issue Nov 4, 2019 · 7 comments · Fixed by #16539

Comments

@neofuture
Copy link

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
Screenshot 2019-11-04 at 11 08 27

Production Mode
Screenshot 2019-11-04 at 11 08 55

@neofuture
Copy link
Author

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
Copy link
Author

Here is a repo to illustrate the issue

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

@IgorMinar
Copy link
Contributor

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

@neofuture does this reproduce with v8 as well?

@neofuture
Copy link
Author

Yes the same thing happens in v8

@IgorMinar
Copy link
Contributor

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.

@IgorMinar IgorMinar transferred this issue from angular/angular Nov 8, 2019
@clydin
Copy link
Member

clydin commented Nov 8, 2019

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
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Feb 13, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.