[system] Pre-serialize & cache styles to improve performance

packages/mui-material/src/utils/memoTheme.ts

@@ -1,31 +1,6 @@
-import { CSSInterpolation } from '@mui/styled-engine';
+import { unstable_memoTheme } from '@mui/system';
 import { Theme } from '../styles/createTheme';
 
-type ThemeStyleFunction = (props: { theme: Theme }) => CSSInterpolation;
+const memoTheme = unstable_memoTheme<Theme>;
 
-// We need to pass an argument as `{ theme }` for PigmentCSS, but we don't want to
-// allocate more objects.
-const arg = { theme: undefined as unknown as Theme };
-
-/**
- * Memoize style function on theme.
- * Intended to be used in styled() calls that only need access to the theme.
- */
-export default function memoTheme(styleFn: ThemeStyleFunction) {
-  let lastValue: CSSInterpolation;
-  let lastTheme: Theme;
-
-  return (props: { theme: Theme }) => {
-    let value = lastValue;
-    if (value === undefined || props.theme !== lastTheme) {
-      arg.theme = props.theme;
-
-      value = styleFn(arg);
-
-      lastValue = value;
-      lastTheme = props.theme;
-    }
-
-    return value;
-  };
-}
+export default memoTheme;

packages/mui-styled-engine-sc/src/index.d.ts

@@ -76,11 +76,14 @@ export * from './GlobalStyles';
  * For internal usage in `@mui/system` package
  */
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export function internal_processStyles(
+export function internal_mutateStyles(
   tag: React.ElementType,
   processor: (styles: any) => any,
 ): void;
 
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function internal_serializeStyles<P>(styles: Interpolation<P>): object;
+
 // These are the same as the ones in @mui/styled-engine
 // CSS.PropertiesFallback are necessary so that we support spreading of the mixins. For example:
 // '@font-face'?: Fontface | Fontface[]

packages/mui-styled-engine-sc/src/index.js

@@ -37,7 +37,7 @@ export default function styled(tag, options) {
 }
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export const internal_processStyles = (tag, processor) => {
+export function internal_mutateStyles(tag, processor) {
   // Styled-components attaches an instance to `componentStyle`.
   // https://github.com/styled-components/styled-components/blob/da8151762dcf72735ffba358173d4c097f6d5888/packages/styled-components/src/models/StyledComponent.ts#L257
   //
@@ -46,7 +46,12 @@ export const internal_processStyles = (tag, processor) => {
   if (tag.componentStyle) {
     tag.componentStyle.rules = processor(tag.componentStyle.rules);
   }
-};
+}
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function internal_serializeStyles(styles) {
+  return styles;
+}
 
 export { ThemeContext, keyframes, css } from 'styled-components';
 export { default as StyledEngineProvider } from './StyledEngineProvider';

packages/mui-styled-engine/package.json

@@ -39,6 +39,7 @@
   "dependencies": {
     "@babel/runtime": "^7.25.0",
     "@emotion/cache": "^11.13.1",
+    "@emotion/serialize": "^1.3.1",
     "csstype": "^3.1.3",
     "prop-types": "^15.8.1"
   },

packages/mui-styled-engine/src/index.d.ts

@@ -21,11 +21,14 @@ export type MUIStyledComponent<
  * For internal usage in `@mui/system` package
  */
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export function internal_processStyles(
+export function internal_mutateStyles(
   tag: React.ElementType,
   processor: (styles: any) => any,
 ): void;
 
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function internal_serializeStyles<P>(styles: Interpolation<P>): object;
+
 export interface SerializedStyles {
   name: string;
   styles: string;

packages/mui-styled-engine/src/index.js

@@ -1,5 +1,6 @@
 /* eslint-disable no-underscore-dangle */
 import emStyled from '@emotion/styled';
+import { serializeStyles as emSerializeStyles } from '@emotion/serialize';
 
 export default function styled(tag, options) {
   const stylesFactory = emStyled(tag, options);
@@ -27,13 +28,20 @@ export default function styled(tag, options) {
 }
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export const internal_processStyles = (tag, processor) => {
+export function internal_mutateStyles(tag, processor) {
   // Emotion attaches all the styles as `__emotion_styles`.
   // Ref: https://github.com/emotion-js/emotion/blob/16d971d0da229596d6bcc39d282ba9753c9ee7cf/packages/styled/src/base.js#L186
   if (Array.isArray(tag.__emotion_styles)) {
     tag.__emotion_styles = processor(tag.__emotion_styles);
   }
-};
+}
+
+const wrapper = [];
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function internal_serializeStyles(styles) {
+  wrapper[0] = styles;
+  return emSerializeStyles(wrapper);
+}
 
 export { ThemeContext, keyframes, css } from '@emotion/react';
 export { default as StyledEngineProvider } from './StyledEngineProvider';