:has(> child) is not supported

[c-harding]

: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({})).

[kizu]

+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]

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]

Is there any work around for this?

[michaelficarra]

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