elastic / elastic/eui

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

Open
#9,120 4 comments 0 reactions 0 assignees View on GitHub
blocked emotion stale-issue
Dominant language
TypeScript
Stars
6.4k
Forks
911
Avg merge
2d 11h
Merged PRs (30d)
65

Description

**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 `` 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 https://github.com/emotion-js/emotion/issues/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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.