nwsapi icon indicating copy to clipboard operation
nwsapi copied to clipboard
verified publisher icon dperini

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

Open alissalkvc opened this issue 1 year ago • 8 comments

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!

alissalkvc avatar Jun 13 '24 18:06 alissalkvc

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

dperini avatar Jun 17 '24 05:06 dperini

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

otaviomad avatar Jun 18 '24 13:06 otaviomad

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

dperini avatar Jun 18 '24 18:06 dperini

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

otaviomad avatar Jun 18 '24 19:06 otaviomad

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

dperini avatar Jun 23 '24 08:06 dperini

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?

alissalkvc avatar Jun 27 '24 15:06 alissalkvc

Any update on this? Is it a valid issue?

shpyo avatar Jan 03 '25 10:01 shpyo

@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

dperini avatar Jan 04 '25 04:01 dperini

All reported issues having the error similar to "is not a valid selectors" had a common cause. The nesting Regular Expression in the recently added :has() pseudo-class resolver was wrong. Closing this now.

dperini avatar Mar 18 '25 18:03 dperini