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,
  }));