Add support for CSS-in-JS styling with emotion

[thompsongl]

In advance of EUI's switch from Sass to CSS-in-JS, we want to add the Emotion library to Kibana and allow teams (cc// @clintandrewhall) to begin using its features.

Similar to how styled-components is handled, I anticipate adding @emotion/react to kbn-shared-ui-deps.
Other considerations (from EUI's proof-of-concept work):

• Babel configuration. Use @emotion/babel-preset-css-prop and enable either emotion or styled-components on a file-/directory-/app-basis.
  • Only a small number of teams use styled-components
  • Conflicts occur only when styled-components and @emotion/react are imported in the same file
• Jest testing. @emotion/jest enables deterministic style and className generation for otherwise hashed classes.
  • The snapshot serializer will only affect jest snapshot testing
  • Not aware of similar approaches currently in use for styled-components

EUI Timeline:

• A future release (TBD) of EUI will add @emotion/react to its peerDependencies.
• EUI will release a theme provider that allows for easy consumption of EUI theme tokens in JS. This will not be dependent on Emotion.
• EUI will being converting all components to CSS-in-JS, using Emotion as its implementation.

I am happy to contribute as much or as little code as is helpful/efficient for the ops team.

[elasticmachine]

Pinging @elastic/kibana-operations (Team:Operations)

[elasticmachine]

Pinging @elastic/eui-design (EUI)

[clintandrewhall]

This is a high priority for the Canvas solution, as we're targeting a change to how renderers work, (i.e. removing CSS class names from elements in workpads). We'll need this in place in 7.x, the sooner the better, to target 8.0.

[thompsongl]

Adding some more detailed information to see if any further questions or ideas get raised.

This PoC commit and PR lays the groundwork for adding Emotion to Kibana.

Using kbn-ui-shared-deps follows precedent set by styled-components and theme provider services. This method prevents any errors related to loading multiple versions/instances of Emotion.

The babel configuration likely requires the most input from the ops team. The overrides method in use is based on ideas originally from @mistic that allows for selectively using @emotion/babel-preset-css-prop instead of babel-plugin-styled-components. @spalger had the idea to invert the logic, activating @emotion/babel-preset-css-prop globally and opting in to babel-plugin-styled-components only in the few cases it is used. The latter makes sense to me given adoption of Emotion is likely to outgrow styled-components.

It's also important to note that this initial work to add Emotion is not dependent on anything from EUI. However, future work to enable EUI's in-progress theme provider will require that Emotion be in place before it can be used in Kibana.

[tylersmalley]

@thompsongl, thanks for creating the POC. Want to open that PR on the Kibana repository so we can raise any feedback here?

[thompsongl]

Want to open that PR on the Kibana repository so we can raise any feedback here?

Can do. I'll likely have something up this week.