10 rules skipped due to selector errors

[Sampath-Lokuge]

ionic build --prod

Generating index html...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
✔ Index html generation complete.

ionic info

Ionic:

   Ionic CLI                     : 6.16.3 (C:\Users\Sampath\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.6.13
   @angular-devkit/build-angular : 12.1.4
   @angular-devkit/schematics    : 12.1.4
   @angular/cli                  : 12.1.4
   @ionic/angular-toolkit        : 4.0.0

Capacitor:

   Capacitor CLI      : 3.1.2
   @capacitor/android : 3.1.2
   @capacitor/core    : 3.2.0
   @capacitor/ios     : 3.2.0

Utility:

   cordova-res : 0.15.3
   native-run  : 1.4.0

System:

   NodeJS : v14.16.1 (C:\Program Files\nodejs\node.exe)
   npm    : 6.14.12
   OS     : Windows 10

[pankajparkar]

I've seen same issue recently, after upgrading to latest Angular 13.

Warning: 12 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
  .ionic-selectable:not(.ionic-selectable-has-label)-value-item -> Missing closing parenthesis in :not (.ionic-selectable:not(.ionic-selectable-has-label)-value-item)
  ionic-selectable-modal ion-footer ion-toolbar ion-button::part(native button.button-native) -> Unmatched selector: )`

[fromage9747]

July 2022. Just upgraded to Angular 14 and Ionic 6. Experiencing this as well and cannot locate anything online to suppress or remove them. Well anything that actually works. Plus after correcting all of the build errors the app build is just a white screen on android

[mvaljento]

@fromage9747 Same issue here with Angular 13 and Ionic 6.

[LuizCostaa]

Same issue here:

ng serve

Warning: 10 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

ionic info

Ionic:

   Ionic CLI                     : 6.20.1 (C:\Users\costa.luiz\AppData\Roaming\nvm\v16.13.2\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 6.2.0
   @angular-devkit/build-angular : 14.1.2
   @angular-devkit/schematics    : 14.1.2
   @angular/cli                  : 14.1.2
   @ionic/angular-toolkit        : 7.0.0

Capacitor:

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

Utility:

   cordova-res : 0.15.4
   native-run  : 1.6.0

System:

   NodeJS : v16.13.2 (C:\Program Files\nodejs\node.exe)
   npm    : 8.1.2
   OS     : Windows 10

[NeftaliYagua]

Same issue: ionic serve

[ng] Warning: 10 rules skipped due to selector errors:
[ng]   :host-context([dir=rtl]) .ion-float-start -> subselects_1.subselects[name] is not a function
[ng]   :host-context([dir=rtl]) .ion-float-end -> subselects_1.subselects[name] is not a function
[ng]   :host-context([dir=rtl]) .ion-float-sm-start -> subselects_1.subselects[name] is not a function
[ng]   :host-context([dir=rtl]) .ion-float-sm-end -> subselects_1.subselects[name] is not a function
[ng]   :host-context([dir=rtl]) .ion-float-md-start -> subselects_1.subselects[name] is not a function
[ng]   :host-context([dir=rtl]) .ion-float-md-end -> subselects_1.subselects[name] is not a function
[ng]   :host-context([dir=rtl]) .ion-float-lg-start -> subselects_1.subselects[name] is not a function
[ng]   :host-context([dir=rtl]) .ion-float-lg-end -> subselects_1.subselects[name] is not a function
[ng]   :host-context([dir=rtl]) .ion-float-xl-start -> subselects_1.subselects[name] is not a function
[ng]   :host-context([dir=rtl]) .ion-float-xl-end -> subselects_1.subselects[name] is not a function

ionic info

Ionic:

   Ionic CLI                     : 6.20.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 6.2.6
   @angular-devkit/build-angular : 14.2.2
   @angular-devkit/schematics    : 14.2.2
   @angular/cli                  : 14.2.2
   @ionic/angular-toolkit        : 6.1.0

Capacitor:

   Capacitor CLI      : 4.0.1
   @capacitor/android : not installed
   @capacitor/core    : 4.0.1
   @capacitor/ios     : not installed

Utility:

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

System:

   NodeJS : v16.14.0 (/usr/bin/node)
   npm    : 8.19.1
   OS     : Linux 5.19

[jadsy2107]

same here probably wait for ionic to update ? Or is it bigger problem

`

Ionic:

Ionic CLI : 6.20.1 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 6.2.8 @angular-devkit/build-angular : 14.2.3 @angular-devkit/schematics : 14.2.3 @angular/cli : 14.2.3 @ionic/angular-toolkit : 6.1.0

Capacitor:

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

Utility:

cordova-res : 0.15.4 native-run : 1.7.1

System:

NodeJS : v18.9.0 (/opt/homebrew/Cellar/node/18.9.0/bin/node) npm : 8.19.1 OS : macOS Monterey

`

[AVillalonga]

I got the same error only in production build ( ionic capacitor run [device] -l --external --prod ).

[webpack-dev-server] WARNING
10 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

Ionic info

Ionic:

   Ionic CLI                     : 6.20.1
   Ionic Framework               : @ionic/angular 6.2.6
   @angular-devkit/build-angular : 14.2.2
   @angular-devkit/schematics    : 14.2.2
   @angular/cli                  : 14.2.2
   @ionic/angular-toolkit        : 6.1.0

Capacitor:

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

Utility:

   cordova-res                          : 0.15.4
   native-run (update available: 1.7.1) : 1.7.0

System:

   NodeJS : v14.17.4
   npm    : 8.19.1
   OS     : macOS Monterey

[alexazorn]

Hi,

I got the same error after upgrade from ionic 5 to ionic 6, only in production mode:

 Warning: 10 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

ionic info:

Ionic:

   Ionic CLI                     : 6.20.3 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 6.3.4
   @angular-devkit/build-angular : 14.2.8
   @angular-devkit/schematics    : 14.2.8
   @angular/cli                  : 14.2.8
   @ionic/angular-toolkit        : 5.0.3

Capacitor:

   Capacitor CLI      : 3.4.1
   @capacitor/android : not installed
   @capacitor/core    : 3.4.1
   @capacitor/ios     : not installed

Cordova:

   Cordova CLI       : 11.0.0
   Cordova Platforms : browser 6.0.0
   Cordova Plugins   : no whitelisted plugins (0 plugins total)

Utility:

   cordova-res                          : not installed globally
   native-run (update available: 1.7.1) : 1.5.0

System:

   NodeJS : v16.13.2 (/usr/local/bin/node)
   npm    : 8.5.3
   OS     : Linux 4.9```

There are any update about this problem?

Thanks

[azhar-a]

Hi guys,

This is my very first comment ever in any community/issue. Apologies in advance if I am not following any rules or best practices.

I was facing the same errors in prod mode (Ionic 6 and Angular 14): Warning: 10 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

Fixed it by commenting out @import "~@ionic/angular/css/float-elements.css" in the global.scss. This is obviously a workaround unless you are using float classes provided by Ionic. float-elements.css is an optional css utility (mentioned by Ionic as a comment in global.scss). Therefore, I believe it is safe to comment it out.

For reference and to understand the reason behind it better please check this answer https://github.com/angular/angular-cli/issues/20906#issuecomment-846770108

[sykaeh]

Mike Hartington (Ionic Team) posted the following on the Ionic Forum about this warning (https://forum.ionicframework.com/t/host-context-dir-rtl-ion-float-start-subselects-1-subselects-name-is-not-a-function/227383):

This is ok to ignore. What’s happening is angular is trying to analyze the CSS needed for your first route and inline it to the index.html. If it comes across css that it can’t understand, it will just print this warning and skip it. This is typically fine as the css isn’t removed, just skipped for inlining.

[leadoflife]

Any plans to fix / remove these warnings? They clutter my Angular SSR server logs a lot!

[REPTILEHAUS]

+1 on this, almost 2 years old though so wont get my hopes up

[kendyl93]

The same here with IONIC 6

[SE-Ab]

Solved by this in angular.json "build": { "options": { "optimization": { "styles": { "inlineCritical": false } } } }

[jeffreinhart]

Solved by this in angular.json "build": { "options": { "optimization": { "styles": { "inlineCritical": false } } } }

Thank you! I had

45 rules skipped due to selector errors: :host(.toggle-checked) .toggle-icon -> Unknown pseudo-class :host([object Object]) ...

and that setting resolved it. Looks all styles are behaving as expected.