[EuiProgress] `-moz-progress-bar` style throws an error during `insertRule` in non-firefox browsers

[tkajtoch]

Describe the bug

When rendering EuiProgress in browsers other than Firefox, a console error is printed out due to the :-moz-progress-bar pseudoselector being unrecognized. This happens when insertRule is used to insert CSS into <style> tags, so only when speedy mode is enabled in Emotion.

Similar issues have been fixed directly in Emotion by silencing out the error when an unrecognized selector of this kind is detected. The current implementation misses a few pseudoselectors, though, and this one got left out. See emotion-js/emotion#2144 for more information.

Impact and severity

This error doesn't affect the runtime or user in any way. It does, however, print an error to the console, which - when logged by observability software - can cause unwanted entries.

Environment and versions

• EUI version: 107.0.0
• React version: N/A
• Kibana version (if applicable): N/A
• Browser: Chromium-based browsers
• Operating System: N/A

Minimum reproducible sandbox

TBD; codesandbox has technical issues right now

To Reproduce

1. Enable speedy: true in Emotion, e.g., by passing it to createCache
2. Render <EuiProgress />
3. Open console and see the error being printed out

Expected behavior

Browser-specific pseudoselectors should never throw errors when inserted in browsers they don't target.

Reported by

@christineweng

[tkajtoch]

Moving this to in progress since I have a fix locally and need to open a PR to Emotion.

Essentially, @emotion/sheet checks whether the error thrown by insertRule includes one of the "allowlisted" pseudoselectors, and if so, it silences the error. That check doesn't currently include -moz-progress-bar.

[tkajtoch]

I opened a PR in Emotion's repo that should address this specific issue once for all - emotion-js/emotion#3350. I'm going to mark this issue as blocked since it's out of our control at this point.

[tkajtoch]

Initially, when first investigating this issue on October 16th, I prepared a fix based on extending the regex inside @emotion/sheet by -moz-progress-bar. However, while navigating through various other EUI documentation pages a few days later, I noticed that there are more pseudo-elements we use that cause the same behavior, and the fix needs to be more global.

The original time estimate didn't change - the solution is based on reading the insertRule spec, simplifying the original regex, and adding more checks around it to ensure we only silence the errors related to unrecognized vendor-specific pseudo-elements and pseudo-classes. Check out the PR for more information.