[@emotion/sheet] Prevent any vendor-specific pseudo-selectors from throwing errors when speedy = true

[tkajtoch]

What:

This PR updates the error silencing logic to properly handle all vendor-specific pseudo-elements rather than just the hardcoded list.

Similarly to #3150, the updated logic uses a regex to detect any vendor prefixes including the more legacy ones for best compatibility (-moz-, -webkit-, -o-, -ms-). The difference is, however, that it carefully checks whether the error is actually SyntaxError and if it should be silenced following the CSSOM insertRule specification.

Why:

The list of silenced SyntaxError errors caused by unrecognized pseudo-classes and pseudo-elements is currently not exhaustive and, realistically speaking, will never be enough, as browsers evolve and people test various things all the time.

There were multiple PRs open in the past updating the regex to include previously missing pseudo-elements, but it wasn't enough.

Here are some of the PRs adding new pseudo-elements and pseudo-classes merged over the years:

• Add -ms-expand and -ms-reveal to ignored prefixes #2920
• Do not log failed rule insertions in the speedy mode for more vendor-prefixed pseudo-elements/classes #2393
• Do not log failed rule insertions in the speedy mode for vendor-prefixed pseudo-elements/classes #2149

How:

Instead of maintaining a static list of pseudo-elements to ignore, this PR changes the approach to this problem. The regex is simplified to recognize all vendor-prefixes pseudo-elements and pseudo-classes (/:-(webkit|moz|ms|o)-{/) and is combined with error type detection via instanceof SyntaxError following the specification, as well as additionally eliminates false-positives by checking whether the left curly bracket ({) exists in the rule string to ensure the thrown SyntaxError actually originates from an unrecognized vendor-specific thing.

This is needed due to the unstandardized error message when this kind of error happens:

• Chromium - Failed to execute 'insertRule' on 'CSSStyleSheet': Failed to parse the rule '%s'
• Firefox - An invalid or illegal string was specified
  • Firefox actually silently ignores some of the webkit pseudo-elements that match the ::-webkit-* pattern, but not :-webkit-* or any others to my knowledge 🤷🏻
• Safari - The string did not match the expected pattern.
• IE - ???

Unfortunately, JSDom doesn't throw any of these errors, and mocking this kind of behavior per-browser is quite tricky (and maybe pointless?) in the test environment. Let me know if you'd prefer to have some tests around this!

The change only affects development mode. The updated code takes ~67 bytes less after minification, but it changes basically nothing for a development-only code block.

Checklist:

• Documentation - N/A
• Tests - N/A
• Code complete
• Changeset

[changeset-bot]

🦋 Changeset detected

Latest commit: 6710b46

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@emotion/sheet	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.