Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

:has(> child) is not supported #132

Open
c-harding opened this issue Oct 12, 2022 · 4 comments · May be fixed by #133 or #145
Open

:has(> child) is not supported #132

c-harding opened this issue Oct 12, 2022 · 4 comments · May be fixed by #133 or #145

Comments

@c-harding
Copy link

:has() expressions do not work with a leading >. This is included as the first example is the linked docs for :has from the readme (https://drafts.csswg.org/selectors-4/Overview.bs#relational).

I am trying to match the following code, specifically any call to router.push(router.resolve(...)).

    function onClick() {
      return router.push(
        router.resolve({
          name: "page1",
        })
      );
    }

This means that I need to check both descent paths of the CallExpression. I would like to match the call expression containing both of these children:

CallExpression > MemberExpression.callee[object.name=router][property.name=push] and CallExpression > CallExpression.arguments > MemberExpression.callee[object.name=router][property.name=resolve]

Ideally this could be achieved by

CallExpression:has(
  > MemberExpression.callee[object.name=router][property.name=push]
):has(
  > CallExpression.arguments > MemberExpression.callee[object.name=router][property.name=resolve]
)

If the leading > inside the :has() are omitted, this selector is too broad, also matching for example router.push(otherFunction(router.resolve({})).

@richsilv richsilv linked a pull request Dec 6, 2022 that will close this issue
@kizu
Copy link

kizu commented Jan 24, 2023

+1 for this — having a direct child combinator would allow for both reducing the scope, and improving the selector's performance, as quite often you'd want to check just the immediate child, without checking anything deeper.

@moniuch
Copy link

moniuch commented Feb 24, 2023

I am trying to match a function with specific name:

function shouldNotMatch() {
  function shouldMatch() {
    
  }
}

Without a direct child modifier working properly the outer function will match because it contains identifier with a specific name. Whereas it should not match, because this identifier belongs to the descendant.

@jggsus88
Copy link

Is there any work around for this?

@michaelficarra
Copy link
Member

@jggsus88 On the right, under "Development", it lists associated PRs.

@c-harding c-harding linked a pull request Mar 26, 2024 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
5 participants