critters: rules skipped due to selector errors: legend+* -> Cannot read property 'type' of undefined

Getting the same (I think) with Tailwind typography plugin:

4 rules skipped due to selector errors:
  .prose :where(hr + *):not(:where([class~="not-prose"] *)) -> Cannot read properties of undefined (reading 'type')
  .prose :where(h2 + *):not(:where([class~="not-prose"] *)) -> Cannot read properties of undefined (reading 'type')
  .prose :where(h3 + *):not(:where([class~="not-prose"] *)) -> Cannot read properties of undefined (reading 'type')
  .prose :where(h4 + *):not(:where([class~="not-prose"] *)) -> Cannot read properties of undefined (reading 'type')

The only selectors, that error, seem to be with + * in them.

I’ve had a closer look at this bug, and I now think it comes from an incompatibility between parse5 which is used to parse HTML and css-select that is used to query CSS selectors. The document model is entirely different, and thus css-select try to access properties that never exist (node.prev).

It seems the most obvious solution would be to replace parse5 with htmlparser2, because it is part of the same ecosystem as css-select. However that also means that the DOM mutation must be ported to something else, most likely to domutils, and the same goes for the DOM serialization where the obvious choice would be dom-serializer.

All of that is a rather significant amount of work, and quite risky. It would probably be best if someone who know this codebase well would do it (instead of me)…

@aditbisa, can you please provide an example of the problematic selector?

The warning text

  :host-context([dir=rtl]) .ion-float-start -> Unknown pseudo-class :host-context([object Object])
  .ion-float-start:dir(rtl) -> Unknown pseudo-class :dir
  :host-context([dir=rtl]) .ion-float-end -> Unknown pseudo-class :host-context([object Object])
  .ion-float-end:dir(rtl) -> Unknown pseudo-class :dir
  :host-context([dir=rtl]) .ion-float-sm-start -> Unknown pseudo-class :host-context([object Object])
  .ion-float-sm-start:dir(rtl) -> Unknown pseudo-class :dir
  :host-context([dir=rtl]) .ion-float-sm-end -> Unknown pseudo-class :host-context([object Object])
  .ion-float-sm-end:dir(rtl) -> Unknown pseudo-class :dir
  :host-context([dir=rtl]) .ion-float-md-start -> Unknown pseudo-class :host-context([object Object])
  .ion-float-md-start:dir(rtl) -> Unknown pseudo-class :dir
  :host-context([dir=rtl]) .ion-float-md-end -> Unknown pseudo-class :host-context([object Object])
  .ion-float-md-end:dir(rtl) -> Unknown pseudo-class :dir
  :host-context([dir=rtl]) .ion-float-lg-start -> Unknown pseudo-class :host-context([object Object])
  .ion-float-lg-start:dir(rtl) -> Unknown pseudo-class :dir
  :host-context([dir=rtl]) .ion-float-lg-end -> Unknown pseudo-class :host-context([object Object])
  .ion-float-lg-end:dir(rtl) -> Unknown pseudo-class :dir
  :host-context([dir=rtl]) .ion-float-xl-start -> Unknown pseudo-class :host-context([object Object])
  .ion-float-xl-start:dir(rtl) -> Unknown pseudo-class :dir
  :host-context([dir=rtl]) .ion-float-xl-end -> Unknown pseudo-class :host-context([object Object])
  .ion-float-xl-end:dir(rtl) -> Unknown pseudo-class :dir
  body ion-button::part(native):is(button) -> Pseudo-elements are not supported by css-select
  ion-content::part(scroll) -> Pseudo-elements are not supported by css-select
  ion-toast::part(container) -> Pseudo-elements are not supported by css-select
  ion-item.app-item::part(native) -> Pseudo-elements are not supported by css-select
  ion-item.app-item.app-item-active::part(native) -> Pseudo-elements are not supported by css-select
  ion-select.app-select::part(icon) -> Pseudo-elements are not supported by css-select

My codes

/** global.scss */
...
@import './styles/app-styles.scss';
...

/** ./styles/app-styles.scss */
...
/* Select */
ion-select.app-select {
  --background: var(--app-input-background);
  border: 1px solid var(--app-input-border-color);
  border-radius: var(--app-border-radius);
  --padding-start: 8px !important;
  --padding-end: 8px;

  &::part(icon) {
    top: 50%;
  }
}
...

We did raise this issue with the Chrome team, my understanding is that @janicklas-ralph will look into this and several other issues in Q1.

I have a similar issue in Angular 17.1.0: ng build

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

This problem appeared when I upgraded Angular v15 -> v16 (critters v0.0.16 -> v0.0.20)

No me funciono 😕

I assume that means these CSS rules aren’t inlined

This is correct. And because of that I think this issue should have a higher priority. At the very least Angular team should pin an exact version of package when it still worked.

@PowerKiKi, I did bring this up among other issues with Critters. However, this will require some further discussions with the Chrome team

@PowerKiKi, thanks for bring this up. I am not sure what was the reason why parse5 was used instead of htmlparser2.

Although css-select can support a custom adapter for parse5, see: https://github.com/fb55/css-select#options It does sound reasonable to me to use htmlparser2 directly as this would also avoid having to maintain a custom parse5 adapter like https://github.com/Polymer/css-select-parse5-adapter.

Maybe @janicklas-ralph can pitch in?

I am seeing the exact same error message and have the same versions as above. This was not happening until I just upgraded my project to the latest versions of these packages.