Skip to content

Commit

Permalink
Selector: Stop relying on CSS.supports( "selector(...)" )
Browse files Browse the repository at this point in the history
`CSS.supports( "selector(...)" )` has different semantics than selectors passed
to `querySelectorAll`. Apart from the fact that the former returns `false` for
unrecognized selectors and the latter throws, `qSA` is more forgiving and
accepts some invalid selectors, auto-correcting them where needed - for
example, mismatched brackers are auto-closed. This behavior difference is
breaking for many users.

To add to that, a recent CSSWG resolution made `:is()` & `:where()` the only
pseudos with forgiving parsing; browsers are in the process of making `:has()`
parsing unforgiving.

Taking all that into account, we go back to our previous try-catch approach
without relying on `CSS.supports( "selector(...)" )`. The only difference
is we detect forgiving parsing in `:has()` and mark the selector as buggy.

Fixes jquery/jquery#5194
Closes gh-493
Ref jquery/jquery#5098
Ref jquery/jquery#5206
Ref jquery/jquery#5207
Ref gh-486
Ref w3c/csswg-drafts#7676
  • Loading branch information
mgol authored Feb 14, 2023
1 parent 248b59c commit 15a1238
Showing 1 changed file with 23 additions and 51 deletions.
74 changes: 23 additions & 51 deletions src/sizzle.js
Original file line number Diff line number Diff line change
Expand Up @@ -356,27 +356,6 @@ function Sizzle( selector, context, results, seed ) {
}

try {

// `qSA` may not throw for unrecognized parts using forgiving parsing:
// https://drafts.csswg.org/selectors/#forgiving-selector
// like the `:has()` pseudo-class:
// https://drafts.csswg.org/selectors/#relational
// `CSS.supports` is still expected to return `false` then:
// https://drafts.csswg.org/css-conditional-4/#typedef-supports-selector-fn
// https://drafts.csswg.org/css-conditional-4/#dfn-support-selector
if ( support.cssSupportsSelector &&

// eslint-disable-next-line no-undef
!CSS.supports( "selector(:is(" + newSelector + "))" ) ) {

// Support: IE 11+
// Throw to get to the same code path as an error directly in qSA.
// Note: once we only support browser supporting
// `CSS.supports('selector(...)')`, we can most likely drop
// the `try-catch`. IE doesn't implement the API.
throw new Error();
}

push.apply( results,
newContext.querySelectorAll( newSelector )
);
Expand Down Expand Up @@ -672,29 +651,22 @@ setDocument = Sizzle.setDocument = function( node ) {
!el.querySelectorAll( ":scope fieldset div" ).length;
} );

// Support: Chrome 105+, Firefox 104+, Safari 15.4+
// Make sure forgiving mode is not used in `CSS.supports( "selector(...)" )`.
//
// `:is()` uses a forgiving selector list as an argument and is widely
// implemented, so it's a good one to test against.
support.cssSupportsSelector = assert( function() {
/* eslint-disable no-undef */

return CSS.supports( "selector(*)" ) &&

// Support: Firefox 78-81 only
// In old Firefox, `:is()` didn't use forgiving parsing. In that case,
// fail this test as there's no selector to test against that.
// `CSS.supports` uses unforgiving parsing
document.querySelectorAll( ":is(:jqfake)" ) &&

// `*` is needed as Safari & newer Chrome implemented something in between
// for `:has()` - it throws in `qSA` if it only contains an unsupported
// argument but multiple ones, one of which is supported, are fine.
// We want to play safe in case `:is()` gets the same treatment.
!CSS.supports( "selector(:is(*,:jqfake))" );

/* eslint-enable */
// Support: Chrome 105 - 110+, Safari 15.4 - 16.3+
// Make sure the the `:has()` argument is parsed unforgivingly.
// We include `*` in the test to detect buggy implementations that are
// _selectively_ forgiving (specifically when the list includes at least
// one valid selector).
// Note that we treat complete lack of support for `:has()` as if it were
// spec-compliant support, which is fine because use of `:has()` in such
// environments will fail in the qSA path and fall back to jQuery traversal
// anyway.
support.cssHas = assert( function() {
try {
document.querySelector( ":has(*,:jqfake)" );
return false;
} catch ( e ) {
return true;
}
} );

/* Attributes
Expand Down Expand Up @@ -963,14 +935,14 @@ setDocument = Sizzle.setDocument = function( node ) {
} );
}

if ( !support.cssSupportsSelector ) {
if ( !support.cssHas ) {

// Support: Chrome 105+, Safari 15.4+
// `:has()` uses a forgiving selector list as an argument so our regular
// `try-catch` mechanism fails to catch `:has()` with arguments not supported
// natively like `:has(:contains("Foo"))`. Where supported & spec-compliant,
// we now use `CSS.supports("selector(:is(SELECTOR_TO_BE_TESTED))")`, but
// outside that we mark `:has` as buggy.
// Support: Chrome 105 - 110+, Safari 15.4 - 16.3+
// Our regular `try-catch` mechanism fails to detect natively-unsupported
// pseudo-classes inside `:has()` (such as `:has(:contains("Foo"))`)
// in browsers that parse the `:has()` argument as a forgiving selector list.
// https://drafts.csswg.org/selectors/#relational now requires the argument
// to be parsed unforgivingly, but browsers have not yet fully adjusted.
rbuggyQSA.push( ":has" );
}

Expand Down

0 comments on commit 15a1238

Please sign in to comment.