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

Open
neofuture opened this issue Nov 4, 2019 · 6 comments

Comments

@neofuture
Copy link

@neofuture neofuture commented Nov 4, 2019

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

This comment has been minimized.

Copy link
Author

@neofuture neofuture commented Nov 4, 2019

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

This comment has been minimized.

Copy link
Author

@neofuture neofuture commented Nov 5, 2019

Here is a repo to illustrate the issue

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

@IgorMinar

This comment has been minimized.

Copy link
Member

@IgorMinar IgorMinar commented Nov 6, 2019

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

@neofuture does this reproduce with v8 as well?

@neofuture

This comment has been minimized.

Copy link
Author

@neofuture neofuture commented Nov 6, 2019

Yes the same thing happens in v8

@IgorMinar

This comment has been minimized.

Copy link
Member

@IgorMinar IgorMinar commented Nov 8, 2019

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

This comment has been minimized.

Copy link
Member

@clydin clydin commented Nov 8, 2019

I believe you are encountering the following defect from the CSS optimizer: jakubpawlowicz/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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.