CSS variable defined with !important flag disappears in angular production mode

Question

I have an issue with CSS variable (defined using var() syntax) with !important flag disappearing when Angular project is build in production mode (using ng build --prod). Specifically, in my scss file I have something like this:

.all-borders {
  border: 3px solid var(--primary) !important;
  // in "development" build this is correctly compiled to:  "border:1px solid var(--primary)!important"
  // in "production" build this is incorrectly compiled to: "border:1px solid!important"
}

.window {
  height: 100px;
  width: 100px;
  background-color: cadetblue;
}

and in html file I have defined a simple div element like this:

<div class="all-borders window"></div>

and when I run ng serve (so build in dev mode) I can see that border is correctly compiled and applied on my div element. But, when I build in prod mode then my border becomes black and I can see in inspector that style has been compiled to border: 1px solid!important (notice that var(...) disappeared).

Here is a stackblitz example demonstrating this issue (that is development version) and here is how this looks when build for production and deployed.

The question is, can anyone explain to me why is this happening?

I can fix this issue in multiple ways, for example reorganizing styles and removing !important, or even writing border style like this border: var(--primary) 1px solid !important (weirdly enough, this works fine), but I am wondering why is this happening, could it be just a bug or is there a universal reason behind this?

Answer 1

I created an issue on Angular repo here, and it seems that this is a bug and will be fixed in Angular v9.

From what I could find out it seems that the issue was in the CSS optimizer they used, so they switched to a different one and it seems the issue is resolved (in v9). Worst case scenario is that this may introduce some breaking changes in which case this fix may not make it in v9 but there are no indications that this will happen (for now).