[EuiCode/Block] Avoid recomputing code syntax colors (#7486)

Co-authored-by: Cee Chen <[email protected]>
elastic · Jan 31, 2024 · 0abab26 · 0abab26
1 parent 3b46c35
commit 0abab26
Show file tree

Hide file tree

Showing 9 changed files with 218 additions and 197 deletions.
diff --git a/changelogs/upcoming/7486.md b/changelogs/upcoming/7486.md
@@ -0,0 +1,3 @@
+**Performance**
+
+- Improved the amount of recomputed styles being generated by `EuiCode` and `EuiCodeBlock`
diff --git a/src/components/code/code.styles.ts b/src/components/code/code.styles.ts
@@ -9,11 +9,13 @@
 import { css } from '@emotion/react';
 import { logicalShorthandCSS } from '../../global_styling';
 import { UseEuiTheme } from '../../services';
-import { euiCodeSyntaxColors, euiCodeSyntaxTokens } from './code_syntax.styles';
+import { UseEuiCodeSyntaxVariables } from './code_syntax.styles';
 
-export const euiCodeStyles = (euiThemeContext: UseEuiTheme) => {
+export const euiCodeStyles = (
+  euiThemeContext: UseEuiTheme,
+  euiCodeSyntaxVariables: UseEuiCodeSyntaxVariables
+) => {
   const { euiTheme } = euiThemeContext;
-  const euiCodeSyntax = euiCodeSyntaxColors(euiThemeContext);
 
   return {
     /*
@@ -23,12 +25,12 @@ export const euiCodeStyles = (euiThemeContext: UseEuiTheme) => {
       font-family: ${euiTheme.font.familyCode};
       font-size: 0.9em; /* 1 */
       ${logicalShorthandCSS('padding', '0.2em 0.5em')} /* 1 */
-      background: ${euiCodeSyntax.backgroundColor};
+      background: ${euiCodeSyntaxVariables.backgroundColor};
       border-radius: ${euiTheme.border.radius.small};
       font-weight: ${euiTheme.font.weight.bold};
-      color: ${euiCodeSyntax.inlineCodeColor};
+      color: ${euiCodeSyntaxVariables.inlineCodeColor};
 
-      ${euiCodeSyntaxTokens(euiThemeContext)}
+      ${euiCodeSyntaxVariables.tokensCss}
     `,
     transparentBackground: css`
       background: transparent;

diff --git a/src/components/code/code.tsx b/src/components/code/code.tsx
@@ -16,6 +16,7 @@ import {
   getHtmlContent,
 } from './utils';
 import { useEuiTheme } from '../../services';
+import { useEuiCodeSyntaxVariables } from './code_syntax.styles';
 import { euiCodeStyles } from './code.styles';
 
 export type EuiCodeProps = EuiCodeSharedProps;
@@ -46,8 +47,7 @@ export const EuiCode: FunctionComponent<EuiCodeProps> = ({
 
   const classes = classNames('euiCode', className);
 
-  const euiTheme = useEuiTheme();
-  const styles = euiCodeStyles(euiTheme);
+  const styles = euiCodeStyles(useEuiTheme(), useEuiCodeSyntaxVariables());
   const cssStyles = [
     styles.euiCode,
     transparentBackground && styles.transparentBackground,

diff --git a/src/components/code/code_block.styles.ts b/src/components/code/code_block.styles.ts
@@ -21,20 +21,23 @@ import {
   mathWithUnits,
 } from '../../global_styling';
 import { UseEuiTheme } from '../../services';
-import { euiCodeSyntaxColors, euiCodeSyntaxTokens } from './code_syntax.styles';
 
-export const euiCodeBlockStyles = (euiThemeContext: UseEuiTheme) => {
+import { UseEuiCodeSyntaxVariables } from './code_syntax.styles';
+
+export const euiCodeBlockStyles = (
+  euiThemeContext: UseEuiTheme,
+  euiCodeSyntaxVariables: UseEuiCodeSyntaxVariables
+) => {
   const { euiTheme } = euiThemeContext;
-  const euiCodeSyntax = euiCodeSyntaxColors(euiThemeContext);
 
   return {
     euiCodeBlock: css`
       max-inline-size: 100%;
       display: block;
       position: relative;
-      background: ${euiCodeSyntax.backgroundColor};
+      background: ${euiCodeSyntaxVariables.backgroundColor};
 
-      ${euiCodeSyntaxTokens(euiThemeContext)}
+      ${euiCodeSyntaxVariables.tokensCss}
     `,
     // Font size
     s: css`
@@ -131,15 +134,17 @@ export const euiCodeBlockPreStyles = (euiThemeContext: UseEuiTheme) => {
   };
 };
 
-export const euiCodeBlockCodeStyles = (euiThemeContext: UseEuiTheme) => {
+export const euiCodeBlockCodeStyles = (
+  euiThemeContext: UseEuiTheme,
+  euiCodeSyntaxVariables: UseEuiCodeSyntaxVariables
+) => {
   const { euiTheme } = euiThemeContext;
-  const euiCodeSyntax = euiCodeSyntaxColors(euiThemeContext);
 
   return {
     euiCodeBlock__code: css`
       font-family: ${euiTheme.font.familyCode};
       font-size: inherit;
-      color: ${euiCodeSyntax.color};
+      color: ${euiCodeSyntaxVariables.color};
       display: block;
     `,
     isVirtualized: css`

diff --git a/src/components/code/code_block.tsx b/src/components/code/code_block.tsx
@@ -32,6 +32,7 @@ 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 = {
@@ -122,6 +123,7 @@ export const EuiCodeBlock: FunctionComponent<EuiCodeBlockProps> = ({
   ...rest
 }) => {
   const euiTheme = useEuiTheme();
+  const euiCodeSyntaxVariables = useEuiCodeSyntaxVariables();
   const language = useMemo(
     () => checkSupportedLanguage(_language),
     [_language]
@@ -175,7 +177,7 @@ export const EuiCodeBlock: FunctionComponent<EuiCodeBlockProps> = ({
   const hasControls = !!(copyButton || fullScreenButton);
   const hasBothControls = !!(copyButton && fullScreenButton);
 
-  const styles = euiCodeBlockStyles(euiTheme);
+  const styles = euiCodeBlockStyles(euiTheme, euiCodeSyntaxVariables);
   const cssStyles = [
     styles.euiCodeBlock,
     styles[fontSize],
@@ -236,7 +238,7 @@ export const EuiCodeBlock: FunctionComponent<EuiCodeBlockProps> = ({
   ]);
 
   const codeProps = useMemo(() => {
-    const styles = euiCodeBlockCodeStyles(euiTheme);
+    const styles = euiCodeBlockCodeStyles(euiTheme, euiCodeSyntaxVariables);
     const cssStyles = [
       styles.euiCodeBlock__code,
       isVirtualized && styles.isVirtualized,
@@ -248,7 +250,7 @@ export const EuiCodeBlock: FunctionComponent<EuiCodeBlockProps> = ({
       'data-code-language': language,
       ...rest,
     };
-  }, [language, euiTheme, isVirtualized, rest]);
+  }, [language, euiTheme, euiCodeSyntaxVariables, isVirtualized, rest]);
 
   return (
     <div

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

diff --git a/src/components/code/code_block_controls.tsx b/src/components/code/code_block_controls.tsx
@@ -9,14 +9,17 @@
 import React, { FC, Fragment, ReactNode } from 'react';
 import { useEuiTheme } 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 euiTheme = useEuiTheme();
-  const styles = euiCodeBlockControlsStyles(euiTheme);
+  const styles = euiCodeBlockControlsStyles(
+    useEuiTheme(),
+    useEuiCodeSyntaxVariables()
+  );
   const cssStyles = [styles.euiCodeBlock__controls, styles.offset[paddingSize]];
 
   const hasControls = controls.some((control) => !!control);

diff --git a/src/components/code/code_block_full_screen.tsx b/src/components/code/code_block_full_screen.tsx
@@ -19,6 +19,7 @@ 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';
 
 /**
@@ -91,9 +92,7 @@ export const useFullScreen = ({
 export const EuiCodeBlockFullScreenWrapper: FunctionComponent<
   PropsWithChildren
 > = ({ children }) => {
-  const euiThemeContext = useEuiTheme();
-
-  const styles = euiCodeBlockStyles(euiThemeContext);
+  const styles = euiCodeBlockStyles(useEuiTheme(), useEuiCodeSyntaxVariables());
   const cssStyles = [
     styles.euiCodeBlock,
     styles.l, // Force fullscreen to use large font
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		Performance

		- Improved the amount of recomputed styles being generated by `EuiCode` and `EuiCodeBlock`