Angular 11/CSS minification: How to prevent conversion of rgba to 8 digit hex code during css minification to support older chrome

Question

We've a web app that's developed in Angular 11(cli V11.2.14) & Asp.net core and running fine, now needs to be supported in chrome older version(browser version 60). I came across css issues mainly related to elements with color & opacity like for eg. below box-shadow is not working.

box-shadow: 0px 4px 16px 4px rgba(255, 0, 0, 0.52);

Figured out during the angular css minification process(default setting optimization=true in angular.json), the rgba is converted to 8 digit hex code. This works with recent versions of chrome(72 and above). But older version like chrome 60 doesn't support the 8 digit hex code hence I'm not seeing the css getting into effect. Currently i can fix this issue only by not minifying the styles with below setting in angular.json.

"optimization": {
                "scripts": true,
                "styles": {
                  "minify": false,
                  "inlineCritical": true
                },
                "fonts": true
              },

I'm trying to see if there is a way to prevent conversion of rgba to 8 digit hex code without having to disable the css minification. Tried using variable in styles.scss like below but the minification process still converts rgba to 8 digit hex.

$my-shadow-red: #{'0px 4px 16px 4px rgba(255, 0, 0, 0.52)'};
box-shadow: $my-shadow-red;

Came across similar issue posted here https://github.com/angular/angular-cli/issues/20869 that says css nano team has to address this. Not sure if there is any workaround currently within angular cli.

Answer 1

As a solution I would propose to put such critical styles as inline in the template. For example:

<div class="some-class" style: "box-shadow: 0px 4px 16px 4px rgba(255, 0, 0, 0.52);">
...
</div>