Invalid selector rules being skipped in production mode

[jodylecompte]

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

Unknown

Description

When importing Bootstrap while using the default SCSS setup, critical CSS inlining fails and outputs errors to the console about the rules being skipped (full error text below).

This appears to be an issue with SCSS parsing in the default Angular setup because the errors referenced below have invalid selectors in them citing .form-floating > ~ label. This is an invalid selector, but having checked the compiled Bootstrap directly, there is no reference to this class. The base style is simply .form-floating > label while there are a number of styles in the format of .form-floating > [another selector] ~ label.

Based on the double space after the > selector, it seems one of those intermediary selectors is being removed during CSS processing.

The minimal reproduction is based off of a fresh ng new project where SCSS is deleted, Bootstrap is loaded in via NPM and imported in global.css. No other configuration has changed or third-party code introduced.

Please provide a link to a minimal reproduction of the bug

https://github.com/jodylecompte/reproduction-ng-critical-css-bootstrap

Please provide the exception or error you saw

2 rules skipped due to selector errors:   
.form-floating >  ~ label -> Did not expect successive traversals.   
.form-floating >  ~ label -> Did not expect successive traversals.

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 16.1.5
Node: 18.10.0
Package Manager: npm 8.19.2
OS: darwin arm64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1601.5
@angular-devkit/build-angular   16.1.5
@angular-devkit/core            16.1.5
@angular-devkit/schematics      16.1.5
@angular/cli                    16.1.5
@nguniversal/builders           16.1.1
@nguniversal/express-engine     16.1.1
@schematics/angular             16.1.5
rxjs                            7.8.1
typescript                      5.1.6
zone.js                         0.13.1

Anything else?

Suspicion of this being related to critical CSS inlining is based off of the errors disappearing if inlineCriticalCss is disabled in the ngExpressEngine configuration.

  server.engine('html', ngExpressEngine({
    bootstrap: AppServerModule,
    inlineCriticalCss: false,
  }));

[jodylecompte]

Hey @alan-agius4, thanks for getting this moved to the most appropriate place! My apologies for not realizing all issues weren't opened against the main Angular repo.

I'm happy to do some more digging into this and try to at least do some triage, but could you possibly point me in the right direction to get started? I just recently started using Angular for a new job and am not extremely familiar with it's internals yet.

[alan-agius4]

This is caused by Critters.

[waterplea]

I was told this is a duplicate: https://github.com/angular/angular-cli/issues/27067

But my selector is not an "Invalid selector rule", it's a valid rule just not recognized. It continues to happen still. What can be done about it?

[jodylecompte]

@waterplea My fix since originally opening this issue has been to disable inlining of critical CSS. I did not observe any negative detriment to web vitals or perceived page performance in doing this, but everyone's mileage could vary.