Migrate styles from styled-components to emotion

[thompsongl]

#98157 solves the immediate need of enabling @emotion/react in Kibana for the purposes of EUI and (more immediately) Canvas. We will want to convert components currently using styled-component to the emotion ecosystem, but there is further discussion to be had on the correct approach. For instance, a 1:1 conversion is possible from styled-components to @emotion/styled; at present this lib is not required for EUI or Canvas but could be added later to support conversions and simplify the babel configuration.
EUI intends to use the css prop API, not the styled API, and the team will have supporting documentation for such when EUI component conversion begin.

The list of plugins that currently use styled-components is currently maintained here:

kibana/packages/kbn-dev-utils/src/babel.ts

Lines 50 to 59 in 447e80e

	/**
	* Synchronized regex list of files that use `styled-components`.
	* Used by `kbn-babel-preset` and `elastic-eslint-config-kibana`.
	*/
	export const USES_STYLED_COMPONENTS = [
	/packages[\/\\]kbn-ui-shared-deps[\/\\]/,
	/src[\/\\]plugins[\/\\](data|kibana_react)[\/\\]/,
	/x-pack[\/\\]plugins[\/\\](apm|beats_management|cases|fleet|infra|lists|observability|osquery|security_solution|timelines|uptime)[\/\\]/,
	/x-pack[\/\\]test[\/\\]plugin_functional[\/\\]plugins[\/\\]resolver_test[\/\\]/,
	];

[thompsongl]

@smith likely has insight on the current state of styled-component use
@cqliu1 and @clintandrewhall are currently exploring emotion in Canvas

[smith]

It looks like there's about a 50/50 split between using the typed euiStyled from kibanaReact and just using import styled from 'styled-components'.

If we could get more usage of euiStyled it might make it easier to make a change all in one place.

[elasticmachine]

Pinging @elastic/kibana-design (Team:Kibana-Design)

[tsullivan]

@elastic/kibana-design I think this issue isn't getting enough attention.

• Based on the git log packages/kbn-babel-preset/styled_components_files.js, teams have not been chopping away at this migration. That file is not steadily shrinking, it is slightly growing over time.
• Typically, an issue like this would have a task list that calls out the areas that need to be fixed, and ping the team that owns the component for each call-out.

Also:

For instance, a 1:1 conversion is possible from styled-components to @emotion/styled

I'm confused by this. After looking at the FAQ (here), I learned that a module which is tooled to support styled-components can only be converted to use @emotion/css, but the preferred way to tool our components is to use @emotion/react, but that requires a change in the plugin's babel settings. So I don't know what that phrase I quoted is supposed to mean.

[MichaelMarcialis]

CCing @elastic/eui-team.

[cee-chen]

For instance, a 1:1 conversion is possible from styled-components to @emotion/styled

I'm confused by this. After looking at the FAQ (here), I learned that a module which is tooled to support styled-components can only be converted to use @emotion/css, but the preferred way to tool our components is to use @emotion/react, but that requires a change in the plugin's babel settings. So I don't know what that phrase I quoted is supposed to mean.

For migrations over timing (e.g. only migrating 1 instance of styled-components to Emotion), a 1:1 conversion is likely not possible due to the babel plugin setup you mentioned. A 1:1 conversion could theoretically be more possible if the listed plugin were willing to migrate all styled component usages at once to @emotion/styled. Which would be by necessity a larger effort/single PR (depending on number of usages), but shouldn't be overwhelmingly impossible.

[JasonStoltz]

@tsullivan I think we really just need someone to own this effort and commit some time to coordinating it. As you mention, we'll need a clearer call to action that makes the ask more explicit and establishes some expectations.

[elasticmachine]

Pinging @elastic/appex-sharedux (Team:SharedUX)