[Canvas] Switch from style-it to emotion

package.json

@@ -398,7 +398,6 @@
     "source-map-support": "^0.5.19",
     "stats-lite": "^2.2.0",
     "strip-ansi": "^6.0.0",
-    "style-it": "^2.1.3",
     "styled-components": "^5.1.0",
     "suricata-sid-db": "^1.0.2",
     "symbol-observable": "^1.2.0",

packages/kbn-test/src/jest/babel_transform.js

@@ -20,5 +20,6 @@ module.exports = babelJest.createTransformer({
         },
       },
     ],
+    require.resolve('@emotion/babel-preset-css-prop'),
   ],
 });

x-pack/plugins/canvas/public/components/element_content/element_content.tsx

@@ -7,8 +7,7 @@
 
 import React from 'react';
 import { omitBy, isNil } from 'lodash';
-// @ts-expect-error Untyped library
-import Style from 'style-it';
+import { css } from '@emotion/react';
 
 import { ExpressionRenderer } from 'src/plugins/expressions';
 import { getType } from '@kbn/interpreter';
@@ -56,9 +55,9 @@ export const ElementContent = (props: Props) => {
 
   const containerStyle = omitBy(renderable.containerStyle, isNil);
 
-  return Style.it(
-    renderable.css,
+  return (
     <div
+      css={css(renderable.css)}
       // TODO: 'canvas__element' was added for BWC, It can be removed after a while
       className={'canvas__element canvasElement'}
       style={{ ...containerStyle, width, height }}
@@ -74,7 +73,6 @@ export const ElementContent = (props: Props) => {
           renderFn={renderFunction.render}
           reuseNode={renderFunction.reuseDomNode}
           config={renderable.value}
-          css={renderable.css} // This is an actual CSS stylesheet string, it will be scoped by RenderElement
           width={width}
           height={height}
           handlers={handlers}

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

@@ -7,8 +7,7 @@
 
 import React, { FC, useEffect } from 'react';
 import PropTypes from 'prop-types';
-// @ts-expect-error untyped library
-import Style from 'style-it';
+import { css } from '@emotion/react';
 // @ts-expect-error untyped local
 import { WorkpadPage } from '../workpad_page';
 import { RoutingLink } from '../routing';
@@ -33,9 +32,12 @@ export const ExportApp: FC<Props> = ({ workpad, selectedPageIndex, initializeWor
         <div className="canvasLayout__stageHeader">
           <RoutingLink to={`/workpad/${id}`}>Edit Workpad</RoutingLink>
         </div>
-        {Style.it(
-          workpad.css,
-          <div className="canvasExport__stageContent" data-shared-items-count={pageElementCount}>
+        {
+          <div
+            css={css(workpad.css)}
+            className="canvasExport__stageContent"
+            data-shared-items-count={pageElementCount}
+          >
             <WorkpadPage
               isSelected
               key={activePage.id}
@@ -46,7 +48,7 @@ export const ExportApp: FC<Props> = ({ workpad, selectedPageIndex, initializeWor
               unregisterLayout={() => {}}
             />
           </div>
-        )}
+        }
       </div>
     </div>
   );

x-pack/plugins/canvas/public/components/export_app/export_app.test.tsx

@@ -10,10 +10,6 @@ import { mount } from 'enzyme';
 import { ExportApp } from './export_app.component';
 import { CanvasWorkpad } from '../../../types';
 
-jest.mock('style-it', () => ({
-  it: (css: string, Component: any) => Component,
-}));
-
 jest.mock('../workpad_page', () => ({
   WorkpadPage: (props: any) => <div>Page</div>,
 }));

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

@@ -20,8 +20,6 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
-// @ts-expect-error untyped dependency
-import Style from 'style-it';
 import { ConfirmModal } from '../confirm_modal';
 import { RoutingLink } from '../routing';
 import { WorkpadRoutingContext } from '../../routes/workpad';
@@ -178,7 +176,7 @@ export class PageManager extends Component<Props, State> {
   };
 
   renderPage = (page: CanvasPage, i: number) => {
-    const { isWriteable, selectedPage, workpadCSS } = this.props;
+    const { isWriteable, selectedPage } = this.props;
     const pageNumber = i + 1;
 
     return (
@@ -201,12 +199,9 @@ export class PageManager extends Component<Props, State> {
             <WorkpadRoutingContext.Consumer>
               {({ getUrl }) => (
                 <RoutingLink to={getUrl(pageNumber)}>
-                  {Style.it(
-                    workpadCSS,
-                    <div>
-                      <PagePreview height={100} page={page} onRemove={this.onConfirmRemove} />
-                    </div>
-                  )}
+                  <div>
+                    <PagePreview height={100} page={page} onRemove={this.onConfirmRemove} />
+                  </div>
                 </RoutingLink>
               )}
             </WorkpadRoutingContext.Consumer>

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

@@ -6,8 +6,7 @@
  */
 
 import React, { FC } from 'react';
-// @ts-expect-error
-import Style from 'style-it';
+import { css } from '@emotion/react';
 // @ts-expect-error
 import { WorkpadPage } from '../workpad_page';
 import { Fullscreen } from '../fullscreen';
@@ -125,9 +124,9 @@ export const Workpad: FC<Props> = ({
               : {};
 
             // NOTE: the data-shared-* attributes here are used for reporting
-            return Style.it(
-              workpadCss || DEFAULT_WORKPAD_CSS,
+            return (
               <div
+                css={css(workpadCss || DEFAULT_WORKPAD_CSS)}
                 className={`canvasWorkpad ${isFullscreenProp ? 'fullscreen' : ''}`}
                 style={fsStyle}
                 data-shared-items-count={totalElementCount}

x-pack/plugins/canvas/shareable_runtime/api/shareable.test.tsx

@@ -37,8 +37,10 @@ describe('Canvas Shareable Workpad API', () => {
     });
 
     expect(wrapper.html()).toMatchSnapshot();
+
     share();
     await tick();
+
     expect(wrapper.html()).toMatchSnapshot();
   });
 

x-pack/plugins/canvas/shareable_runtime/components/rendered_element.tsx

@@ -6,8 +6,7 @@
  */
 
 import React, { FC, PureComponent } from 'react';
-// @ts-expect-error untyped library
-import Style from 'style-it';
+import { css as emotionCss } from '@emotion/react';
 import { AnyExpressionFunctionDefinition } from '../../../../../src/plugins/expressions';
 import { Positionable } from '../../public/components/positionable/positionable';
 import { elementToShape } from '../../public/components/workpad_page/positioning_utils';
@@ -81,16 +80,13 @@ export class RenderedElementComponent extends PureComponent<Props> {
     return (
       <Positionable height={height} width={width} transformMatrix={shape.transformMatrix}>
         <div className={css.root}>
-          {Style.it(
-            elementCSS,
-            <div className={css.container} style={{ ...containerStyle }}>
-              <div className={css.content}>
-                <div className={css.renderContainer}>
-                  <div key={id} ref={this.ref} data-renderer={as} className={css.render} />
-                </div>
+          <div css={emotionCss(elementCSS)} className={css.container} style={{ ...containerStyle }}>
+            <div className={css.content}>
+              <div className={css.renderContainer}>
+                <div key={id} ref={this.ref} data-renderer={as} className={css.render} />
               </div>
             </div>
-          )}
+          </div>
         </div>
       </Positionable>
     );

yarn.lock

@@ -23859,11 +23859,6 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339"
   integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==
 
-react-lib-adler32@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/react-lib-adler32/-/react-lib-adler32-1.0.3.tgz#63df1aed274eabcc1c5067077ea281ec30888ba7"
-  integrity sha512-AqFqdt4cP0RPffHNjVHZ7tyIgnoSzNxgFhG8XKMXCtA1dZ72gTPO4iYFwWDKHqvE8sHS14rhltQTdbXU5G4BFA==
-
 react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
@@ -27025,13 +27020,6 @@ strong-log-transformer@^2.1.0:
     minimist "^1.2.0"
     through "^2.3.4"
 
-style-it@^2.1.3:
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/style-it/-/style-it-2.1.3.tgz#ab6b5e109a1e946d58639f8cd05aa52df7ef1ab1"
-  integrity sha512-QVpYgFoJXhxiuBEok05YTx0WB4AbGkIiMWuCEPLTjFf3tCeB15eqhqMOjJeIsXqZ8REvgsqVuL2u7eoYg0mXJw==
-  dependencies:
-    react-lib-adler32 "^1.0.3"
-
 style-loader@^1.1.3, style-loader@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-1.3.0.tgz#828b4a3b3b7e7aa5847ce7bae9e874512114249e"