Let a pseudo-class be followed by a quoted attribute selector - #180
Open
jdalton wants to merge 1 commit into
Open
Let a pseudo-class be followed by a quoted attribute selector#180jdalton wants to merge 1 commit into
jdalton wants to merge 1 commit into
Conversation
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
force-pushed
the
fix/attribute-after-pseudo
branch
from
September 4, 2026 18:00
8437dbc to
d590b98
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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.