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

我在Angular 存储库上创建了一个问题，看起来这是一个错误，将在 Angular v9 中修复。

据我所知，问题似乎出在他们使用的CSS 优化器中，因此他们切换到了不同的优化器，并且问题似乎已得到解决（在 v9 中）。最坏的情况是，这可能会引入一些重大更改，在这种情况下，此修复可能不会在 v9 中出现，但没有迹象表明这种情况会发生（目前）。