elastic / elastic/eui

Update EUI Theme Provider to use `css` from `@emotion/react`

Open
#8,717 14 comments 2 reactions 0 assignees View on GitHub
emotion request stale-issue tech debt
Dominant language
TypeScript
Stars
6.4k
Forks
911
Avg merge
2d 11h
Merged PRs (30d)
65

Description

I am starting to add `nonce` attributes to Kibana's style tags, in an effort to eliminate `unsafe-inine` from our `style-src` Content Security Policy directive: https://github.com/elastic/kibana/issues/135469

Emotion can automatically apply the `nonce` when its cache is configured with one:
https://github.com/elastic/kibana/commit/bbd4a115f2c6b88045dfca84e796e958391ab3ef#diff-ad06d78885555a2bbada8ff595bf5b937b1ea3f80c0a875910346f1027025a7b

This is working well for many of our code paths, but Emotion by design does not use its cache for the `@emotion/css` package: https://github.com/emotion-js/emotion/issues/2409.

I've found that switching Kibana from the `@emotion/css` package to the `@emotion/react` package works as a drop-in replacement, but the latter respects the `nonce`.

```js
import { css } from `@emotion/css`
```
to
```js
import { css } from `@emotion/react`
```

-----

Once those findings were resolved, I came across this usage of `@emotion/css` within EUI. This usage is less straightforward than what I've found in Kibana, and I lack the confidence/expertise to make this change without guidance:

https://github.com/elastic/eui/blob/acc56997f45f9c2491111442e713da068f6c162d/packages/eui/src/services/theme/provider.tsx#L238-L241

What is the best way to remove `@emotion/css` here, in favor of a cache-respecting equivalent?

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.