2.2.4 => 2.2.5 === unknown pseudo-class selector ':has(span)' [VIA jsdom, using pnpm]

[dmgauthier]

Hi there,

As a jsdom dependency, nwsapi has gone from 2.2.2 to 2.2.7. We began to have JEST+RTL failures since the has pseudo-class is broken.

Some local testing with pnpm overrides helped me pinpoint that the breaking changes seems to have happen between 2.2.4 and 2.2.5

The current workaround is to stick to 2.2.2 or 2.2.4 using the pnpm overrides. Since 2.2.7 is broken on our side.

Best regards

[jakewtaylor]

+1, I've been seeing a similar issue. Having been doing some major dependency upgrades throughout a monorepo, and discovered this package deep in a tree through vitest -> jsdom -> nwsapi.

2.2.7 seems to consistently throw this error:

SyntaxError: missing ) after argument list
 ❯ compile ../../node_modules/nwsapi/src/nwsapi.js:760:17
 ❯ match_collect ../../node_modules/nwsapi/src/nwsapi.js:1339:16
 ❯ Object._matches [as match] ../../node_modules/nwsapi/src/nwsapi.js:1394:35
 ❯ exports.matchesDontThrow ../../node_modules/jsdom/lib/jsdom/living/helpers/selectors.js:29:36
 ❯ matches ../../node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:172:10
 ❯ ../../node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:109:18
 ❯ handleSheet ../../node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:100:1

I dug into the source of nwsapi.js:760:17 and found the following snippet;

factory = Function('s', F_INIT + '{' + head + vars + ';' + loop + 'return r;}')(Snapshot);

which seems to be causing the error.

In my case, it looks like it was something to do with some weird tailwind classes making their way into that, which seemed to break all kinds of formatting - these were weird classes like [[data-checked=true]_&]:bg-red-500 for example, which get escaped by tailwind weirdly anyway, so I imagine there's an issue around the parsing somewhere.

Here's one example of what was being passed as the 2nd param to Function above (which, as I write, I realise does have a :has, actually, so maybe tailwind's escaping has nothing to do with it...?);

"use strict";return function Resolver(c,f,x,r){var e,n,o;e=c;if(s.match("[data-checked=true],.\[\&\",e)){if((/(^|\s)\[\&\:has\(\[data-checked\=true\]\)\]\:bg-blue-100(\s|$)/.test(e.getAttribute("class")))){r=true;}}return r;}

You can clearly see that's invalid syntax, but I don't have capacity to look any further into understanding what on earth is going on here. 😆

I've solved it by setting a yarn resolution to "nwsapi": "2.2.4", which has fixed everything for me. Now to continue with error whack-a-mole.... got to love housekeeping!

[jakewtaylor]

Also realised, this maybe a dupe of #90?

[dmgauthier]

Also realised, this maybe a dupe of #90?

On our side, while playing in the dependencies overrides, I ended up having the specific error mentionned there ☝️ (I think it was while using "nwsapi": "2.2.6" ?). But this seems to have been fixed in the more recent patch.

This current issue is not related to the same error AFAIK.

[nio-p]

Same here.

#95 (comment)

"nwsapi": "2.2.4" works fine. but ^2.2.5 doesn't work.

@dperini

Hello,
#99 (comment)

I see in the above link you are releasing v2.2.8, will this version solve the has problem?

Thanks,

[talor-hammond]

nwsapi was a sub-dependency of jsdom, so I switched my test environment to happy-dom instead of overriding nwsapi [ymmv]

[hugotox]

fwiw 2.2.4 also breaks for me when testing a component with tailwind and shadcn, 2.2.2. it's the only version that works