Bug: ng build cause warnings with pseudo-selectors in :is/:where

[kyubisation]

🐞 Bug report

Command (mark with an x)

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

Is this a regression?

No

Description

`ng build` inlines critical css but causes warnings when using pseudo selectors inside a :is or :where.

This is not a breaking bug. Usually this only involves states of elements, which is not necessary for critical css. However, it might exclude a state that is relevant.
Maybe you consider this out of scope?

🔬 Minimal Reproduction

https://github.com/kyubisation/ng-pseudo-selector-inlining

Place the following in styles.css:

.example:is(:hover, .active) {
  color: green;
}

🔥 Exception or Error

⠋ Generating index html...1 rules skipped due to selector errors:
  :where(.example):is(,.active) -> Empty sub-selector

🌍 Your Environment

Angular CLI: 13.2.3
Node: 16.12.0
Package Manager: npm 6.14.16
OS: win32 x64

Angular: 13.2.2
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1302.3
@angular-devkit/build-angular   13.2.3
@angular-devkit/core            13.2.3
@angular-devkit/schematics      13.2.3
@angular/cli                    13.2.3
@schematics/angular             13.2.3
rxjs                            7.5.4
typescript                      4.5.5

Anything else relevant?

[alan-agius4]

Looks like this is an issue with GoogleChromeLabs/critters#102

[mylifeandcode]

I'm seeing this error too, specific to a reference to Bootstrap. In a brand new Angular 13.3.0 app, with a reference added to Bootstrap 5.1.3 and its dist CSS included in my styles collection in angular.json, I get the following when building:

- Generating index html...1 rules skipped due to selector errors:
  legend+* -> Cannot read properties of undefined (reading 'type')

When referencing an older version of Bootstrap, I get a slightly different error, just referencing a different selector.

[mylifeandcode]

Also, when this happens for me, the resulting index.html file is no good (app doesn't respond to user events). Modifying the optimization config for the build in angular.json is a workaround:

"optimization": {
     "scripts": true, 
      "fonts": { 
          "inline": true 
       }, 
       "styles": { 
          "minify": true, 
           "inlineCritical": false
        }
},

[PowerKiKi]

Also see GoogleChromeLabs/critters#103 (comment) which suggests a solution, but is awaiting an input from either Angular team or Critters team.