SyntaxError: unknown pseudo-class selector ':where(<label>'

[jordan-r-jenkins]

Dependencies:
[email protected]
[email protected]
[email protected]
@testing-library/[email protected]

Our application has the following CSS selector:

  :has(
      :where(
          ${InternalUseOnlyInput},
            ${InternalUseOnlyTextArea},
            ${InternalUseOnlySelect},
            ${InternalUseOnlyFileInput}
            [type="file"],
          ${InternalUseOnlyRangeInput},
        ):disabled
    )
    :where(${InternalUseOnlyLabel}, ${InternalUseOnlyHint}) {
    color: ${textColorTertiary};
    cursor: not-allowed;
  }

nwsapi throws this error message:

SyntaxError: unknown pseudo-class selector ':where(<label>'

Here is the sequence that creates this error:

• At nwsapi.js:1009, the selector above has a regex match with Patterns.logicalsel performed on it, and returns an array of length 5 named match. The contents are the following:

0. ":has( :where( <input>,<text area>,<select>,<file input>,[type=\"file\"],<range input> ):disabled ) :where(<label>,<hint>)"
1. "has"
2. ":where( <input>,<text area>,<select>,<file input>,[type=\"file\"],<range input> ):disabled ) :where(<label>,<hint>"
3. undefined
4. ""

• match[2] is used starting at nwsapi.js:1024.

Notice how match[2] is missing a closing parentheses? So it seems the Patterns.logicalsel = /^:(?:(is|where|matches|not|has)(?:\x28\s?([([^\[\]])]|[^()\[\]]|.*)\s?\x29))/i does not correctly match the selector above.

[Jikodis]

It seems based on this line that the :where pseudo-class selector is supported: https://github.com/dperini/nwsapi/blob/master/src/nwsapi.js#L1013

It is not on the list of supported selectors here however, but I am guessing that list needs to be updated: https://github.com/dperini/nwsapi/wiki/CSS-supported-selectors

I think the real issue lies in this line: https://github.com/dperini/nwsapi/blob/master/src/nwsapi.js#L81

The regex does not account for nested pseudo-classes. In code example above, there is a :where nested in the :has, hence the issue.

REGEX does not seem well suited to address the possibility of nested pseudo-class selectors. One can't know how deep one might nest their selectors.

[asamuzaK]

There are two issues related to this.

One is: :is() and :where() takes <forgiving-selector-list>.
Therefore, no error should be thrown for invalid selectors.
Another one is: as @Jikodis pointed out, nesting selectors cannot be expressed correctly using regular expressions, but nwsapi does not take this into account.
To be honest, nwsapi can handle :not(:is(:not(.foo))), but not :not(:is(:not(.foo))):not(.bar).

Both were noted in #28, but that issue was closed without being fixed.