Getting rules skipped due to selector errors

[avrim-tr]

Hey,

I upgraded taiga-ui and when built in prod mode, I got these warnings:

rules skipped due to selector errors: [tuiAppearance][data-appearance=accent]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=accent]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiAppearance][data-appearance=accent]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=accent]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiAppearance][data-appearance=floating]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=floating]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiAppearance][data-appearance=floating]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=floating]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiAppearance][data-appearance=glass]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=glass]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiAppearance][data-appearance=glass]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=glass]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiTheme=night] [tuiAppearance][data-appearance=glass]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiTheme=night] [tuiAppearance][data-appearance=glass]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiTheme=night] [tuiAppearance][data-appearance=glass]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiTheme=night] [tuiAppearance][data-appearance=glass]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiAppearance][data-appearance=icon]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=icon]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiAppearance][data-appearance=icon]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=icon]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiAppearance][data-appearance=whiteblock]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=neutral]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=floating]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=whiteblock]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=neutral]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=floating]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=whiteblock]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiAppearance][data-appearance=neutral]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiAppearance][data-appearance=floating]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiAppearance][data-appearance=whiteblock]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiAppearance][data-appearance=neutral]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiAppearance][data-appearance=floating]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiAppearance][data-appearance=whiteblock]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=neutral]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=floating]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=whiteblock]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=neutral]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=floating]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=whiteblock]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiAppearance][data-appearance=neutral]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiAppearance][data-appearance=floating]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiAppearance][data-appearance=whiteblock]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiAppearance][data-appearance=neutral]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiAppearance][data-appearance=floating]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiAppearance][data-appearance=link]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=link]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiAppearance][data-appearance=link]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=link]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiAppearance][data-appearance=opposite]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=opposite]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiAppearance][data-appearance=opposite]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=opposite]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiTheme=night] [tuiAppearance][data-appearance=opposite]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiTheme=night] [tuiAppearance][data-appearance=opposite]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiTheme=night] [tuiAppearance][data-appearance=opposite]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiTheme=night] [tuiAppearance][data-appearance=opposite]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiAppearance][data-appearance=outline]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=whiteblock]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=outline]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiAppearance][data-appearance=whiteblock]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiAppearance][data-appearance=outline]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=whiteblock]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=outline]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiAppearance][data-appearance=whiteblock]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiAppearance][data-appearance=outline]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=whiteblock]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=outline]._checked:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=whiteblock]._checked:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=outline]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiAppearance][data-appearance=whiteblock]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiAppearance][data-appearance=outline]._checked:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiAppearance][data-appearance=whiteblock]._checked:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiAppearance][data-appearance=outline]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=whiteblock]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=outline]._checked:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=whiteblock]._checked:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=outline]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiAppearance][data-appearance=whiteblock]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiAppearance][data-appearance=outline]._checked:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiAppearance][data-appearance=whiteblock]._checked:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiAppearance][data-appearance=primary]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=primary]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiAppearance][data-appearance=primary]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=primary]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiAppearance][data-appearance=secondary]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=flat]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=destructive]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=secondary]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiAppearance][data-appearance=flat]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiAppearance][data-appearance=destructive]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiAppearance][data-appearance=secondary]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=flat]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=destructive]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=secondary]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiAppearance][data-appearance=flat]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiAppearance][data-appearance=destructive]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiAppearance][data-appearance=error]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=error]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiAppearance][data-appearance=error]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=error]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiAppearance][data-appearance=success]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=success]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiAppearance][data-appearance=success]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=success]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiAppearance][data-appearance=warning]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=warning]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiAppearance][data-appearance=warning]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=warning]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiAppearance][data-appearance=info]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=info]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiAppearance][data-appearance=info]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=info]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiAppearance][data-appearance=neutral]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=neutral]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any [tuiAppearance][data-appearance=neutral]:-webkit-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-webkit-any [tuiAppearance][data-appearance=neutral]:-moz-any(a,button,select,textarea,input,label):not([data-state]) -> Unknown pseudo-class :-moz-any

Version that I use:

"@angular/animations": "^16.2.12", "@angular/cdk": "^16.2.14", "@angular/common": "^16.2.12", "@angular/compiler": "^16.2.12", "@angular/core": "^16.2.12", "@angular/forms": "^16.2.12", "@angular/material": "^16.2.14", "@angular/platform-browser": "^16.2.12", "@angular/platform-browser-dynamic": "^16.2.12", "@angular/router": "^16.2.12",

"@taiga-ui/addon-mobile": "3.80.0", "@taiga-ui/cdk": "3.80.0", "@taiga-ui/core": "3.80.0", "@taiga-ui/kit": "3.80.0", "@taiga-ui/styles": "3.80.0",

What should I do?

[waterplea]

There's nothing you can do, that's a bug within Angular ecosystem:
GoogleChromeLabs/critters#153

[avrim-tr]

There's nothing you can do, that's a bug within Angular ecosystem: GoogleChromeLabs/critters#153

Ok, thanks @waterplea , I have some questions please:

1. In general what is the meaning of such error? when it says: "rules skipped due to selector errors", dose it mean that such selectors are not entirely in the final bundle? as even thought I got the warning, the build was success and in the output I saw that such selectors are included but perhaps were not treated as intended?, is there any problem that I might expect to?
2. I saw someone that had same error, is it more or less the same as here? some suggested to do "inlineCritical": false as written here what do you think?

[waterplea]

I believe it just says that bundle optimizer didn't know what to do with them and left them as is. Probably inlineCritical: false just skips that step entirely. If your buttons react to cursor hover by changing color — the styles are working properly.