[Emotion] Add @emotion/css as a dev and peer dependency (#6288)

* Install `@emotion/css` and upgrade all Emotion dependencies to latest and * Convert docs anchor links to `@emotion/css` - instead of using `ClassNames` render prop * Add `@emotion/css` as a peerDependency - since we're about to start using it in src components * Remove `@emotion/cache` usage from EuiProvider in favor of the default cache Emotion provides - which will automatically set compat = true * [OPTIONAL] unrequire `@emotion/cache` as a peerDependency now that EuiProvider no longer needs it * Convert EuiOverlayMask to `@emotion/css` - body overflow CSS still needs to be `@emotion/react`, and should be moved into a different file * Remove incredibly annoying mounted snapshots * consolidated some yarn.lock entries * "Fix" type reference to use `@emotion/css` instead of `@emotion/cache` Co-authored-by: Chandler Prall <chandler.prall@gmail.com>
elastic · Oct 5, 2022 · f7c05f9 · f7c05f9
1 parent 5f7538c
commit f7c05f9
Show file tree

Hide file tree

Showing 15 changed files with 284 additions and 825 deletions.
diff --git a/package.json b/package.json
@@ -118,11 +118,12 @@
     "@elastic/charts": "^50.0.1",
     "@elastic/datemath": "^5.0.3",
     "@elastic/eslint-config-kibana": "^0.15.0",
-    "@emotion/babel-preset-css-prop": "^11.2.0",
-    "@emotion/cache": "^11.7.1",
-    "@emotion/eslint-plugin": "^11.7.0",
-    "@emotion/jest": "^11.9.0",
-    "@emotion/react": "^11.9.0",
+    "@emotion/babel-preset-css-prop": "^11.10.0",
+    "@emotion/cache": "^11.10.3",
+    "@emotion/css": "^11.10.0",
+    "@emotion/eslint-plugin": "^11.10.0",
+    "@emotion/jest": "^11.10.0",
+    "@emotion/react": "^11.10.4",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
     "@svgr/core": "5.5.0",
     "@svgr/plugin-svgo": "^4.0.3",
@@ -253,8 +254,8 @@
   },
   "peerDependencies": {
     "@elastic/datemath": "^5.0.2",
-    "@emotion/cache": "11.x",
     "@emotion/react": "11.x",
+    "@emotion/css": "11.x",
     "@types/react": "^16.9 || ^17.0",
     "@types/react-dom": "^16.9 || ^17.0",
     "moment": "^2.13.0",

diff --git a/src-docs/src/components/codesandbox/link.js b/src-docs/src/components/codesandbox/link.js
@@ -138,6 +138,7 @@ ${demoContent}
               '@elastic/datemath',
               '@emotion/cache',
               '@emotion/react',
+              '@emotion/css',
               'moment',
               'react',
               'react-dom',

diff --git a/src-docs/src/services/routing/heading_anchor_links.tsx b/src-docs/src/services/routing/heading_anchor_links.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useMemo } from 'react';
 import { createPortal } from 'react-dom';
 import { useLocation } from 'react-router-dom';
-import { ClassNames } from '@emotion/react';
+import { css } from '@emotion/css';
 
 import { EuiButtonIcon, useEuiTheme, logicalCSS } from '../../../../src';
 
@@ -33,43 +33,39 @@ export const useHeadingAnchorLinks = () => {
   // to quickly get/copy the heading anchor link
   const anchorLinks = useMemo(
     () => (
-      <ClassNames>
-        {({ css }) => (
-          <>
-            {headingNodes.map((heading) => {
-              const headingCss = css`
-                &:hover [data-anchor-link] {
-                  opacity: 1;
-                }
-              `;
-              const linkCss = css`
-                opacity: 0;
-                ${logicalCSS('margin-left', euiTheme.size.s)}
+      <>
+        {headingNodes.map((heading) => {
+          const headingCss = css`
+            &:hover [data-anchor-link] {
+              opacity: 1;
+            }
+          `;
+          const linkCss = css`
+            opacity: 0;
+            ${logicalCSS('margin-left', euiTheme.size.s)}
 
-                &:hover,
+            &:hover,
                 &:focus {
-                  opacity: 1;
-                }
-              `;
+              opacity: 1;
+            }
+          `;
 
-              heading.classList.add(headingCss);
+          heading.classList.add(headingCss);
 
-              return createPortal(
-                <EuiButtonIcon
-                  data-anchor-link
-                  iconType="link"
-                  color="text"
-                  size="xs"
-                  css={linkCss}
-                  aria-label="Go to heading anchor link"
-                  href={`#${pathname}#${heading.id}`}
-                />,
-                heading
-              );
-            })}
-          </>
-        )}
-      </ClassNames>
+          return createPortal(
+            <EuiButtonIcon
+              data-anchor-link
+              iconType="link"
+              color="text"
+              size="xs"
+              className={linkCss}
+              aria-label="Go to heading anchor link"
+              href={`#${pathname}#${heading.id}`}
+            />,
+            heading
+          );
+        })}
+      </>
     ),
     [headingNodes] // eslint-disable-line react-hooks/exhaustive-deps
   );

diff --git a/src-docs/src/views/guidelines/getting_started/getting_started.js b/src-docs/src/views/guidelines/getting_started/getting_started.js
@@ -43,7 +43,7 @@ export const GettingStarted = {
           <EuiSpacer />
           <EuiCodeBlock language="bash" isCopyable fontSize="m">
             {
-              'yarn add @elastic/eui @elastic/datemath @emotion/react @emotion/cache moment prop-types'
+              'yarn add @elastic/eui @elastic/datemath @emotion/react @emotion/css moment prop-types'
             }
           </EuiCodeBlock>
           <EuiSpacer />