Component level CSS: rgba() transforms to #rrggbbaa hex value without respecting browserslist config

[kiddliu]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

Is this a regression?

Yes, the previous version in which this bug was not present was: 12.1.x

Description

A clear and concise description of the problem...

box-shadow: 0 3px 10px, rgba(0, 0, 0, 0.15);

transforms to

box-shadow:0 3px 10px,#00000026

but in browserslist it specifies

edge >= 17

and Edge does not support #rrggbbaa hex color notation

🔬 Minimal Reproduction

Please check the sample repo at https://github.com/kiddliu/ng-postcss-issue

🔥 Exception or Error

The legacy Edge browser completely ignores the color

🌍 Your Environment

Angular CLI: 12.2.0
Node: 14.17.3
Package Manager: npm 6.14.13
OS: win32 x64

Angular: 12.2.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, material, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1202.0
@angular-devkit/build-angular   12.2.0
@angular-devkit/core            12.2.0
@angular-devkit/schematics      12.2.0
@schematics/angular             12.2.0
rxjs                            6.6.7
typescript                      4.2.4

Anything else relevant?

[alan-agius4]

Node: Edge 17 is not supported by Angular. See https://angular.io/guide/browser-support.

That said, we should provide the list of supported browsers to the optimizer.

[RomanHubyak]

Isn't fixed for IE 11.

[angular-automatic-lock-bot]

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.}