SyntaxError: '>input:-webkit-autofill' is not a valid selector #116

alissalkvc · 2024-06-13T18:46:58Z

Hi all, I'm using Material UI in my project, which has a few CSS rules with the pseudo-selector :-webkit-autofill.

All was good until a subdependency updated from v2.2.7 of this package. I started to get this error when running jest tests:

   SyntaxError: '>input:-webkit-autofill' is not a valid selector

     185 |       });
     186 |       it(‘tests', async () => {
   > 187 |         render(
         |               ^


     at emit (node_modules/nwsapi/src/nwsapi.js:557:17)
     at _querySelectorAll (node_modules/nwsapi/src/nwsapi.js:1501:9)
     at Object._querySelector [as first] (node_modules/nwsapi/src/nwsapi.js:1412:14)
     at HTMLDivElementImpl.querySelector (node_modules/jsdom/lib/jsdom/living/nodes/ParentNode-impl.js:69:44)
     at HTMLDivElement.querySelector (node_modules/jsdom/lib/jsdom/living/generated/Element.js:1094:58)
     at Array.Resolver (eval at compile (node_modules/nwsapi/src/nwsapi.js:760:17), <anonymous>:3:135)
     at match_assert (node_modules/nwsapi/src/nwsapi.js:1339:13)
     at Object._matches [as match] (node_modules/nwsapi/src/nwsapi.js:1357:16)
     at exports.matchesDontThrow (node_modules/jsdom/lib/jsdom/living/helpers/selectors.js:29:36)
     at matches (node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:50:10)
     at node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:35:18
         at Array.forEach (<anonymous>)
     at handleSheet (node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:26:13)
         at Array.forEach (<anonymous>)

Adding "nwsapi": "2.2.7" to my Yarn resolutions fixed the issue. I see the issue as soon as I start using v2.2.8, and still see the issue in v.2.2.10. I assume this selector should still be allowed and valid? The only spot I see this selector mentioned is https://github.com/dperini/nwsapi/blame/45e88dee2b02276834bd53584fe82fe031c51592/src/nwsapi.js#L90

thanks for all that you do and let me know if I can provide any additional information!

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

dperini · 2024-06-17T05:09:59Z

@alissalkvc
the problem is the first character in your selector.
The '>' symbol, in CSS Selectors syntax, is the direct child combinator:

>input

this is in effect an invalid selector and I believe any browser will treat it the same.
In this case the selector is starting with the '>' symbol which makes it missing left context.

Try removing the '>' at the beginning or add '*' in front of it to make it a valid selector.

Try it in browsers and you will see they treat the selector as invalid.
I hope this help you fix the exact syntax for what you need.

otaviomad · 2024-06-18T13:03:27Z

@dperini
Hey! We've also started having this problem recently.

The fact is that we're not using it as a standalone selector. It's part of a :has selector.

If we have, for example div:has(> span), we will only select divs that have an immediate child span. This selector isn't marked as invalid.

dperini · 2024-06-18T18:37:43Z

@alissalkvc & @otaviomad
at first I didn't understand it was a selector inside an ':has()' pseudo.
Now I got that and I am going to check why that functionality was lost.
You told that it worked correctly in release 2.2.7 is that correct ?

otaviomad · 2024-06-18T19:37:05Z

@dperini
Indeed! Forcing it to 2.2.7 makes it work again.

(We're having this on our own components. I'm unsure whether this issue is also applicable to Material UI)

dperini · 2024-06-23T08:31:16Z

@otaviomad @alissalkvc
I tested that selector and it doesn't work.
The problem, as outlined above, is the direct child '>' which misses left context.
If you have different results please copy here the code snippet working with 2.2.7.
Is jsdom automatically adding context (left or right) to the query after it realizes the mangled content ?

alissalkvc · 2024-06-27T15:40:40Z

It’s not quite as easy as just pasting when the code snippet works with 2.2.7 - the failure only happens when Jest tests are run using versions after 2.2.7. usually, I don’t see anything because tests are all passing, but with this error (anything over 2.2.7) I suddenly get errors like these:

‘’’
● Edit Recording Information › allows late dated date input

SyntaxError: '>input:-webkit-autofill' is not a valid selector

  619 |       </ThemeProvider>
  620 |     );
> 621 |     render(testEditDates);
      |           ^
  622 |

  at emit (node_modules/nwsapi/src/nwsapi.js:576:17)
  at _querySelectorAll (node_modules/nwsapi/src/nwsapi.js:1528:9)
  at Object._querySelector [as first] (node_modules/nwsapi/src/nwsapi.js:1437:14)
  at HTMLDivElementImpl.querySelector (node_modules/jsdom/lib/jsdom/living/nodes/ParentNode-impl.js:69:44)
  at HTMLDivElement.querySelector (node_modules/jsdom/lib/jsdom/living/generated/Element.js:1046:58)
  at Array.Resolver (eval at compile (node_modules/nwsapi/src/nwsapi.js:781:17), <anonymous>:3:136)
  at match_assert (node_modules/nwsapi/src/nwsapi.js:1364:13)
  at Object._matches [as match] (node_modules/nwsapi/src/nwsapi.js:1382:16)
  at exports.matchesDontThrow (node_modules/jsdom/lib/jsdom/living/helpers/selectors.js:29:36)
  at matches (node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:50:10)
  at node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:35:18
      at Array.forEach (<anonymous>)
  at handleSheet (node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:26:13)
      at Array.forEach (<anonymous>)
  at Object.exports.forEachMatchingSheetRuleOfElement (node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:46:11)
  at getCascadedPropertyValue (node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:62:11)
  at getSpecifiedValue (node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:80:19)
  at getComputedValue (node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:100:12)
  at getSpecifiedValue (node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:89:12)
  at getComputedValue (node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:100:12)
  at exports.getResolvedValue (node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:111:10)
  at node_modules/jsdom/lib/jsdom/browser/Window.js:815:41
      at Array.forEach (<anonymous>)
  at Window.getComputedStyle (node_modules/jsdom/lib/jsdom/browser/Window.js:814:13)
  at [node_modules/@mui/base/node/TextareaAutosize/TextareaAutosize.js:69:43](mailto:node_modules/@mui/base/node/TextareaAutosize/TextareaAutosize.js:69:43)
  at [node_modules/@mui/base/node/TextareaAutosize/TextareaAutosize.js:117:28](mailto:node_modules/@mui/base/node/TextareaAutosize/TextareaAutosize.js:117:28)
  at [node_modules/@mui/base/node/TextareaAutosize/TextareaAutosize.js:159:5](mailto:node_modules/@mui/base/node/TextareaAutosize/TextareaAutosize.js:159:5)


SyntaxError: '>input:-webkit-autofill' is not a valid selector

  461 |       expect(editButton).toBeTruthy();
  462 |       if (editButton) {
> 463 |         userEvent.click(editButton);
      |                   ^
  464 |       }
  465 |
  466 |       // Assert that the radio buttons are displayed.

  at emit (node_modules/nwsapi/src/nwsapi.js:576:17)
  at _querySelectorAll (node_modules/nwsapi/src/nwsapi.js:1528:9)
  at Object._querySelector [as first] (node_modules/nwsapi/src/nwsapi.js:1437:14)
  at HTMLDivElementImpl.querySelector (node_modules/jsdom/lib/jsdom/living/nodes/ParentNode-impl.js:69:44)
  at HTMLDivElement.querySelector (node_modules/jsdom/lib/jsdom/living/generated/Element.js:1046:58)
  at Array.Resolver (eval at compile (node_modules/nwsapi/src/nwsapi.js:781:17), <anonymous>:3:136)
  at match_assert (node_modules/nwsapi/src/nwsapi.js:1364:13)
  at Object._matches [as match] (node_modules/nwsapi/src/nwsapi.js:1382:16)
  at exports.matchesDontThrow (node_modules/jsdom/lib/jsdom/living/helpers/selectors.js:29:36)
  at matches (node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:50:10)
  at node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:35:18
      at Array.forEach (<anonymous>)
  at handleSheet (node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:26:13)
      at Array.forEach (<anonymous>)
  at Object.exports.forEachMatchingSheetRuleOfElement (node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:46:11)
  at getCascadedPropertyValue (node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:62:11)
  at getSpecifiedValue (node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:80:19)
  at getComputedValue (node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:100:12)
  at getSpecifiedValue (node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:89:12)
  at getComputedValue (node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:100:12)
  at exports.getResolvedValue (node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:111:10)
  at node_modules/jsdom/lib/jsdom/browser/Window.js:815:41
      at Array.forEach (<anonymous>)
  at Window.getComputedStyle (node_modules/jsdom/lib/jsdom/browser/Window.js:814:13)
  at [node_modules/@mui/base/node/TextareaAutosize/TextareaAutosize.js:69:43](mailto:node_modules/@mui/base/node/TextareaAutosize/TextareaAutosize.js:69:43)
  at [node_modules/@mui/base/node/TextareaAutosize/TextareaAutosize.js:117:28](mailto:node_modules/@mui/base/node/TextareaAutosize/TextareaAutosize.js:117:28)
  at [node_modules/@mui/base/node/TextareaAutosize/TextareaAutosize.js:159:5](mailto:node_modules/@mui/base/node/TextareaAutosize/TextareaAutosize.js:159:5)
  ‘’’

I’m not sure what changed in 2.2.8 that would have caused this selector to suddenly cause test failures?

shpyo · 2025-01-03T10:16:13Z

Any update on this? Is it a valid issue?

dperini · 2025-01-04T04:10:58Z

@shpyo @alissalkvc @otaviomad
no there are no news about the subject selector being wrong, it remains wrong.
That is due to the starting '>' character that makes it a missing context selector.

So these are the conclusions:

'>input:-webkit-autofill'

does not work, neither in nwsapi nor using browsers native

while any of:

'*>input:-webkit-autofill'
':has(>input:-webkit-autofill)'
':scope >input:-webkit-autofill'

should work, either with nwsapi or using browsers native, obviously with different results depending on the used context.

What made this work inside an :has() pseudo-class or prepended by a :scope pseudo-class are due to the recent support for the :has() and :scope pseudo-classes selectors reached in nwsapi 2.2.16, though there might still be refinements/bugs.

The form with a prepended asterisk was available before these new additions to nwsapi.

Hope this clear some doubts out there, I consider this issue fixed and closed.

Thank you all for testing and reporting

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

SyntaxError: '>input:-webkit-autofill' is not a valid selector #116

SyntaxError: '>input:-webkit-autofill' is not a valid selector #116

alissalkvc commented Jun 13, 2024

dperini commented Jun 17, 2024

otaviomad commented Jun 18, 2024

dperini commented Jun 18, 2024

otaviomad commented Jun 18, 2024 •

edited

Loading

dperini commented Jun 23, 2024

alissalkvc commented Jun 27, 2024 •

edited

Loading

shpyo commented Jan 3, 2025

dperini commented Jan 4, 2025

SyntaxError: '>input:-webkit-autofill' is not a valid selector #116

SyntaxError: '>input:-webkit-autofill' is not a valid selector #116

Comments

alissalkvc commented Jun 13, 2024

dperini commented Jun 17, 2024

otaviomad commented Jun 18, 2024

dperini commented Jun 18, 2024

otaviomad commented Jun 18, 2024 • edited Loading

dperini commented Jun 23, 2024

alissalkvc commented Jun 27, 2024 • edited Loading

shpyo commented Jan 3, 2025

dperini commented Jan 4, 2025

otaviomad commented Jun 18, 2024 •

edited

Loading

alissalkvc commented Jun 27, 2024 •

edited

Loading