Error parsing `.some_class_name:disabled::before`
mikeposh opened this issue · 7 comments
Summary
When running bbc-a11y on a Weather location page:
$ bbc-a11y http://www.bbc.co.uk/weather/2643743
we get the error:
Unexpected Error Error: Syntax error, unrecognized expression: .weathermap__timeslider__next:disabled::before
and the tool does not run.
There is a style with that selector in our maps code:
which compiles to .weathermap__timeslider__next:disabled::before
Expected Behaviour
The tool should finish.
Current Behaviour
The tools stops with this error:
Unexpected Error Error: Syntax error, unrecognized expression: .weathermap__timeslider__next:disabled::before
at Function.Sizzle.error (/Users/taylom34/.nvm/versions/node/v8.12.0/lib/node_modules/bbc-a11y/node_modules/jquery/dist/jquery.js:1541:8)
at Sizzle.tokenize (/Users/taylom34/.nvm/versions/node/v8.12.0/lib/node_modules/bbc-a11y/node_modules/jquery/dist/jquery.js:2193:11)
at Sizzle.compile (/Users/taylom34/.nvm/versions/node/v8.12.0/lib/node_modules/bbc-a11y/node_modules/jquery/dist/jquery.js:2587:12)
at Sizzle.select (/Users/taylom34/.nvm/versions/node/v8.12.0/lib/node_modules/bbc-a11y/node_modules/jquery/dist/jquery.js:2677:16)
at Sizzle (/Users/taylom34/.nvm/versions/node/v8.12.0/lib/node_modules/bbc-a11y/node_modules/jquery/dist/jquery.js:845:9)
at Function.Sizzle.matchesSelector (/Users/taylom34/.nvm/versions/node/v8.12.0/lib/node_modules/bbc-a11y/node_modules/jquery/dist/jquery.js:1504:9)
at Function.jQuery.filter (/Users/taylom34/.nvm/versions/node/v8.12.0/lib/node_modules/bbc-a11y/node_modules/jquery/dist/jquery.js:2846:22)
at winnow (/Users/taylom34/.nvm/versions/node/v8.12.0/lib/node_modules/bbc-a11y/node_modules/jquery/dist/jquery.js:2835:16)
at jQuery.fn.init.is (/Users/taylom34/.nvm/versions/node/v8.12.0/lib/node_modules/bbc-a11y/node_modules/jquery/dist/jquery.js:2885:12)
at getElementFontSizes (/Users/taylom34/.nvm/versions/node/v8.12.0/lib/node_modules/bbc-a11y/lib/standards/tests/textMustBeStyledWithUnitsThatAreResizableInAllBrowsers.js:43:28)
Possible Solution
Not sure. Upgrade to Sizzle?
Steps to Reproduce (for bugs)
$ bbc-a11y http://www.bbc.co.uk/weather/2643743
Context & Motivation
Trying to check a Weather location page with bbc-a11y.
Your Environment
- Version used: v2.2.5
- Operating System and version: macOS 10.13.6 (High Sierra)
- Link to your project:
I also see this issue when running the tool on https://www.bbc.co.uk
And a possibly related issue when running the tool on https://www.bbc.co.uk/news/uk-politics-46203425 for active 'Unexpected Error Error: Syntax error, unrecognized expression: unsupported pseudo: active'
Please could we also look at this when looking at this issue.
Does anyone have any ideas as to why this is causing an error?
I get a similar error when running the a11y tests against https://www.bbc.co.uk/newsround/46660407
Unexpected Error Error: Syntax error, unrecognized expression: unsupported pseudo: hover
at Function.Sizzle.error (/node_modules/jquery/dist/jquery.js:1541:8)
at PSEUDO (/node_modules/jquery/dist/jquery.js:1888:13)
at matcherFromTokens (/node_modules/jquery/dist/jquery.js:2437:44)
at Sizzle.compile (/node_modules/jquery/dist/jquery.js:2591:13)
at Sizzle.select (/node_modules/jquery/dist/jquery.js:2677:16)
at Sizzle (/node_modules/jquery/dist/jquery.js:845:9)
at Function.Sizzle.matchesSelector (/node_modules/jquery/dist/jquery.js:1504:9)
at Function.jQuery.filter (/node_modules/jquery/dist/jquery.js:2846:22)
at winnow (/node_modules/jquery/dist/jquery.js:2835:16)
at jQuery.fn.init.is (/node_modules/jquery/dist/jquery.js:2885:12)
From the sizzle docs:
CSS3
Sizzle supports virtually all CSS 3 Selectors, including escaped selectors (.foo\+bar), Unicode selectors, and results returned in document order. The only exceptions are those that would require additional DOM event listeners to keep track of the state of elements.
As such, the following pseudo-selectors are not supported:
:hover
:active
:visited, :link
Note: These CSS3 pseudo-selectors were unsupported prior to version 1.9:
:target
:root
:nth-last-child
:nth-of-type, :nth-last-of-type, :first-of-type, :last-of-type, :only-of-type
:lang()
They don't mention psuedo-elements in anything I can find though, but I'm assuming this is part of the problem.
Looks like this issue raised quite a while ago, so I'd presume will not be added to Sizzle in the future: jquery/sizzle#44
If a known valid usage, such as the example on the bbc-a11y documentation page, is known to possibly throw an error, then I'd say that's why they invented try...catch. (Note that the selector that Sizzle considers to be an error is in fact valid CSS.)
In this case you could effectively catch and ignore the error with this sort of code pattern:
try {
var ruleMatches = el.is(rules[ruleIndex].selectorText) || el.closest(rules[ruleIndex].selectorText).length
} catch (e) {
if ( !e.message.match(/(unrecognized expression|pseudo-selector)/) ) {
throw e;
}
}but to fix the problem generally, you would have to either wrap every call that might invoke Sizzle with a try...catch or else modify the interface to jQuery itself to catch and ignore those errors centrally. The latter would be more robust, but does anyone really want to effectively fork jQuery?
Hi @mikeposh, @greenc05, @IainMiddlehurst,
I've just released v2.4.1 which should fix this issue. Please re-open this issue if not.
Thanks.