Angular throws :host-context([dir=rtl]) .ion-float-start -> unmatched pseudo-class :host-context Warning, with multiple projects in one angular.json

Question

I have an Angular Project which is used for 2 web apps with different backends. The Frontend is the same. Since I added the second project to the angular.json I am getting these Warnings:

Warning: 10 rules skipped due to selector errors:
  :host-context([dir=rtl]) .ion-float-start -> unmatched pseudo-class :host-context
  :host-context([dir=rtl]) .ion-float-end -> unmatched pseudo-class :host-context
  :host-context([dir=rtl]) .ion-float-sm-start -> unmatched pseudo-class :host-context
  :host-context([dir=rtl]) .ion-float-sm-end -> unmatched pseudo-class :host-context
  :host-context([dir=rtl]) .ion-float-md-start -> unmatched pseudo-class :host-context
  :host-context([dir=rtl]) .ion-float-md-end -> unmatched pseudo-class :host-context
  :host-context([dir=rtl]) .ion-float-lg-start -> unmatched pseudo-class :host-context
  :host-context([dir=rtl]) .ion-float-lg-end -> unmatched pseudo-class :host-context
  :host-context([dir=rtl]) .ion-float-xl-start -> unmatched pseudo-class :host-context
  :host-context([dir=rtl]) .ion-float-xl-end -> unmatched pseudo-class :host-context

The only differences in the second project are some scss files and the environment.ts. I have no clue what these warnings mean and where they come from. Google didn't offer any solutions. Does anyone know how to fix this?

Angular, Ionic and node are up to date.

Update: Looks like Ionic is the reason for this warning. https://github.com/ionic-team/ionic-framework/issues/23298#issuecomment-840598080 And I think can be ignored.

Answer 1

This is related to a feature known as Inline critical CSS, which was introduced as an optimization in Angular version 11.1. In its initial release, this feature was disabled by default, but starting from version 12, it became enabled by default.

When the feature is enabled, Angular follows a specific process during the build:

1. Angular identifies and extracts all CSS resources that are essential for rendering (known as critical CSS).

2. After extracting the critical CSS, Angular directly embeds it within the index.html file.

In summary, this optimization allows Angular to inline the critical CSS directly into the index.html file, enhancing the loading and rendering performance of the application.

And you can set inlineCritical to false in angular.json to disable it.

"build": { "options": { "optimization": { "styles": { "inlineCritical": false } } } }