Update EUI Theme Provider to use `css` from `@emotion/react`
- 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
Assessment
This issue has not been assessed yet.