[Emotion] Create hook utility for memoizing component styles per-theme

changelogs/upcoming/7529.md

@@ -0,0 +1,3 @@
+**CSS-in-JS conversions**
+
+- Added a new memoization/performance optimization utility for CSS-in-JS styles

src/components/beacon/beacon.tsx

@@ -11,7 +11,7 @@ import { CommonProps } from '../common';
 import classNames from 'classnames';
 
 import { logicalStyles } from '../../global_styling';
-import { useEuiTheme } from '../../services';
+import { useEuiMemoizedStyles } from '../../services';
 
 import { euiBeaconStyles } from './beacon.styles';
 
@@ -48,9 +48,8 @@ export const EuiBeacon: FunctionComponent<EuiBeaconProps> = ({
   style,
   ...rest
 }) => {
-  const euiTheme = useEuiTheme();
+  const styles = useEuiMemoizedStyles(euiBeaconStyles);
   const classes = classNames('euiBeacon', className);
-  const styles = euiBeaconStyles(euiTheme);
   const cssStyles = [styles.euiBeacon, styles[color]];
 
   const beaconStyle = useMemo(

src/components/code/code.styles.ts

@@ -9,12 +9,10 @@
 import { css } from '@emotion/react';
 import { logicalShorthandCSS } from '../../global_styling';
 import { UseEuiTheme } from '../../services';
-import { UseEuiCodeSyntaxVariables } from './code_syntax.styles';
+import { euiCodeSyntaxVariables } from './code_syntax.styles';
 
-export const euiCodeStyles = (
-  euiThemeContext: UseEuiTheme,
-  euiCodeSyntaxVariables: UseEuiCodeSyntaxVariables
-) => {
+export const euiCodeStyles = (euiThemeContext: UseEuiTheme) => {
+  const codeSyntaxVariables = euiCodeSyntaxVariables(euiThemeContext);
   const { euiTheme } = euiThemeContext;
 
   return {
@@ -25,12 +23,12 @@ export const euiCodeStyles = (
       font-family: ${euiTheme.font.familyCode};
       font-size: 0.9em; /* 1 */
       ${logicalShorthandCSS('padding', '0.2em 0.5em')} /* 1 */
-      background: ${euiCodeSyntaxVariables.backgroundColor};
+      background: ${codeSyntaxVariables.backgroundColor};
       border-radius: ${euiTheme.border.radius.small};
       font-weight: ${euiTheme.font.weight.bold};
-      color: ${euiCodeSyntaxVariables.inlineCodeColor};
+      color: ${codeSyntaxVariables.inlineCodeColor};
 
-      ${euiCodeSyntaxVariables.tokensCss}
+      ${codeSyntaxVariables.tokensCss}
     `,
     transparentBackground: css`
       background: transparent;

src/components/code/code.tsx

@@ -15,8 +15,7 @@ import {
   checkSupportedLanguage,
   getHtmlContent,
 } from './utils';
-import { useEuiTheme } from '../../services';
-import { useEuiCodeSyntaxVariables } from './code_syntax.styles';
+import { useEuiMemoizedStyles } from '../../services';
 import { euiCodeStyles } from './code.styles';
 
 export type EuiCodeProps = EuiCodeSharedProps;
@@ -47,7 +46,7 @@ export const EuiCode: FunctionComponent<EuiCodeProps> = ({
 
   const classes = classNames('euiCode', className);
 
-  const styles = euiCodeStyles(useEuiTheme(), useEuiCodeSyntaxVariables());
+  const styles = useEuiMemoizedStyles(euiCodeStyles);
   const cssStyles = [
     styles.euiCode,
     transparentBackground && styles.transparentBackground,

src/components/code/code_block.styles.ts

@@ -22,22 +22,20 @@ import {
 } from '../../global_styling';
 import { UseEuiTheme } from '../../services';
 
-import { UseEuiCodeSyntaxVariables } from './code_syntax.styles';
+import { euiCodeSyntaxVariables } from './code_syntax.styles';
 
-export const euiCodeBlockStyles = (
-  euiThemeContext: UseEuiTheme,
-  euiCodeSyntaxVariables: UseEuiCodeSyntaxVariables
-) => {
+export const euiCodeBlockStyles = (euiThemeContext: UseEuiTheme) => {
+  const codeSyntaxVariables = euiCodeSyntaxVariables(euiThemeContext);
   const { euiTheme } = euiThemeContext;
 
   return {
     euiCodeBlock: css`
       max-inline-size: 100%;
       display: block;
       position: relative;
-      background: ${euiCodeSyntaxVariables.backgroundColor};
+      background: ${codeSyntaxVariables.backgroundColor};
 
-      ${euiCodeSyntaxVariables.tokensCss}
+      ${codeSyntaxVariables.tokensCss}
     `,
     // Font size
     s: css`
@@ -134,17 +132,14 @@ export const euiCodeBlockPreStyles = (euiThemeContext: UseEuiTheme) => {
   };
 };
 
-export const euiCodeBlockCodeStyles = (
-  euiThemeContext: UseEuiTheme,
-  euiCodeSyntaxVariables: UseEuiCodeSyntaxVariables
-) => {
+export const euiCodeBlockCodeStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
 
   return {
     euiCodeBlock__code: css`
       font-family: ${euiTheme.font.familyCode};
       font-size: inherit;
-      color: ${euiCodeSyntaxVariables.color};
+      color: ${euiTheme.colors.text};
       display: block;
     `,
     isVirtualized: css`

src/components/code/code_block.tsx

@@ -9,7 +9,12 @@
 import React, { FunctionComponent, useMemo } from 'react';
 import { RefractorNode } from 'refractor';
 import classNames from 'classnames';
-import { useCombinedRefs, useEuiTheme } from '../../services';
+
+import {
+  useCombinedRefs,
+  useEuiTheme,
+  useEuiMemoizedStyles,
+} from '../../services';
 import { ExclusiveUnion } from '../common';
 import {
   EuiCodeSharedProps,
@@ -32,7 +37,6 @@ import {
   euiCodeBlockPreStyles,
   euiCodeBlockCodeStyles,
 } from './code_block.styles';
-import { useEuiCodeSyntaxVariables } from './code_syntax.styles';
 
 // Based on observed line height for non-virtualized code blocks
 const fontSizeToRowHeightMap = {
@@ -123,7 +127,6 @@ export const EuiCodeBlock: FunctionComponent<EuiCodeBlockProps> = ({
   ...rest
 }) => {
   const euiTheme = useEuiTheme();
-  const euiCodeSyntaxVariables = useEuiCodeSyntaxVariables();
   const language = useMemo(
     () => checkSupportedLanguage(_language),
     [_language]
@@ -177,7 +180,7 @@ export const EuiCodeBlock: FunctionComponent<EuiCodeBlockProps> = ({
   const hasControls = !!(copyButton || fullScreenButton);
   const hasBothControls = !!(copyButton && fullScreenButton);
 
-  const styles = euiCodeBlockStyles(euiTheme, euiCodeSyntaxVariables);
+  const styles = useEuiMemoizedStyles(euiCodeBlockStyles);
   const cssStyles = [
     styles.euiCodeBlock,
     styles[fontSize],
@@ -188,26 +191,26 @@ export const EuiCodeBlock: FunctionComponent<EuiCodeBlockProps> = ({
         : styles.hasControls[paddingSize]),
   ];
 
+  const preStyles = useEuiMemoizedStyles(euiCodeBlockPreStyles);
   const [preProps, preFullscreenProps] = useMemo(() => {
     const isWhiteSpacePre = whiteSpace === 'pre' || isVirtualized;
 
-    const styles = euiCodeBlockPreStyles(euiTheme);
     const cssStyles = [
-      styles.euiCodeBlock__pre,
+      preStyles.euiCodeBlock__pre,
       isWhiteSpacePre
-        ? styles.whiteSpace.pre.pre
-        : styles.whiteSpace.preWrap.preWrap,
+        ? preStyles.whiteSpace.pre.pre
+        : preStyles.whiteSpace.preWrap.preWrap,
     ];
 
     const preProps = {
       className: 'euiCodeBlock__pre',
       css: [
         ...cssStyles,
-        styles.padding[paddingSize],
+        preStyles.padding[paddingSize],
         hasControls &&
           (isWhiteSpacePre
-            ? styles.whiteSpace.pre.controlsOffset[paddingSize]
-            : styles.whiteSpace.preWrap.controlsOffset[paddingSize]),
+            ? preStyles.whiteSpace.pre.controlsOffset[paddingSize]
+            : preStyles.whiteSpace.preWrap.controlsOffset[paddingSize]),
       ],
       tabIndex: isVirtualized ? 0 : tabIndex,
     };
@@ -216,19 +219,19 @@ export const EuiCodeBlock: FunctionComponent<EuiCodeBlockProps> = ({
       css: [
         ...cssStyles,
         // Force fullscreen to use xl padding
-        styles.padding.xl,
+        preStyles.padding.xl,
         hasControls &&
           (isWhiteSpacePre
-            ? styles.whiteSpace.pre.controlsOffset.xl
-            : styles.whiteSpace.preWrap.controlsOffset.xl),
+            ? preStyles.whiteSpace.pre.controlsOffset.xl
+            : preStyles.whiteSpace.preWrap.controlsOffset.xl),
       ],
       tabIndex: 0,
       onKeyDown,
     };
 
     return [preProps, preFullscreenProps];
   }, [
-    euiTheme,
+    preStyles,
     whiteSpace,
     isVirtualized,
     hasControls,
@@ -237,11 +240,11 @@ export const EuiCodeBlock: FunctionComponent<EuiCodeBlockProps> = ({
     tabIndex,
   ]);
 
+  const codeStyles = useEuiMemoizedStyles(euiCodeBlockCodeStyles);
   const codeProps = useMemo(() => {
-    const styles = euiCodeBlockCodeStyles(euiTheme, euiCodeSyntaxVariables);
     const cssStyles = [
-      styles.euiCodeBlock__code,
-      isVirtualized && styles.isVirtualized,
+      codeStyles.euiCodeBlock__code,
+      isVirtualized && codeStyles.isVirtualized,
     ];
 
     return {
@@ -250,7 +253,7 @@ export const EuiCodeBlock: FunctionComponent<EuiCodeBlockProps> = ({
       'data-code-language': language,
       ...rest,
     };
-  }, [language, euiTheme, euiCodeSyntaxVariables, isVirtualized, rest]);
+  }, [codeStyles, language, isVirtualized, rest]);
 
   return (
     <div

src/components/code/code_block_controls.styles.ts

@@ -16,21 +16,19 @@
 import { css } from '@emotion/react';
 import { euiPaddingSize } from '../../global_styling';
 import { UseEuiTheme } from '../../services';
-import { UseEuiCodeSyntaxVariables } from './code_syntax.styles';
+import { euiCodeSyntaxVariables } from './code_syntax.styles';
 
-export const euiCodeBlockControlsStyles = (
-  euiThemeContext: UseEuiTheme,
-  euiCodeSyntaxVariables: UseEuiCodeSyntaxVariables
-) => {
+export const euiCodeBlockControlsStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
+  const codeSyntaxVariables = euiCodeSyntaxVariables(euiThemeContext);
 
   return {
     euiCodeBlock__controls: css`
       position: absolute;
       display: flex;
       flex-direction: column;
       gap: ${euiTheme.size.xs};
-      background: ${euiCodeSyntaxVariables.backgroundColor};
+      background: ${codeSyntaxVariables.backgroundColor};
     `,
     offset: {
       none: css`

src/components/code/code_block_controls.tsx

@@ -7,19 +7,15 @@
  */
 
 import React, { FC, Fragment, ReactNode } from 'react';
-import { useEuiTheme } from '../../services';
+import { useEuiMemoizedStyles } from '../../services';
 import type { EuiCodeBlockPaddingSize } from './code_block';
-import { useEuiCodeSyntaxVariables } from './code_syntax.styles';
 import { euiCodeBlockControlsStyles } from './code_block_controls.styles';
 
 export const EuiCodeBlockControls: FC<{
   controls: ReactNode[];
   paddingSize: EuiCodeBlockPaddingSize;
 }> = ({ paddingSize, controls }) => {
-  const styles = euiCodeBlockControlsStyles(
-    useEuiTheme(),
-    useEuiCodeSyntaxVariables()
-  );
+  const styles = useEuiMemoizedStyles(euiCodeBlockControlsStyles);
   const cssStyles = [styles.euiCodeBlock__controls, styles.offset[paddingSize]];
 
   const hasControls = controls.some((control) => !!control);

src/components/code/code_block_full_screen.tsx

@@ -14,12 +14,11 @@ import React, {
   useMemo,
   PropsWithChildren,
 } from 'react';
-import { keys, useEuiTheme } from '../../services';
+import { keys, useEuiMemoizedStyles } from '../../services';
 import { useEuiI18n } from '../i18n';
 import { EuiButtonIcon } from '../button';
 import { EuiFocusTrap } from '../focus_trap';
 import { EuiOverlayMask } from '../overlay_mask';
-import { useEuiCodeSyntaxVariables } from './code_syntax.styles';
 import { euiCodeBlockStyles } from './code_block.styles';
 
 /**
@@ -92,7 +91,7 @@ export const useFullScreen = ({
 export const EuiCodeBlockFullScreenWrapper: FunctionComponent<
   PropsWithChildren
 > = ({ children }) => {
-  const styles = euiCodeBlockStyles(useEuiTheme(), useEuiCodeSyntaxVariables());
+  const styles = useEuiMemoizedStyles(euiCodeBlockStyles);
   const cssStyles = [
     styles.euiCodeBlock,
     styles.l, // Force fullscreen to use large font