Enable CSS-in-JS styling with emotion

package.json

@@ -113,6 +113,7 @@
     "@elastic/safer-lodash-set": "link:bazel-bin/packages/elastic-safer-lodash-set/npm_module",
     "@elastic/search-ui-app-search-connector": "^1.5.0",
     "@elastic/ui-ace": "0.2.3",
+    "@emotion/react": "^11.1.5",
     "@hapi/boom": "^9.1.1",
     "@hapi/cookie": "^11.0.2",
     "@hapi/good-squeeze": "6.0.0",
@@ -440,6 +441,8 @@
     "@elastic/eslint-plugin-eui": "0.0.2",
     "@elastic/github-checks-reporter": "0.0.20b3",
     "@elastic/makelogs": "^6.0.0",
+    "@emotion/babel-preset-css-prop": "^11.2.0",
+    "@emotion/jest": "^11.2.0",
     "@istanbuljs/schema": "^0.1.2",
     "@jest/reporters": "^26.6.2",
     "@kbn/babel-code-parser": "link:bazel-bin/packages/kbn-babel-code-parser/npm_module",

packages/kbn-babel-preset/webpack_preset.js

@@ -6,6 +6,12 @@
  * Side Public License, v 1.
  */
 
+const usesStyledComponents = [
+  /src[\/\\]plugins[\/\\](data|kibana_react)[\/\\]/,
+  /x-pack[\/\\]plugins[\/\\](apm|beats_management|fleet|infra|lists|observability|osquery|security_solution|uptime)[\/\\]/,
+  /x-pack[\/\\]test[\/\\]plugin_functional[\/\\]plugins[\/\\]resolver_test[\/\\]/,
+];
+
 module.exports = () => {
   return {
     presets: [
@@ -21,14 +27,6 @@ module.exports = () => {
       ],
       require('./common_preset'),
     ],
-    plugins: [
-      [
-        require.resolve('babel-plugin-styled-components'),
-        {
-          fileName: false,
-        },
-      ],
-    ],
     env: {
       production: {
         plugins: [
@@ -42,5 +40,29 @@ module.exports = () => {
         ],
       },
     },
+    overrides: [
+      {
+        include: usesStyledComponents,
+        plugins: [
+          [
+            require.resolve('babel-plugin-styled-components'),
+            {
+              fileName: false,
+            },
+          ],
+        ],
+      },
+      {
+        exclude: usesStyledComponents,
+        presets: [
+          [
+            require.resolve('@emotion/babel-preset-css-prop'),
+            {
+              labelFormat: '[local]',
+            },
+          ],
+        ],
+      },
+    ],
   };
 };

packages/kbn-crypto/BUILD.bazel

@@ -37,6 +37,7 @@ TYPES_DEPS = [
   "@npm//@types/node",
   "@npm//@types/node-forge",
   "@npm//@types/testing-library__jest-dom",
+  "@npm//@emotion/react",
 ]
 
 DEPS = SRC_DEPS + TYPES_DEPS

packages/kbn-storybook/lib/default_config.ts

@@ -6,8 +6,10 @@
  * Side Public License, v 1.
  */
 
+import * as path from 'path';
 import { StorybookConfig } from '@storybook/core/types';
 
+const toPath = (_path: string) => path.join(process.cwd(), _path);
 export const defaultConfig: StorybookConfig = {
   addons: ['@kbn/storybook/preset', '@storybook/addon-a11y', '@storybook/addon-essentials'],
   stories: ['../**/*.stories.tsx'],
@@ -22,6 +24,19 @@ export const defaultConfig: StorybookConfig = {
 
     config.node = { fs: 'empty' };
 
-    return config;
+    const emotion11CompatibleConfig = {
+      ...config,
+      resolve: {
+        ...config.resolve,
+        alias: {
+          ...config.resolve?.alias,
+          '@emotion/core': toPath('node_modules/@emotion/react'),
+          '@emotion/styled': toPath('node_modules/@emotion/styled'),
+          'emotion-theming': toPath('node_modules/@emotion/react'),
+        },
+      },
+    };
+
+    return emotion11CompatibleConfig;
   },
 };

packages/kbn-test/jest-preset.js

@@ -65,6 +65,7 @@ module.exports = {
   snapshotSerializers: [
     '<rootDir>/src/plugins/kibana_react/public/util/test_helpers/react_mount_serializer.ts',
     '<rootDir>/node_modules/enzyme-to-json/serializer',
+    '<rootDir>/node_modules/@emotion/jest/serializer',
   ],
 
   // The test environment that will be used for testing

packages/kbn-ui-shared-deps/entry.js

@@ -18,6 +18,7 @@ export const KbnI18n = require('@kbn/i18n');
 export const KbnI18nAngular = require('@kbn/i18n/angular');
 export const KbnI18nReact = require('@kbn/i18n/react');
 export const Angular = require('angular');
+export const EmotionReact = require('@emotion/react');
 export const Moment = require('moment');
 export const MomentTimezone = require('moment-timezone/moment-timezone');
 export const KbnMonaco = require('@kbn/monaco');

packages/kbn-ui-shared-deps/index.js

@@ -22,6 +22,7 @@ exports.externals = {
   '@kbn/i18n': '__kbnSharedDeps__.KbnI18n',
   '@kbn/i18n/angular': '__kbnSharedDeps__.KbnI18nAngular',
   '@kbn/i18n/react': '__kbnSharedDeps__.KbnI18nReact',
+  '@emotion/react': '__kbnSharedDeps__.EmotionReact',
   jquery: '__kbnSharedDeps__.Jquery',
   moment: '__kbnSharedDeps__.Moment',
   'moment-timezone': '__kbnSharedDeps__.MomentTimezone',

src/core/public/chrome/ui/header/collapsible_nav.tsx

@@ -22,6 +22,7 @@ import { groupBy, sortBy } from 'lodash';
 import React, { Fragment, useRef } from 'react';
 import useObservable from 'react-use/lib/useObservable';
 import * as Rx from 'rxjs';
+import { css } from '@emotion/react';
 import { ChromeNavLink, ChromeRecentlyAccessedHistoryItem } from '../..';
 import { AppCategory } from '../../../../types';
 import { InternalApplicationStart } from '../../../application/types';
@@ -113,6 +114,10 @@ export function CollapsibleNav({
     });
   };
 
+  const styles = css`
+    background: coral;
+  `;
+
   return (
     <EuiCollapsibleNav
       data-test-subj="collapsibleNav"
@@ -123,6 +128,7 @@ export function CollapsibleNav({
       isOpen={isNavOpen}
       isDocked={isLocked}
       onClose={closeNav}
+      css={styles}
     >
       {customNavLink && (
         <Fragment>
@@ -187,6 +193,7 @@ export function CollapsibleNav({
             color="text"
             gutterSize="none"
             size="s"
+            css={{ background: 'coral' }}
           />
         </EuiCollapsibleNavGroup>
       </EuiFlexItem>

src/plugins/discover/public/application/components/discover_grid/discover_grid.tsx

@@ -7,6 +7,7 @@
  */
 
 import React, { useCallback, useMemo, useState } from 'react';
+import { css } from '@emotion/react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import './discover_grid.scss';
 import {
@@ -133,8 +134,12 @@ export interface DiscoverGridProps {
   useNewFieldsApi: boolean;
 }
 
+const styles = css`
+  background: coral;
+`;
+
 export const EuiDataGridMemoized = React.memo((props: EuiDataGridProps) => {
-  return <EuiDataGrid {...props} />;
+  return <EuiDataGrid {...props} css={styles} />;
 });
 
 export const DiscoverGrid = ({

test/plugin_functional/plugins/kbn_tp_custom_visualizations/tsconfig.json

@@ -6,7 +6,8 @@
     "types": [
       "node",
       "jest",
-      "react"
+      "react",
+      "@emotion/react/types/css-prop"
     ]
   },
   "include": [

test/tsconfig.json

@@ -2,7 +2,7 @@
   "extends": "../tsconfig.base.json",
   "compilerOptions": {
     "incremental": false,
-    "types": ["node"]
+    "types": ["node", "@emotion/react/types/css-prop"]
   },
   "include": [
     "**/*",

tsconfig.base.json

@@ -5,7 +5,10 @@
       // Allows for importing from `kibana` package for the exported types.
       "kibana": ["./kibana"],
       "kibana/public": ["src/core/public"],
-      "kibana/server": ["src/core/server"]
+      "kibana/server": ["src/core/server"],
+      "@emotion/core": [
+        "typings/@emotion"
+      ],
     },
     // Support .tsx files and transform JSX into calls to React.createElement
     "jsx": "react",
@@ -54,7 +57,8 @@
       "jest",
       "flot",
       "jest-styled-components",
-      "@testing-library/jest-dom"
+      "@testing-library/jest-dom",
+      "@emotion/react/types/css-prop"
     ]
   }
 }

typings/@emotion/index.d.ts

@@ -0,0 +1,11 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+// Stub @emotion/core
+// Remove when @storybook has moved to @emotion v11
+export {};

x-pack/plugins/canvas/public/components/workpad_config/workpad_config.component.tsx

@@ -7,6 +7,7 @@
 
 import React, { FunctionComponent, useState } from 'react';
 import PropTypes from 'prop-types';
+import { css as emotionCss } from '@emotion/react';
 import {
   EuiFieldText,
   EuiFieldNumber,
@@ -69,10 +70,14 @@ export const WorkpadConfig: FunctionComponent<Props> = (props) => {
     },
   ];
 
+  const styles = emotionCss`
+    background: coral;
+  `;
+
   return (
     <div>
       <div className="canvasLayout__sidebarHeaderWorkpad">
-        <EuiTitle size="xs">
+        <EuiTitle size="xs" css={styles}>
           <h4>{strings.getTitle()}</h4>
         </EuiTitle>
       </div>
@@ -138,7 +143,7 @@ export const WorkpadConfig: FunctionComponent<Props> = (props) => {
 
       <VarConfig variables={variables} setVariables={setWorkpadVariables} />
 
-      <div className="canvasSidebar__expandable">
+      <div className="canvasSidebar__expandable" css={{ color: 'coral' }}>
         <EuiAccordion
           id="accordion-global-css"
           className="canvasSidebar__accordion"
@@ -152,6 +157,7 @@ export const WorkpadConfig: FunctionComponent<Props> = (props) => {
               <span>{strings.getGlobalCSSLabel()}</span>
             </EuiToolTip>
           }
+          css={{ color: 'coral' }}
         >
           <div className="canvasSidebar__accordionContent">
             <EuiTextArea