Building Angular 17.1 with Angular CLI when using Bootstrap 5.3.2 results in Critical CSS Inlining failing because 2 rules are skipped due to selector errors

[elezar42]

The 2 rules are the same rule listed twice:

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

>~ is obviously an invalid selector, however it doesn't look like that's ever actually used in the Bootstrap code. I've checked myself, and one of the bootstrap devs has also confirmed it twbs/bootstrap#39323. The base style is simply .form-floating > label while there are a number of styles in the format of .form-floating > [another selector] ~ label. It seems one of those intermediary selectors is being removed during CSS processing.

There is a workaround of disabled Inlining of Critical CSS, but of course we're then missing out on a possible performance improvement.

This was reported as an Issue with Angular CLI last year, but they indicated it is a problem with Critters: angular/angular-cli#25725 (comment).

[eilzee]

Even in the empty angular 17.1.0 project I get some errors

[DanielHabenicht]

Chipping in from the ng-bootstrap repo, where there was also a bug filed last year about this problem and it seem like it was resolved intermittently by critters version 0.0.18.
As it now resurfaces this likely is a regression.
I saw the warnings with @angular-devkit/build-angular:17.2.1 which references critters at version 0.0.20,

Update: Pinning previous critters version did not resolve the problem so its probably not regression.

[DanielHabenicht]

This issue probably can be closed as duplicate of #103

[PowerKiKi]

While the error looks similar, this issue is not a duplicate of #103. Because the whole project was heavily refactored in #124, specifically to solve #103. So it is unlikely to be the same root cause, and this issue needs its own proper investigation.

[schneefeldio]

Same on my side. Setup an Angular ssr project from scratch including bootstrap and get exactly the same output running ng build.

[leandrotassi]

I'm also having the same problem.

[eiswind]

I see a lot of similar errors with picocss in Angular 17.2. For the moment I set "inlineCritical": false to have a working build.

[jitterbox]

We're adding SSR to our legacy Angular project after upgrading to Angular v17.3.6, and it's now crashing the server-side node app due to looping selector errors (both with Vite dev server and express production app builds). The CSS styles are Telerik's, which may be hard to mitigate:

Angular is running in development mode.
7 rules skipped due to selector errors:
  .k-input-label:dir(rtl) -> Unknown pseudo-class :dir

Besides the "inlineCritical" workaround, which doesn't seem(?) to work initially, I saw that the Angular team commented on maybe finding a temporary solution that involves pinning a working Critters version... can anyone here indicate what version that should be, as well as whether this is targeted for a near-term fix?

[waterplea]

Here's a case where it fails on a valid, albeit deprecated selector that we have to use because we need Safari 13 (only Safari 14 supports :is( ), we have to use -webkit-any( ):
taiga-family/taiga-ui#7565

[kara]

Closing this issue because ownership of Critters has moved to the Nuxt team, who will be maintaining the project going forward. This repo is archived and won't receive any future updates.

If the issue is still relevant, please re-post it to the actively-maintained fork at https://github.com/danielroe/beasties.