[Emotion] Allow configuring style memoization error/warning level #7626

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

Mar 27, 2024

.storybook/preview.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -39,6 +39,12 @@ import { writingModeStyles } from './writing_mode.styles'; @@
     // once all EUI components are converted to Emotion
     import '../dist/eui_theme_light.css';
+    /**
+     * Ensure that any provider errors throw & warn us early
+     */
+    import { setEuiDevProviderWarning } from '../src/services';
+    setEuiDevProviderWarning('error');
     /**
      * Prop controls
      */
@@ Expand All / @@ -51,7 +57,7 @@ const preview: Preview = { @@
         (Story, context) => (
           <EuiProvider
             colorMode={context.globals.colorMode}
-            {...(context.componentId === 'euiprovider' && context.args)}
+            {...(context.componentId === 'theming-euiprovider' && context.args)}
           >
             <div
               css={[
@@ Expand Down @@

changelogs/upcoming/7626.md

Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		CSS-in-JS conversions

		- Updated EUI's internal style memoization/performance utility to have configurable error/warning levels via `setEuiDevProviderWarning`

src-docs/src/views/app_context.js

-Original file line number
+Diff line change
@@ Expand Up / @@ -7,7 +7,10 @@ import { translateUsingPseudoLocale } from '../services'; @@
     import { getLocale } from '../store';
     import { EuiContext, EuiProvider } from '../../../src/components';
-    import { euiStylisPrefixer } from '../../../src/services';
+    import {
+      setEuiDevProviderWarning,
+      euiStylisPrefixer,
+    } from '../../../src/services';
     import { EUI_THEMES } from '../../../src/themes';
     import favicon16Prod from '../images/favicon/prod/favicon-16x16.png';
@@ Expand Down Expand Up / @@ -44,6 +47,7 @@ export const AppContext = ({ children }) => { @@
       };
       const isLocalDev = window.location.host.includes('803');
+      setEuiDevProviderWarning(isLocalDev ? 'error' : 'warn'); // Note: this can't be in a useEffect, otherwise it fires too late for style memoization warnings to error on page reload
       return (
         <EuiProvider
@@ Expand Down @@

src/services/theme/style_memoization.test.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -14,6 +14,7 @@ import { testOnReactVersion } from '../../test/internal'; @@
     import type { UseEuiTheme } from './hooks';
     import { EuiThemeProvider } from './provider';
+    import { setEuiDevProviderWarning } from './warning';
     import {
       useEuiMemoizedStyles,
@@ Expand Down Expand Up / @@ -79,11 +80,15 @@ describe('useEuiMemoizedStyles', () => { @@
       testOnReactVersion(['18'])(
         'throws an error if passed anonymous functions',
         () => {
+          setEuiDevProviderWarning('error');
           expect(() =>
-            renderHook(() => useEuiMemoizedStyles(() => ({})))
+            renderHook(() => useEuiMemoizedStyles(() => ({})), {
+              wrapper: EuiThemeProvider,
+            })
           ).toThrowError(
             'Styles are memoized per function. Your style functions must be statically defined in order to not create a new map entry every rerender.'
           );
+          setEuiDevProviderWarning(undefined);
         }
       );
     });
@@ Expand Down @@

src/services/theme/style_memoization.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -19,6 +19,7 @@ import React, { @@
     import { useUpdateEffect } from '../hooks';
     import { useEuiTheme, UseEuiTheme } from './hooks';
+    import { emitEuiProviderWarning } from './warning';
     type StylesMap = Record<string, any>; // Typically an object of serialized css`` styles, but can have any amount of nesting, so it's not worth it to try and strictly type this
     type MemoizedStylesMap = WeakMap<Function, StylesMap>;
@@ Expand Down Expand Up / @@ -60,7 +61,7 @@ const getMemoizedStyles = ( @@
       euiThemeContext: UseEuiTheme
     ) => {
       if (!stylesGenerator.name) {
-        throw new Error(
+        emitEuiProviderWarning(
           'Styles are memoized per function. Your style functions must be statically defined in order to not create a new map entry every rerender.'
         );
       }
@@ Expand Down @@

Provide feedback