Skip to content
This repository was archived by the owner on Oct 25, 2024. It is now read-only.
This repository was archived by the owner on Oct 25, 2024. It is now read-only.

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

@elezar42

Description

@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).

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions