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

gravityctrl · 2022-04-08T11:38:35Z

Bug description:

When building angular using the production configuration, the step Generating index html... produces following warning:
1 rules skipped due to selector errors: legend+* -> Cannot read property 'type' of undefined

See this screenshot:

Reproduction Steps

In Terminal using Angular CLI:

ng new testproject --style scss
cd testproject
ng add @ng-bootstrap/ng-bootstrap
npm run build

Versions

Critters: 0.0.16

Angular: 13.3.0 - 13.3.2

ng-bootstrap: 12.0.2

Bootstrap: 5.1.3

The text was updated successfully, but these errors were encountered:

tnohelty · 2022-04-09T15:04:12Z

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.

janicklas-ralph · 2022-04-25T22:37:19Z

Do you know what selector is throwing this error?

Some selector in the form legend+*. It would be helpful to test if you gave me the entire selector/rule

seimic · 2022-05-11T20:46:42Z

It seems to come from Bootstrap (I see this warnings in v5.1.3, Angular 13.3.6)
bootstrap\scss_reboot.scss

Rarst · 2022-07-28T07:39:43Z

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.

PowerKiKi · 2022-08-08T12:23:11Z

@janicklas-ralph you asked for a reproduction case. Here is the simplest I could do:

import Critters from 'critters';

const html = `
<!DOCTYPE html>
<style>
    .foo + * {
        color: red;
    }
</style>
`;

const critters = new Critters();
const inlined = await critters.process(html);
console.log(inlined);

It will output:

$ node index.mjs

1 rules skipped due to selector errors:
  .foo + * -> Cannot read properties of undefined (reading 'type')
Merging inline stylesheets into a single <style> tag skipped, no inline stylesheets to merge
Time 8.136544
<!DOCTYPE html><html><head>
</head><body></body></html>

But I expect no warning about the selector, like this:

$ node index.mjs

Merging inline stylesheets into a single <style> tag skipped, no inline stylesheets to merge
Time 8.136544
<!DOCTYPE html><html><head>
</head><body></body></html>

Interestingly enough <!DOCTYPE html> is required to trigger the bug. If absent, no warning will happen.

This only happen with css-select@4.3.0

PowerKiKi · 2022-08-08T14:54:47Z

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

hiepxanh · 2022-08-09T07:52:05Z

nice, I dont know how to fix but is that part can replace by htmlparser2 ?
or can we replace css-select with other? I try to upgrade css-select to 5.1.0 but it not work.
can we create an issue for css-select author? @PowerKiKi

critters/packages/critters/src/dom.js

Line 17 in a590c05

import parse5 from 'parse5';

PowerKiKi · 2022-08-09T08:24:53Z

is that part can replace by htmlparser2 ?

Yes

can we replace css-select with other?

I did not look for a replacement. But since it is the core feature of critters, I would try to keep using css-select to avoid behavior changes.

can we create an issue for css-select author?

You can try. But I am pretty sure that the css-select author will reject the issue. Because css-select works well with htmlparser2, and AFAIK it is not meant to work with anything else.

@developit, as the most recent committer, could you offer some guidance on how to proceed ? would you have the opportunity to fixes this yourself ? or would you accept a large PR that significantly rewrites the whole package as suggested in #103 (comment) ?

hiepxanh · 2022-08-09T08:27:31Z

@developit god, please guide us, we are willing to follow you sir 🦻

PowerKiKi · 2022-09-01T12:19:31Z

@alan-agius4, since you opened #102 and that you are part of Angular team, I would like to bring your attention to this issue.

According to my findings there is a severe misconception where critters assumes css-select and parse5 to be compatible, but they are in fact totally unrelated, and cannot be used together.

I'd be inclined to say that it worked until now "by coincidence". But this is no longer the case with latest version of the package, which you actually get with a standard ng update. I suspect the warning is only one of many potential broken use case.

Would you be able to discuss this issue with Angular team ? and see whether we can find a way forward for this ?

alan-agius4 · 2022-09-01T12:44:13Z

@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?

PowerKiKi · 2022-09-20T14:57:49Z

@alan-agius4 were you able to discuss this with Angular team and/or Critters team ?

I'd be willing to create a PR, but since this would be a large change I need to be sure there is a chance of merging it before doing anything...

alan-agius4 · 2022-09-20T15:09:53Z

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

johncrim · 2022-10-19T04:07:22Z

Just to provide additional test-cases, all occurrences of the lobotomized owl selector in an Angular code base result in this warning. Eg:

5 rules skipped due to selector errors:
  .Stack>*+* -> Cannot read properties of undefined (reading 'type')
  .Space--blocks>*+* -> Cannot read properties of undefined (reading 'type')
  .Row>*+* -> Cannot read properties of undefined (reading 'type')
  .Space--inline>*+* -> Cannot read properties of undefined (reading 'type')
  .Stack--dividers>*+* -> Cannot read properties of undefined (reading 'type')

I assume that means these CSS rules aren't inlined; so I could disable CSS inlining, but I can't use these selectors and also have them inlined.

Here's an example of the selector:

  .Row > * + * {
    margin-left: var(--inline-gap);
  }

PowerKiKi · 2022-10-19T08:41:44Z

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.

developit · 2022-10-21T23:31:26Z

I believe the reason we went with parse5 over htmlparser2 was performance, but I'd have to dig up the PR. If htmlparser2 benchmarks similarly then I'd be fine switching to it, alternatively we could just patch the generated tree structure to include those accessor properties as getters on the prototype.

The proper long-term solution is discussed in GoogleChromeLabs#103 (comment) but until then we should at least not break existing install that upgrade their dependencies. Without this we would get errors similar to: ``` rules skipped due to selector errors ``` Fixes GoogleChromeLabs#103

The proper, long-term solution is discussed in GoogleChromeLabs#103 (comment) but until then we should at least not break existing install that upgrade their dependencies. Without this we would get errors similar to: ``` rules skipped due to selector errors ``` Fixes GoogleChromeLabs#103

Jake-Thomas-Hall · 2022-11-27T00:40:03Z

Just want to add this comment here to note that I followed @PowerKiKi's comment in #117 about overriding css-select and it resolved my issues, I've got Angular 15.0.1 and Bootstrap 5.2.3.

Proof:

What I added to package.json:

{
   ...
   "overrides": {
       "css-select": "^4.2.1"
       // These may be optional, did not override these in my case as newer/same versions were already installed.
       "css-what": "^5.1.0"
       "domhandler": "^4.3.1"
   }
   ...
}

jimyhdolores · 2022-11-29T20:13:02Z

No me funciono :/

JacobHornbeck · 2023-01-24T02:52:24Z

Any fix yet? I am having a similar problem 2 months later.
The error I am getting (it may not be the same problem, but I get a very similar error) is:

- Generating browser application bundles (phase: setup)...
√ Browser application bundle generation complete.
√ Browser application bundle generation complete.
- Copying assets...
√ Copying assets complete.
- Generating index html...
- Generating index html...
12 rules skipped due to selector errors:
  ion-content.custom-scroll-box::part(scroll) -> Pseudo-elements are not supported by css-select
  ion-menu::part(backdrop) -> Pseudo-elements are not supported by css-select
  :host-context([dir=rtl]) .ion-float-start -> subselects_1.subselects[name] is not a function
  :host-context([dir=rtl]) .ion-float-end -> subselects_1.subselects[name] is not a function
  :host-context([dir=rtl]) .ion-float-sm-start -> subselects_1.subselects[name] is not a function
  :host-context([dir=rtl]) .ion-float-sm-end -> subselects_1.subselects[name] is not a function
  :host-context([dir=rtl]) .ion-float-md-start -> subselects_1.subselects[name] is not a function
  :host-context([dir=rtl]) .ion-float-md-end -> subselects_1.subselects[name] is not a function
  :host-context([dir=rtl]) .ion-float-lg-start -> subselects_1.subselects[name] is not a function
  :host-context([dir=rtl]) .ion-float-lg-end -> subselects_1.subselects[name] is not a function
  :host-context([dir=rtl]) .ion-float-xl-start -> subselects_1.subselects[name] is not a function
  :host-context([dir=rtl]) .ion-float-xl-end -> subselects_1.subselects[name] is not a function
√ Index html generation complete.
error: unknown option '--project=*************************'

Is this the same sort of problem? Or is this for something else (and I should post this error in some other place)?

PowerKiKi · 2023-01-24T11:51:07Z

I didn't hear anything from Angular team or Google team for a while now. My simple PR that would at least temporarily fix the issue has received no official feedback yet: #117

PowerKiKi · 2023-02-21T02:19:17Z

@alan-agius4, it's been quite a while since we heard anything from from your side. Were you able to make things move forward somehow ?

alan-agius4 · 2023-02-21T15:28:07Z

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.

johncrim · 2023-03-15T22:47:50Z

In Angular and using yarn, I was able to make this warning go away using:

// package.json
  "resolutions": {
    "critters/css-select": "~4.2.1"
  },

Eg setting the css-select version to ~4.2.1 only within critters. I have other dependencies eg using css-select 5.1.0, so the selective dependency resolution feature is nice.

While this makes the warning go away (and the warning is there if I use newer versions of css-select like 4.3.0 or 5.1.0), our use does not prove that this provides a real fix, b/c the CSS that the warning complains about is not deemed critical (in our case).

arman-g · 2023-04-05T15:37:21Z

Hi, is there any update on this? When is this going to be fixed? Thanks!

PowerKiKi · 2023-05-30T11:36:33Z

Solved by #124, which was released as 0.0.17.

@gravityctrl, could you please close this issue ?

aditbisa · 2023-09-01T12:07:40Z

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

alan-agius4 · 2023-09-01T12:19:45Z

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

aditbisa · 2023-09-01T13:30:25Z

@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%;
  }
}
...

anisabboud · 2024-01-11T14:33:18Z

Encountered the same issue with the latest Angular 17 with ::part CSS selector (ng serve / ng build with ESBuild):
"Pseudo-elements are not supported by css-select"

`.scss`

math-field::part(content) {
  padding: 6px;
}

`ng serve` / `ng build`

$ ng build
⠏ Building...
▲ [WARNING] 7 rules skipped due to selector errors:
  math-field::part(content) -> Pseudo-elements are not supported by css-select
  ...

See: https://github.com/fb55/css-select/blob/b1f29b83a5590e3fe34ebb5f6856fec6327b527b/src/general.ts#L26-L28

::part is a relatively new (~2020) pseudo-element shadow DOM selector, but it's supported by all major browsers: https://caniuse.com/mdn-css_selectors_part.
Perhaps the css-select dependency is a bit outdated? The last release is ~2 years old https://github.com/fb55/css-select.

Evg772 · 2024-01-21T13:41:46Z

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.

seimic · 2024-01-21T21:07:40Z

@Evg772
Try to turn off the inlining of critical css in optimization section of the build profile?
(Found here https://stackoverflow.com/questions/76798190/i-get-error-form-floatinglabel-in-ng-build and here ng-bootstrap/ng-bootstrap#4306)

"architect": {
  "build": {
    "configurations": {
      "production": {
        "optimization": {
          "scripts": true,
          "styles": {
            "minify": true,
            "inlineCritical": false  <-- This one to false
          },
          "fonts": true
        },
      }
    }
  }
}

Moises56 · 2024-01-24T15:09:53Z

Esto Funciono Para mi, en Angular 17

PowerKiKi · 2024-02-24T02:59:34Z

@janicklas-ralph, could you please close this issue as it was solved by yourself a few months ago via #124, which was released as 0.0.17 ?

npm install --save @fortawesome/fontawesome-free ng add ngx-bootstrap npm remove bootstrap npm install bootstrap@~5.1 package.jsonに以下を追記 "overrides": { "autoprefixer": "10.4.5" }, 削除 package-lock.json 削除 node_modules npm install styles.scssにfontawesomeのimport追加 styles.scssに.btn-cta、.btn-default追加 ※ それぞれなぜそうしているのかについて 1. ngx-bootstrap10.2.0はbootstrap5.2.xに対応しておらず、bootstrap5.1.xを使う必要がある 2. bootstrap5.1.xの場合、autoprefixer警告が出る。これを暫定的に対応するには10.4.5を入れる必要がある 3. legend+* -> Cannot read properties of undefined (reading 'type') は現時点で解決不可能。放置 ※ その他詳細未解決問題1 legend+* -> Cannot read properties of undefined (reading 'type') GoogleChromeLabs/critters#103 未解決問題2（実害がないため解決する気がないらしい） No captured browser, open http://localhost:9876/ karma-runner/karma#2372

vsTianhao · 2024-04-23T09:55:07Z

"Unknown pseudo-class :dir" me too

hiepxanh mentioned this issue Jul 28, 2022

ng build cause warnings with pseudo-selectors in :is/:where #102

Closed

PowerKiKi mentioned this issue Aug 8, 2022

Rules skipped due to selector errors: legend+* -> Cannot read property 'type' of undefined ng-bootstrap/ng-bootstrap#4306

Closed

PowerKiKi added a commit to PowerKiKi/critters that referenced this issue Aug 8, 2022

Failing test case to reproduce GoogleChromeLabs#103

f5eaa74

This only happen with css-select@4.3.0

Nightsphere mentioned this issue Sep 13, 2022

DevTools warning appears when running ng serve OpenWaterFoundation/owf-app-infomapper-builder-ng#4

Closed

PowerKiKi mentioned this issue Sep 20, 2022

Bug: ng build cause warnings with pseudo-selectors in :is/:where angular/angular-cli#22694

Closed

15 tasks

PowerKiKi mentioned this issue Sep 20, 2022

Warning when using :host-context that is subselects_1.subselects[name] is not a function #104

Open

This was referenced Sep 22, 2022

Selector errors twbs/bootstrap#37116

Closed

angular 13+ compilation : legend+* -> Cannot read properties of undefined (reading 'type') v5.1.3 twbs/bootstrap#36136

Closed

orinokai mentioned this issue Sep 27, 2022

chore: disable critical css to avoid upstream bug netlify/next-runtime#1644

Merged

svrijsewijk mentioned this issue Nov 14, 2022

bouw css geeft errors dso-toolkit/dso-toolkit#1832

Closed

PowerKiKi mentioned this issue Nov 21, 2022

Pin css-select to latest compatible version #117

Closed

PowerKiKi mentioned this issue Nov 21, 2022

Pin css-select to latest compatible version PowerKiKi/critters#1

Closed

art-alexeyenko mentioned this issue Jan 27, 2023

[angular] upgrade bootstrap in sample app Sitecore/jss#1308

Merged

3 tasks

NikolaRHristov mentioned this issue Apr 26, 2023

It keeps processing the same file PlayForm/Inline#94

Closed

alan-agius4 mentioned this issue May 5, 2023

Updating CSS and HTML parser. #120

Closed

PowerKiKi mentioned this issue May 30, 2023

Failing test case to reproduce #103 #114

Closed

hbuchel mentioned this issue Feb 5, 2024

Angular SSR outputs warning on css on every page load aws-amplify/amplify-ui#4976

Closed

4 tasks

DanielHabenicht mentioned this issue Feb 23, 2024

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

gravityctrl commented Apr 8, 2022 •

edited

tnohelty commented Apr 9, 2022

janicklas-ralph commented Apr 25, 2022

seimic commented May 11, 2022

Rarst commented Jul 28, 2022 •

edited

PowerKiKi commented Aug 8, 2022

PowerKiKi commented Aug 8, 2022

hiepxanh commented Aug 9, 2022 •

edited

PowerKiKi commented Aug 9, 2022

hiepxanh commented Aug 9, 2022

PowerKiKi commented Sep 1, 2022

alan-agius4 commented Sep 1, 2022

PowerKiKi commented Sep 20, 2022

alan-agius4 commented Sep 20, 2022

johncrim commented Oct 19, 2022

PowerKiKi commented Oct 19, 2022

developit commented Oct 21, 2022

Jake-Thomas-Hall commented Nov 27, 2022

jimyhdolores commented Nov 29, 2022

JacobHornbeck commented Jan 24, 2023

PowerKiKi commented Jan 24, 2023

PowerKiKi commented Feb 21, 2023

alan-agius4 commented Feb 21, 2023

johncrim commented Mar 15, 2023 •

edited

arman-g commented Apr 5, 2023

PowerKiKi commented May 30, 2023

aditbisa commented Sep 1, 2023

alan-agius4 commented Sep 1, 2023

aditbisa commented Sep 1, 2023

anisabboud commented Jan 11, 2024 •

edited

Evg772 commented Jan 21, 2024

seimic commented Jan 21, 2024

Moises56 commented Jan 24, 2024 •

edited

PowerKiKi commented Feb 24, 2024

vsTianhao commented Apr 23, 2024

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

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

Comments

gravityctrl commented Apr 8, 2022 • edited

Bug description:

Reproduction Steps

Versions

tnohelty commented Apr 9, 2022

janicklas-ralph commented Apr 25, 2022

seimic commented May 11, 2022

Rarst commented Jul 28, 2022 • edited

PowerKiKi commented Aug 8, 2022

PowerKiKi commented Aug 8, 2022

hiepxanh commented Aug 9, 2022 • edited

PowerKiKi commented Aug 9, 2022

hiepxanh commented Aug 9, 2022

PowerKiKi commented Sep 1, 2022

alan-agius4 commented Sep 1, 2022

PowerKiKi commented Sep 20, 2022

alan-agius4 commented Sep 20, 2022

johncrim commented Oct 19, 2022

PowerKiKi commented Oct 19, 2022

developit commented Oct 21, 2022

Jake-Thomas-Hall commented Nov 27, 2022

jimyhdolores commented Nov 29, 2022

JacobHornbeck commented Jan 24, 2023

PowerKiKi commented Jan 24, 2023

PowerKiKi commented Feb 21, 2023

alan-agius4 commented Feb 21, 2023

johncrim commented Mar 15, 2023 • edited

arman-g commented Apr 5, 2023

PowerKiKi commented May 30, 2023

aditbisa commented Sep 1, 2023

alan-agius4 commented Sep 1, 2023

aditbisa commented Sep 1, 2023

anisabboud commented Jan 11, 2024 • edited

.scss

ng serve / ng build

Evg772 commented Jan 21, 2024

seimic commented Jan 21, 2024

Moises56 commented Jan 24, 2024 • edited

PowerKiKi commented Feb 24, 2024

vsTianhao commented Apr 23, 2024

gravityctrl commented Apr 8, 2022 •

edited

Rarst commented Jul 28, 2022 •

edited

hiepxanh commented Aug 9, 2022 •

edited

johncrim commented Mar 15, 2023 •

edited

anisabboud commented Jan 11, 2024 •

edited

`.scss`

`ng serve` / `ng build`

Moises56 commented Jan 24, 2024 •

edited