rgba converted to hex notation when compiling library with ng-packagr - breaks IE11

🐞 Bug report

Command (mark with an x)

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

Is this a regression?

Yes, this problem was not present in earlier versions of the compiler and/or ng-packagr. I migrated from Angular 8.2.14 and ng-packagr 5.7.1 to Angular 12.2.11 and ng-packagr 12.2.4. The regression is in one of the intermediate version.

Description

When using rgba in CSS (color, background-color or similar), the library compilation do transform the rgba encoding to HEX, for instance color: #ffffffbf. This seems related to #21652 , which was present in early 12.2.X versions. My main project had a similar issue with version 12.2.0, which was solved by upgrading to 12.2.9 (which is the current version of my main project). The library compilation however seems to still have the problem with 12.2.11 Angular version.

🔬 Minimal Reproduction

It’s difficult to provide a minimal reproduction due to the dependency between the several projects involved (main Angular application and ng-packagr library). My current setup :

• first npm workspace contains two projects in angular.json file : The library itself ("projectType": "library") and a demo application to start and debug locally the library ("projectType": "application"). When starting the demo application through ng serve library-project-demo --configuration es5, the rgba CSS directives are NOT transformed into HEX and therefore are working properly.
• second npm workspace contains the main application. It does import the library from our nexus npm internal repository by referencing it in package.json. When starting the main application through ng serve --configuration es5, the rgba CSS directives which are inside our main application code are NOT transformed into HEX and are working, but the ones that comes from the library ARE transformed into HEX and therefore broken on IE11.

It seems the commits used to fix #21652 are working for the compilation of a main application, but are somehow not fixing the libraries compilation.

🔥 Exception or Error

No error nor exception. HEX rgba CSS directives are ignored by Internet Explorer 11.

🌍 Your Environment

@angular-devkit/architect       0.1202.11
@angular-devkit/build-angular   12.2.11
@angular-devkit/core            12.2.11
@angular-devkit/schematics      12.2.11
@schematics/angular             12.2.11
ng-packagr                      12.2.4
rxjs                            6.5.3
typescript                      4.3.5

Anything else relevant?

Specific to Internet Explorer.

[Wisdomb33r]

@alan-agius4 That’s it ! My library project had no .browserslist file. I verified in our GIT and it never had one. Maybe the Angular 8 CLI wasn’t generating one when I started the project. According to my documentation I used :

ng new internal-libs --create-application=false
ng g library plate-lib
ng g application plate-demo

And the CLI migration to 9, 10, 11 and 12 did not add it either. After adding it manually everything works fine. Thanks a lot for suggesting the browserslist file and for the (incredibly) fast fix yesterday.

[angular-automatic-lock-bot[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.}