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

)

Co-authored-by: Lene Gadewoll <[email protected]>

.storybook/preview.tsx

@@ -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
  */
@@ -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={[

changelogs/upcoming/7626.md

@@ -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

@@ -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';
@@ -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

src/services/theme/style_memoization.test.tsx

@@ -14,6 +14,7 @@ import { testOnReactVersion } from '../../test/internal';
 
 import type { UseEuiTheme } from './hooks';
 import { EuiThemeProvider } from './provider';
+import { setEuiDevProviderWarning } from './warning';
 
 import {
   useEuiMemoizedStyles,
@@ -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);
     }
   );
 });

src/services/theme/style_memoization.tsx

@@ -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>;
@@ -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.'
     );
   }