[core] perf: sx

packages/mui-system/src/breakpoints/breakpoints.d.ts

@@ -1,6 +1,6 @@
 import { CSSObject } from '@mui/styled-engine';
 import { Breakpoints } from '../createBreakpoints/createBreakpoints';
-import type { Breakpoint } from '../createTheme';
+import type { Breakpoint, Theme } from '../createTheme';
 import { ResponsiveStyleValue } from '../styleFunctionSx';
 import { StyleFunction } from '../Box';
 
@@ -15,6 +15,18 @@ export function resolveBreakpointValues<T>(
 
 export function mergeBreakpointsInOrder(breakpoints: Breakpoints, styles: CSSObject[]): CSSObject;
 
+export function buildBreakpoints(
+  target: any,
+  theme: Theme,
+  propValue: any,
+  styleFromPropValue: (
+    target: any,
+    key: string | undefined,
+    value: any,
+    breakpoint?: Breakpoint,
+  ) => any,
+): any;
+
 export function handleBreakpoints<Props>(
   props: Props,
   propValue: any,

packages/mui-system/src/breakpoints/breakpoints.js

@@ -1,4 +1,6 @@
 import PropTypes from 'prop-types';
+import isObjectEmpty from '@mui/utils/isObjectEmpty';
+import fastDeepAssign from '@mui/utils/fastDeepAssign';
 import deepmerge from '@mui/utils/deepmerge';
 import merge from '../merge';
 import { isCqShorthand, getContainerQuery } from '../cssContainerQueries';
@@ -34,48 +36,78 @@ const defaultContainerQueries = {
   }),
 };
 
-export function handleBreakpoints(props, propValue, styleFromPropValue) {
-  const theme = props.theme || {};
+const EMPTY_BREAKPOINTS = {
+  keys: [],
+  up: (key) => `@media (min-width:${values[key]}px)`,
+};
+
+function buildBreakpoint(target, key, value, initialKey, callback) {
+  target[key] ??= {};
+  callback(target, key, value, initialKey);
+}
+
+export function buildBreakpoints(target, theme, propValue, styleFromPropValue) {
+  theme ??= {};
 
   if (Array.isArray(propValue)) {
-    const themeBreakpoints = theme.breakpoints || defaultBreakpoints;
-    return propValue.reduce((acc, item, index) => {
-      acc[themeBreakpoints.up(themeBreakpoints.keys[index])] = styleFromPropValue(propValue[index]);
-      return acc;
-    }, {});
+    const breakpoints = theme.breakpoints || defaultBreakpoints;
+    for (let i = 0; i < propValue.length; i += 1) {
+      buildBreakpoint(
+        target,
+        breakpoints.up(breakpoints.keys[i]),
+        propValue[i],
+        undefined,
+        styleFromPropValue,
+      );
+    }
+    return target;
   }
 
   if (typeof propValue === 'object') {
-    const themeBreakpoints = theme.breakpoints || defaultBreakpoints;
-    return Object.keys(propValue).reduce((acc, breakpoint) => {
-      if (isCqShorthand(themeBreakpoints.keys, breakpoint)) {
+    const breakpoints = theme.breakpoints || defaultBreakpoints;
+    const breakpointValues = breakpoints.values ?? values;
+
+    for (const key in propValue) {
+      if (isCqShorthand(breakpoints.keys, key)) {
         const containerKey = getContainerQuery(
           theme.containerQueries ? theme : defaultContainerQueries,
-          breakpoint,
+          key,
         );
         if (containerKey) {
-          acc[containerKey] = styleFromPropValue(propValue[breakpoint], breakpoint);
+          buildBreakpoint(target, containerKey, propValue[key], key, styleFromPropValue);
         }
       }
-      // key is breakpoint
-      else if (Object.keys(themeBreakpoints.values || values).includes(breakpoint)) {
-        const mediaKey = themeBreakpoints.up(breakpoint);
-        acc[mediaKey] = styleFromPropValue(propValue[breakpoint], breakpoint);
+      // key is key
+      else if (key in breakpointValues) {
+        const mediaKey = breakpoints.up(key);
+        buildBreakpoint(target, mediaKey, propValue[key], key, styleFromPropValue);
       } else {
-        const cssKey = breakpoint;
-        acc[cssKey] = propValue[cssKey];
+        const cssKey = key;
+        target[cssKey] = propValue[cssKey];
       }
-      return acc;
-    }, {});
+    }
+
+    return target;
   }
 
-  const output = styleFromPropValue(propValue);
+  styleFromPropValue(target, undefined, propValue);
 
-  return output;
+  return target;
 }
 
-function breakpoints(styleFunction) {
-  // false positive
+export function handleBreakpoints(props, propValue, styleFromPropValue) {
+  const result = {};
+  return buildBreakpoints(result, props.theme, propValue, (target, key, value, initialKey) => {
+    const finalValue = styleFromPropValue(value, initialKey);
+    if (key) {
+      target[key] = finalValue;
+    } else {
+      fastDeepAssign(target, finalValue);
+    }
+  });
+}
+
+function setupBreakpoints(styleFunction) {
   // eslint-disable-next-line react/function-component-definition
   const newStyleFunction = (props) => {
     const theme = props.theme || {};
@@ -110,28 +142,28 @@ function breakpoints(styleFunction) {
   return newStyleFunction;
 }
 
-export function createEmptyBreakpointObject(breakpointsInput = {}) {
-  const breakpointsInOrder = breakpointsInput.keys?.reduce((acc, key) => {
-    const breakpointStyleKey = breakpointsInput.up(key);
-    acc[breakpointStyleKey] = {};
-    return acc;
-  }, {});
-  return breakpointsInOrder || {};
+export function createEmptyBreakpointObject(breakpoints = EMPTY_BREAKPOINTS) {
+  const result = {};
+  for (let i = 0; i < breakpoints.keys.length; i += 1) {
+    result[breakpoints.up(breakpoints.keys[i])] = {};
+  }
+  return result;
 }
 
 export function removeUnusedBreakpoints(breakpointKeys, style) {
-  return breakpointKeys.reduce((acc, key) => {
-    const breakpointOutput = acc[key];
-    const isBreakpointUnused = !breakpointOutput || Object.keys(breakpointOutput).length === 0;
-    if (isBreakpointUnused) {
-      delete acc[key];
+  for (let i = 0; i < breakpointKeys.length; i += 1) {
+    const key = breakpointKeys[i];
+
+    if (isObjectEmpty(style[key])) {
+      delete style[key];
     }
-    return acc;
-  }, style);
+  }
+
+  return style;
 }
 
-export function mergeBreakpointsInOrder(breakpointsInput, ...styles) {
-  const emptyBreakpoints = createEmptyBreakpointObject(breakpointsInput);
+export function mergeBreakpointsInOrder(breakpoints, ...styles) {
+  const emptyBreakpoints = createEmptyBreakpointObject(breakpoints);
   const mergedOutput = [emptyBreakpoints, ...styles].reduce(
     (prev, next) => deepmerge(prev, next),
     {},
@@ -197,4 +229,4 @@ export function resolveBreakpointValues({
   }, {});
 }
 
-export default breakpoints;
+export default setupBreakpoints;

packages/mui-system/src/createStyled/createStyled.js

@@ -1,4 +1,5 @@
 import styledEngineStyled, { internal_mutateStyles as mutateStyles } from '@mui/styled-engine';
+import isObjectEmpty from '@mui/utils/isObjectEmpty';
 import { isPlainObject } from '@mui/utils/deepmerge';
 import capitalize from '@mui/utils/capitalize';
 import getDisplayName from '@mui/utils/getDisplayName';
@@ -281,14 +282,6 @@ function generateStyledLabel(componentName, componentSlot) {
   return label;
 }
 
-function isObjectEmpty(object) {
-  // eslint-disable-next-line
-  for (const _ in object) {
-    return false;
-  }
-  return true;
-}
-
 // https://github.com/emotion-js/emotion/blob/26ded6109fcd8ca9875cc2ce4564fee678a3f3c5/packages/styled/src/utils.js#L40
 function isStringTag(tag) {
   return (

packages/mui-system/src/merge/merge.js

@@ -1,13 +1,11 @@
 import deepmerge from '@mui/utils/deepmerge';
 
-function merge(acc, item) {
-  if (!item) {
-    return acc;
-  }
+const options = {
+  clone: false,
+};
 
-  return deepmerge(acc, item, {
-    clone: false, // No need to clone deep, it's way faster.
-  });
+function merge(acc, item) {
+  return deepmerge(acc, item, options);
 }
 
 export default merge;