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

[kyubisation]

🐞 Bug report

Command (mark with an x)

• [ ] new
• [x] 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 https://github.com/GoogleChromeLabs/critters/issues/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 https://github.com/GoogleChromeLabs/critters/issues/103#issuecomment-1208236366 which suggests a solution, but is awaiting an input from either Angular team or Critters team.

[PowerKiKi]

We now have a straightforward PR that would solve this issue. Any help to get it merged and released would be very appreciated: https://github.com/GoogleChromeLabs/critters/pull/117

[alan-agius4]

@PowerKiKi, I did bring this up with the Aurora team in an internal email thread.

// cc @kara and @janicklas-ralph

[ben12]

Not fixed for me with Angular 16.1.0. Only the Bootstrap warning is fixed, not the "Empty sub-selector" described here.

[alan-agius4]

@ben12, thanks for brining that up. I have opened a PR to address that as well https://github.com/GoogleChromeLabs/critters/pull/129

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}