search

GoogleChromeLabs / critters

🦔 A Webpack plugin to inline your critical CSS and lazy-load the rest.
https://npm.im/critters-webpack-plugin
Apache License 2.0
3.42k stars 108 forks source link

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 #153

Open elezar42 opened 7 months ago

elezar42 commented 7 months ago

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: https://github.com/angular/angular-cli/issues/25725#issuecomment-1697362593.

eilzee commented 7 months ago

Even in the empty angular 17.1.0 project I get some errors

Screenshot 2024-01-26 232318

DanielHabenicht commented 6 months ago

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 commented 6 months ago

This issue probably can be closed as duplicate of #103

PowerKiKi commented 6 months ago

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 commented 6 months ago

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

warnings
leandrotassi commented 6 months ago

I'm also having the same problem.

eiswind commented 5 months ago

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 commented 3 months ago

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 commented 3 months ago

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( ): https://github.com/taiga-family/taiga-ui/issues/7565