Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
+23 −2
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6705d97
fix: detect all `insertRule` errors caused by unrecognized pseudo-sel…
tkajtoch Oct 28, 2025
6710b46
chore: add changeset
tkajtoch Oct 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/hungry-rules-lick.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@emotion/sheet': patch
---

Prevent vendor-specific pseudo-elements from throwing errors when speedy = true
20 changes: 18 additions & 2 deletions packages/sheet/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,10 +144,26 @@ export class StyleSheet {
// the big drawback is that the css won't be editable in devtools
sheet.insertRule(rule, sheet.cssRules.length)
} catch (e) {
/*
Unrecognized vendor-specific pseudo-selectors like -moz-*
or -webkit-* will throw a SyntaxError when parsed during
the insertRule() call. Since the failing selector(s) target
a different browser, these errors are safe to ignore.

All browsers seem to have slightly different error messages around
this case, making the detection just a little bit more difficult.
SyntaxError errors aren't surfacing frequently.
As long as the rule includes a left curly bracket marking
the beginning of a declaration block AND a vendor-specific
pseudo-selector, we can be almost certain that it is the reason
for the thrown SyntaxError.
*/
if (
isDevelopment &&
!/:(-moz-placeholder|-moz-focus-inner|-moz-focusring|-ms-input-placeholder|-moz-read-write|-moz-read-only|-ms-clear|-ms-expand|-ms-reveal){/.test(
rule
!(
e instanceof SyntaxError &&
/:-(webkit|moz|ms|o)-/.test(rule) &&
rule.indexOf('{') !== -1
)
) {
console.error(
Expand Down
Loading