[Emotion] Use default cache for consumers who do not pass a cache to …

…EuiProvider (#6126) * Create default cache if consumers do not provide a cache to EuiProvider * Update tests * Changelog * List @emotion/cache as a peerDependency * add breaking changelog
elastic · Aug 15, 2022 · f0f8360 · f0f8360
1 parent 15fc608
commit f0f8360
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 26 deletions.
diff --git a/package.json b/package.json
@@ -252,6 +252,7 @@
   "peerDependencies": {
     "@elastic/datemath": "^5.0.2",
     "@emotion/react": "11.x",
+    "@emotion/cache": "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/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 moment prop-types'
+              'yarn add @elastic/eui @elastic/datemath @emotion/react @emotion/cache moment prop-types'
             }
           </EuiCodeBlock>
           <EuiSpacer />

diff --git a/src/components/provider/cache/__snapshots__/cache_provider.test.tsx.snap b/src/components/provider/cache/__snapshots__/cache_provider.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EuiProvider adds CacheProvider from Emotion when configured with a cache 1`] = `
+exports[`EuiProvider customizes CacheProvider when configured with a cache 1`] = `
 <ContextProvider
   value={
     Object {
@@ -28,10 +28,31 @@ exports[`EuiProvider adds CacheProvider from Emotion when configured with a cach
 </ContextProvider>
 `;
 
-exports[`EuiProvider does not add CacheProvider from Emotion when configured without a cache 1`] = `
-<Fragment>
+exports[`EuiProvider provides a default cache from Emotion when configured without a cache 1`] = `
+<ContextProvider
+  value={
+    Object {
+      "compat": true,
+      "insert": [Function],
+      "inserted": Object {},
+      "key": "css",
+      "nonce": undefined,
+      "registered": Object {},
+      "sheet": StyleSheet {
+        "_insertTag": [Function],
+        "before": null,
+        "container": <head />,
+        "ctr": 0,
+        "insertionPoint": undefined,
+        "isSpeedy": false,
+        "key": "css",
+        "nonce": undefined,
+        "prepend": undefined,
+        "tags": Array [],
+      },
+    }
+  }
+>
   <div />
-</Fragment>
+</ContextProvider>
 `;
-
-exports[`EuiProvider renders a Fragment when no children are provided 1`] = `<Fragment />`;
diff --git a/src/components/provider/cache/cache_provider.test.tsx b/src/components/provider/cache/cache_provider.test.tsx
@@ -16,29 +16,27 @@ describe('EuiProvider', () => {
   const cache = createCache({
     key: 'testing',
   });
-  it('adds CacheProvider from Emotion when configured with a cache', () => {
+
+  it('customizes CacheProvider when configured with a cache', () => {
     const component = shallow(
       <EuiCacheProvider cache={cache}>
         <div />
       </EuiCacheProvider>
     );
 
     expect(component).toMatchSnapshot();
+    expect(component.prop('value').key).toEqual('testing');
   });
 
-  it('does not add CacheProvider from Emotion when configured without a cache', () => {
+  it('provides a default cache from Emotion when configured without a cache', () => {
     const component = shallow(
       <EuiCacheProvider>
         <div />
       </EuiCacheProvider>
     );
 
     expect(component).toMatchSnapshot();
-  });
-
-  it('renders a Fragment when no children are provided', () => {
-    const component = shallow(<EuiCacheProvider cache={cache} />);
-
-    expect(component).toMatchSnapshot();
+    expect(component.prop('value').key).toEqual('css');
+    expect(component.prop('value').compat).toEqual(true);
   });
 });
diff --git a/src/components/provider/cache/cache_provider.tsx b/src/components/provider/cache/cache_provider.tsx
@@ -7,20 +7,19 @@
  */
 
 import React, { PropsWithChildren } from 'react';
-import { EmotionCache } from '@emotion/cache';
+import createCache, { EmotionCache } from '@emotion/cache';
 import { CacheProvider } from '@emotion/react';
 
+const defaultCache = createCache({ key: 'css' });
+defaultCache.compat = true;
+
 export interface EuiCacheProviderProps {
-  cache?: false | EmotionCache;
+  cache?: EmotionCache;
 }
 
 export const EuiCacheProvider = ({
-  cache,
+  cache = defaultCache,
   children,
-}: PropsWithChildren<EuiCacheProviderProps>) => {
-  return children && cache ? (
-    <CacheProvider value={cache}>{children}</CacheProvider>
-  ) : (
-    <>{children}</>
-  );
-};
+}: PropsWithChildren<EuiCacheProviderProps>) => (
+  <CacheProvider value={cache}>{children}</CacheProvider>
+);
diff --git a/upcoming_changelogs/6126.md b/upcoming_changelogs/6126.md
@@ -0,0 +1,7 @@
+**Bug fixes**
+
+- Fixed `:first-child/:nth-child` console warnings for consumers not passing in a `cache` to `EuiProvider`
+
+**Breaking changes**
+
+- `@emotion/cache` is now a required peer dependency, alongside `@emotion/react`
diff --git a/wiki/consuming.md b/wiki/consuming.md
@@ -11,7 +11,7 @@ yarn add @elastic/eui
 Note that EUI has [several `peerDependencies` requirements](package.json) that will also need to be installed if starting with a blank project.
 
 ```bash
-yarn add @elastic/eui @elastic/datemath @emotion/react moment prop-types
+yarn add @elastic/eui @elastic/datemath @emotion/react @emotion/cache moment prop-types
 ```
 
 ## Requirements and dependencies