Skip to content

Let a pseudo-class be followed by a quoted attribute selector - #180

Open
jdalton wants to merge 1 commit into
dperini:masterfrom
jdalton:fix/attribute-after-pseudo
Open

Let a pseudo-class be followed by a quoted attribute selector#180
jdalton wants to merge 1 commit into
dperini:masterfrom
jdalton:fix/attribute-after-pseudo

Conversation

@jdalton

@jdalton jdalton commented Sep 4, 2026

Copy link
Copy Markdown
Collaborator

The combinator inside the validator's pseudo-class pattern consumes the character after it, which is the '[' of a following attribute selector, so the whole selector is rejected. Fixes #175, which reaches jsdom users through @testing-library/user-event.

Detail, and how it was checked

The combinator alternative inside the validator's pseudo-class pattern is '[>+~][^>+~]', which consumes the character after the combinator. When that character is the '[' of an attribute selector, the attribute can no longer be parsed: the validator stops mid-selector and the whole selector is rejected. The top-level combinator pattern already uses a lookahead, so this makes the two agree.

"[class*='a' i]:not(:empty) + [class*='b']" is #175. It reaches jsdom users through @testing-library/user-event, which matches every stylesheet rule when checking pointer-events, so one such rule in a stylesheet breaks unrelated tests.

The error it raises names '[class*='a' i]:not(:empty)+[class*,,,b,,' as the offending selector, because emit() is passed the array of fragments the validator did match rather than the selector; String() then joins them with commas, which reads as corrupted quotes. It now names the selector.

Extracted from #167 as a standalone change: one file, applies to master on its own, and checked against a fixture to confirm it fixes what it describes and moves nothing else.

References: the spec, the browser source, and what each part was reasoned from

This patch applies to master on its own. The sixteen in this series were checked by cherry-picking them onto master one after another, in this order and in reverse, and all sixteen land without a conflict.

The combinator alternative inside the validator's pseudo-class pattern is '[>+~][^>+~]', which consumes the character after the combinator. When that character is the '[' of an attribute selector, the attribute can no longer be parsed: the validator stops mid-selector and the whole selector is rejected. The top-level combinator pattern already uses a lookahead, so this makes the two agree.
 "[class*='a' i]:not(:empty) + [class*='b']" is dperini#175. It reaches jsdom users through @testing-library/user-event, which matches every stylesheet rule when checking pointer-events, so one such rule in a stylesheet breaks unrelated tests.
 The error it raises names '[class*='a' i]:not(:empty)+[class*,,,b,,' as the offending selector, because emit() is passed the array of fragments the validator did match rather than the selector; String() then joins them with commas, which reads as corrupted quotes. It now names the selector.

References:

- Spec: https://drafts.csswg.org/selectors-4/#attribute-selectors — attribute selectors, including the case-sensitivity flag
- Spec: https://drafts.csswg.org/selectors-4/#attribute-case — the 'i' flag this pattern has to survive
- MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Closes dperini#175
@jdalton
jdalton force-pushed the fix/attribute-after-pseudo branch from 8437dbc to d590b98 Compare September 4, 2026 18:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Parse error: [attr i] flag + pseudo-class followed by quoted attribute selector

1 participant