bug: build prod warns about CSS rules skipped due to selector errors

[alberto-schena]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v6.x

Current Behavior

Hello,
I get the following warnings while building my application for prod environment.
I suppose these warnings are from css-select library.

> ng run app:build:production

✔ Browser application bundle generation complete.
✔ Copying assets complete.
⠋ Generating index html...14 rules skipped due to selector errors:
  :host-context([dir=rtl]) .ion-float-start -> subselects_1.subselects[name] is not a function   
  :host-context([dir=rtl]) .ion-float-end -> subselects_1.subselects[name] is not a function     
  :host-context([dir=rtl]) .ion-float-sm-start -> subselects_1.subselects[name] is not a function
  :host-context([dir=rtl]) .ion-float-sm-end -> subselects_1.subselects[name] is not a function  
  :host-context([dir=rtl]) .ion-float-md-start -> subselects_1.subselects[name] is not a function
  :host-context([dir=rtl]) .ion-float-md-end -> subselects_1.subselects[name] is not a function  
  :host-context([dir=rtl]) .ion-float-lg-start -> subselects_1.subselects[name] is not a function
  :host-context([dir=rtl]) .ion-float-lg-end -> subselects_1.subselects[name] is not a function  
  :host-context([dir=rtl]) .ion-float-xl-start -> subselects_1.subselects[name] is not a function
  :host-context([dir=rtl]) .ion-float-xl-end -> subselects_1.subselects[name] is not a function
  :host(.swiper-horizontal.swiper-rtl) .swiper-pagination-bullets-dynamic .swiper-pagination-bullet -> subselects_1.subselects[name] is not a function
  ...

Such messages don't appear when building/serving app for development.
These are my dep versions:

    "@angular/common": "^15.2.4",
    "@angular/core": "^15.2.4",
    "@angular/forms": "^15.2.4",
    "@angular/platform-browser": "^15.2.4",
    "@angular/platform-browser-dynamic": "^15.2.4",
    "@angular/router": "^15.2.4",
    "@angular/service-worker": "^15.2.4",
    "@capacitor/android": "4.7.1",
    "@capacitor/app": "^4.1.1",
    "@capacitor/clipboard": "^4.1.0",
    "@capacitor/core": "^4.7.1",
    "@capacitor/haptics": "^4.1.0",
    "@capacitor/ios": "4.7.1",
    "@capacitor/keyboard": "^4.1.1",
    "@capacitor/preferences": "^4.0.2",
    "@capacitor/share": "^4.1.1",
    "@capacitor/status-bar": "^4.1.1",
    "@ionic/angular": "^6.7.0",
    "swiper": "^9.1.1",
    ...

Note: Also swiper generates such a warning message.

Expected Behavior

No CSS rules should be skipped due to internal errors when bundling the app.

Steps to Reproduce

1. Create a simple demo app using Ionic 6.7.0 and Angular 15.2.4
2. Run ionic build --prod command from the workspace root directory

Code Reproduction URL

No response

Ionic Info

Ionic:

   Ionic CLI                     : 6.20.9
   Ionic Framework               : @ionic/angular 6.7.0
   @angular-devkit/build-angular : 15.2.4
   @angular-devkit/schematics    : 15.2.4
   @angular/cli                  : 15.2.4
   @ionic/angular-toolkit        : 8.0.0

Capacitor:

   Capacitor CLI      : 4.7.1
   @capacitor/android : 4.7.1
   @capacitor/core    : 4.7.1
   @capacitor/ios     : 4.7.1

Utility:

   cordova-res : not installed globally
   native-run  : 1.7.2

System:

   NodeJS : v18.15.0 (C:\Program Files\nodejs\node.exe)
   npm    : 9.5.0
   OS     : Windows 10

Additional Information

No response

[liamdebeasi]

Thanks for the report. You can safely ignore this. Angular is trying to analyze the CSS needed for your first route and inline it to index.html. In this case, it came across some CSS it cannot understand, so it is going to skip it. This should not impact the functionality of your application.

Angular should be able to understand this code, but it does not due to GoogleChromeLabs/critters#104. This is a package that Angular uses when compiling your application.

[ionitron-bot]

Thanks for the issue! This issue is being closed due to the lack of a reply. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!