search

dperini / nwsapi

Fast CSS Selectors API Engine
MIT License
105 stars 36 forks source link

Issues with :focus-within #47

Closed jessarcher closed 4 months ago

jessarcher commented 3 years ago

Hi there!

I've run into a few issues using the :focus-within selector with nwsapi v2.2.0.

Firstly, the current regex doesn't match correctly:

':focus-within'.match(/^:(?:(hover|active|focus|focus-within))(.*)/i)

Result:

[
  ':focus-within',
  'focus',
  '-within'
]

Changing the regex as follows, fixes this issue:

':focus-within'.match(/^:(?:(hover|active|focus-within|focus))(.*)/i)

Result:

[
  ':focus-within',
  'focus-within',
  ''
]

However, I haven't PR'd this because now there appears to be a recursion issue as my node process consumes 100% CPU and does not end (at least not for as long as I have been willing to wait).

I am using nwsapi as via jest (with vue-test-utils), so I'm unsure whether this issue is with nwsapi or not, and I'm not sure how to further debug it.

Any help would be appreciated!

dperini commented 3 years ago

@jessarcher thank you for the heads-up on this. I have also been doing some experiment with a generic solution to the problem of partially duplicate names of pseudo-classes. In your case, you could try one of these:

':focus-within'.match(/(?:^:(?:hover|active|focus|focus-within)(?:\\b|$))(.*)/i)
':focus-within'.match(/(?:^:(?:hover|active|focus|focus-within)(?::|\\b|$))(.*)/i)

and check if the outcome satisfy your current needs. Then check that the RegExp still matches longer selectors with combined pseudo-classes.

samschurter commented 1 year ago

I've also run into issues with :focus-within and created a reproduction based on a different issue: https://codepen.io/samschurter/pen/GRXyEMe?editors=101

Is SyntaxError: ':focus-within' is not a valid selector the same error that caused this issue, or is this a different bug?

dperini commented 1 year ago

@jessarcher @samschurter the commit 2aa66fc18b45929f97a600b98c1fbd504f200fbe should have fixed that, I followed @jessarcher suggestion. I have been working on the :focus-visible pseudo-class collecting the various cases but since the resolution of that is non normative and open to interpretation I will need to discuss this and ensure nothing fails and it doesn't introduce new regressions. What do you think ? Should I try include that ':focus-visible' too ?

deizianens commented 4 months ago

I'm having same issues but with :focus-visible