@material-ui/system - npm Package Compare versions

Comparing version 5.0.0-alpha.17 to 5.0.0-alpha.18

borders.js

@@ -10,2 +10,4 @@ "use strict";
 
+var _responsivePropType = _interopRequireDefault(require("./responsivePropType"));
+
 var _style = _interopRequireDefault(require("./style"));
@@ -15,2 +17,6 @@
 
+var _spacing = require("./spacing");
+
+var _breakpoints = require("./breakpoints");
+
 function getBorder(value) {
@@ -59,9 +65,28 @@ if (typeof value !== 'number') {
 exports.borderColor = borderColor;
-const borderRadius = (0, _style.default)({
-  prop: 'borderRadius',
-  themeKey: 'shape'
-});
+
+function resolveCssProperty(props, prop, transformer) {
+  // Using a hash computation over an array iteration could be faster, but with only 28 items,
+  // it isn’t worth the bundle size.
+  if (prop !== 'borderRadius') {
+    return null;
+  }
+
+  const cssProperties = ['borderRadius'];
+  const styleFromPropValue = (0, _spacing.getStyleFromPropValue)(cssProperties, transformer);
+  const propValue = props[prop];
+  return (0, _breakpoints.handleBreakpoints)(props, propValue, styleFromPropValue);
+}
+
+const borderRadius = props => {
+  const transformer = (0, _spacing.createUnaryUnit)(props.theme, 'shape.borderRadius', 4, 'borderRadius');
+  return props.borderRadius ? resolveCssProperty(props, 'borderRadius', transformer) : {};
+};
+
 exports.borderRadius = borderRadius;
+borderRadius.propTypes = process.env.NODE_ENV !== 'production' ? {
+  borderRadius: _responsivePropType.default
+} : {};
+borderRadius.filterProps = ['borderRadius'];
 const borders = (0, _compose.default)(border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderRadius);
 var _default = borders;
 exports.default = _default;

breakpoints.js

@@ -9,2 +9,4 @@ "use strict";
 exports.handleBreakpoints = handleBreakpoints;
+exports.createEmptyBreakpointObject = createEmptyBreakpointObject;
+exports.removeUnusedBreakpoints = removeUnusedBreakpoints;
 exports.mergeBreakpointsInOrder = mergeBreakpointsInOrder;
@@ -120,3 +122,3 @@ exports.default = void 0;
     return acc;
-  }, (0, _extends2.default)({}, style));
+  }, style);
 }
@@ -123,0 +125,0 @@

compose.js

@@ -13,27 +13,19 @@ "use strict";
 function compose(...styles) {
-  const fn = props => styles.reduce((acc, style) => {
-    const output = style(props);
+  const handlers = styles.reduce((acc, style) => {
+    style.filterProps.forEach(prop => {
+      acc[prop] = style;
+    });
+    return acc;
+  }, {});
 
-    if (output) {
-      return (0, _merge.default)(acc, output);
-    }
+  const fn = props => {
+    return Object.keys(props).reduce((acc, prop) => {
+      if (handlers[prop]) {
+        return (0, _merge.default)(acc, handlers[prop](props));
+      }
 
-    return acc;
-  }, {}); // Alternative approach that doesn't yield any performance gain.
-  // const handlers = styles.reduce((acc, style) => {
-  //   style.filterProps.forEach(prop => {
-  //     acc[prop] = style;
-  //   });
-  //   return acc;
-  // }, {});
-  // const fn = props => {
-  //   return Object.keys(props).reduce((acc, prop) => {
-  //     if (handlers[prop]) {
-  //       return merge(acc, handlers[prop](props));
-  //     }
-  //     return acc;
-  //   }, {});
-  // };
+      return acc;
+    }, {});
+  };
 
-
   fn.propTypes = process.env.NODE_ENV !== 'production' ? styles.reduce((acc, style) => Object.assign(acc, style.propTypes), {}) : {};
@@ -40,0 +32,0 @@ fn.filterProps = styles.reduce((acc, style) => acc.concat(style.filterProps), []);

esm/borders.js

@@ -0,3 +1,6 @@
+import responsivePropType from './responsivePropType';
 import style from './style';
 import compose from './compose';
+import { createUnaryUnit, getStyleFromPropValue } from './spacing';
+import { handleBreakpoints } from './breakpoints';
 
@@ -41,7 +44,25 @@ function getBorder(value) {
 });
-export const borderRadius = style({
-  prop: 'borderRadius',
-  themeKey: 'shape'
-});
+
+function resolveCssProperty(props, prop, transformer) {
+  // Using a hash computation over an array iteration could be faster, but with only 28 items,
+  // it isn’t worth the bundle size.
+  if (prop !== 'borderRadius') {
+    return null;
+  }
+
+  const cssProperties = ['borderRadius'];
+  const styleFromPropValue = getStyleFromPropValue(cssProperties, transformer);
+  const propValue = props[prop];
+  return handleBreakpoints(props, propValue, styleFromPropValue);
+}
+
+export const borderRadius = props => {
+  const transformer = createUnaryUnit(props.theme, 'shape.borderRadius', 4, 'borderRadius');
+  return props.borderRadius ? resolveCssProperty(props, 'borderRadius', transformer) : {};
+};
+borderRadius.propTypes = process.env.NODE_ENV !== 'production' ? {
+  borderRadius: responsivePropType
+} : {};
+borderRadius.filterProps = ['borderRadius'];
 const borders = compose(border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderRadius);
 export default borders;

esm/breakpoints.js

@@ -82,3 +82,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 
-function createEmptyBreakpointObject(breakpointsInput = {}) {
+export function createEmptyBreakpointObject(breakpointsInput = {}) {
   var _breakpointsInput$key;
@@ -93,4 +93,3 @@
 }
-
-function removeUnusedBreakpoints(breakpointKeys, style) {
+export function removeUnusedBreakpoints(breakpointKeys, style) {
   return breakpointKeys.reduce((acc, key) => {
@@ -105,5 +104,4 @@ const breakpointOutput = acc[key];
     return acc;
-  }, _extends({}, style));
+  }, style);
 }
-
 export function mergeBreakpointsInOrder(breakpointsInput, ...styles) {
@@ -110,0 +108,0 @@ const emptyBreakpoints = createEmptyBreakpointObject(breakpointsInput);

esm/compose.js

 import merge from './merge';
 
 function compose(...styles) {
-  const fn = props => styles.reduce((acc, style) => {
-    const output = style(props);
+  const handlers = styles.reduce((acc, style) => {
+    style.filterProps.forEach(prop => {
+      acc[prop] = style;
+    });
+    return acc;
+  }, {});
 
-    if (output) {
-      return merge(acc, output);
-    }
+  const fn = props => {
+    return Object.keys(props).reduce((acc, prop) => {
+      if (handlers[prop]) {
+        return merge(acc, handlers[prop](props));
+      }
 
-    return acc;
-  }, {}); // Alternative approach that doesn't yield any performance gain.
-  // const handlers = styles.reduce((acc, style) => {
-  //   style.filterProps.forEach(prop => {
-  //     acc[prop] = style;
-  //   });
-  //   return acc;
-  // }, {});
-  // const fn = props => {
-  //   return Object.keys(props).reduce((acc, prop) => {
-  //     if (handlers[prop]) {
-  //       return merge(acc, handlers[prop](props));
-  //     }
-  //     return acc;
-  //   }, {});
-  // };
+      return acc;
+    }, {});
+  };
 
-
   fn.propTypes = process.env.NODE_ENV !== 'production' ? styles.reduce((acc, style) => Object.assign(acc, style.propTypes), {}) : {};
@@ -30,0 +22,0 @@ fn.filterProps = styles.reduce((acc, style) => acc.concat(style.filterProps), []);

esm/getThemeValue.js

@@ -11,2 +11,32 @@ import borders from './borders';
 import typography from './typography';
+const filterPropsMapping = {
+  borders: borders.filterProps,
+  display: display.filterProps,
+  flexbox: flexbox.filterProps,
+  grid: grid.filterProps,
+  positions: positions.filterProps,
+  palette: palette.filterProps,
+  shadows: shadows.filterProps,
+  sizing: sizing.filterProps,
+  spacing: spacing.filterProps,
+  typography: typography.filterProps
+};
+const styleFunctionMapping = {
+  borders,
+  display,
+  flexbox,
+  grid,
+  positions,
+  palette,
+  shadows,
+  sizing,
+  spacing,
+  typography
+};
+export const propToStyleFunction = Object.keys(filterPropsMapping).reduce((acc, styleFnName) => {
+  filterPropsMapping[styleFnName].forEach(propName => {
+    acc[propName] = styleFunctionMapping[styleFnName];
+  });
+  return acc;
+}, {});
 
@@ -18,44 +48,4 @@ function getThemeValue(prop, value, theme) {
   };
-
-  if (borders.filterProps.indexOf(prop) !== -1) {
-    return borders(inputProps);
-  }
-
-  if (display.filterProps.indexOf(prop) !== -1) {
-    return display(inputProps);
-  }
-
-  if (flexbox.filterProps.indexOf(prop) !== -1) {
-    return flexbox(inputProps);
-  }
-
-  if (grid.filterProps.indexOf(prop) !== -1) {
-    return grid(inputProps);
-  }
-
-  if (positions.filterProps.indexOf(prop) !== -1) {
-    return positions(inputProps);
-  }
-
-  if (palette.filterProps.indexOf(prop) !== -1) {
-    return palette(inputProps);
-  }
-
-  if (shadows.filterProps.indexOf(prop) !== -1) {
-    return shadows(inputProps);
-  }
-
-  if (sizing.filterProps.indexOf(prop) !== -1) {
-    return sizing(inputProps);
-  }
-
-  if (spacing.filterProps.indexOf(prop) !== -1) {
-    return spacing(inputProps);
-  }
-
-  if (typography.filterProps.indexOf(prop) !== -1) {
-    return typography(inputProps);
-  }
-
-  return {
+  const styleFunction = propToStyleFunction[prop];
+  return styleFunction ? styleFunction(inputProps) : {
     [prop]: value
@@ -62,0 +52,0 @@ };

esm/spacing.js

 import responsivePropType from './responsivePropType';
 import { handleBreakpoints } from './breakpoints';
+import { getPath } from './style';
 import merge from './merge';
@@ -44,4 +45,4 @@ import memoize from './memoize';
 const spacingKeys = [...marginKeys, ...paddingKeys];
-export function createUnarySpacing(theme) {
-  const themeSpacing = theme.spacing || 8;
+export function createUnaryUnit(theme, themeKey, defaultValue, propName) {
+  const themeSpacing = getPath(theme, themeKey) || defaultValue;
 
@@ -56,3 +57,3 @@ if (typeof themeSpacing === 'number') {
         if (typeof abs !== 'number') {
-          console.error(`Material-UI: Expected spacing argument to be a number or a string, got ${abs}.`);
+          console.error(`Material-UI: Expected ${propName} argument to be a number or a string, got ${abs}.`);
         }
@@ -73,3 +74,3 @@ }
         if (!Number.isInteger(abs)) {
-          console.error(['Material-UI: The `theme.spacing` array type cannot be combined with non integer values.' + 'You should either use an integer value that can be used as index, or define the `theme.spacing` as a number.'].join('\n'));
+          console.error([`Material-UI: The \`theme.${themeKey}\` array type cannot be combined with non integer values.` + `You should either use an integer value that can be used as index, or define the \`theme.${themeKey}\` as a number.`].join('\n'));
         } else if (abs > themeSpacing.length - 1) {
@@ -89,3 +90,3 @@ console.error([`Material-UI: The value provided (${abs}) overflows.`, `The supported values are: ${JSON.stringify(themeSpacing)}.`, `${abs} > ${themeSpacing.length - 1}, you need to add the missing values.`].join('\n'));
   if (process.env.NODE_ENV !== 'production') {
-    console.error([`Material-UI: The \`theme.spacing\` value (${themeSpacing}) is invalid.`, 'It should be a number, an array or a function.'].join('\n'));
+    console.error([`Material-UI: The \`theme.${themeKey}\` value (${themeSpacing}) is invalid.`, 'It should be a number, an array or a function.'].join('\n'));
   }
@@ -95,4 +96,6 @@
 }
-
-function getValue(transformer, propValue) {
+export function createUnarySpacing(theme) {
+  return createUnaryUnit(theme, 'spacing', 8, 'spacing');
+}
+export function getValue(transformer, propValue) {
   if (typeof propValue === 'string') {
@@ -115,4 +118,3 @@ return propValue;
 }
-
-function getStyleFromPropValue(cssProperties, transformer) {
+export function getStyleFromPropValue(cssProperties, transformer) {
   return propValue => cssProperties.reduce((acc, cssProperty) => {
@@ -119,0 +121,0 @@ acc[cssProperty] = getValue(transformer, propValue);

esm/style.js

@@ -0,5 +1,5 @@
+import { unstable_capitalize as capitalize } from '@material-ui/utils';
 import responsivePropType from './responsivePropType';
 import { handleBreakpoints } from './breakpoints';
-
-function getPath(obj, path) {
+export function getPath(obj, path) {
   if (!path || typeof path !== 'string') {
@@ -12,2 +12,20 @@ return null;
 
+function getValue(themeMapping, transform, propValueFinal, userValue = propValueFinal) {
+  let value;
+
+  if (typeof themeMapping === 'function') {
+    value = themeMapping(propValueFinal);
+  } else if (Array.isArray(themeMapping)) {
+    value = themeMapping[propValueFinal] || userValue;
+  } else {
+    value = getPath(themeMapping, propValueFinal) || userValue;
+
+    if (transform) {
+      value = transform(value);
+    }
+  }
+
+  return value;
+}
+
 function style(options) {
@@ -31,14 +49,7 @@ const {
     const styleFromPropValue = propValueFinal => {
-      let value;
+      let value = getValue(themeMapping, transform, propValueFinal);
 
-      if (typeof themeMapping === 'function') {
-        value = themeMapping(propValueFinal);
-      } else if (Array.isArray(themeMapping)) {
-        value = themeMapping[propValueFinal] || propValueFinal;
-      } else {
-        value = getPath(themeMapping, propValueFinal) || propValueFinal;
-
-        if (transform) {
-          value = transform(value);
-        }
+      if (propValueFinal === value && typeof propValueFinal === 'string') {
+        // Haven't found value
+        value = getValue(themeMapping, transform, `${prop}${propValueFinal === 'default' ? '' : capitalize(propValueFinal)}`, propValueFinal);
       }
@@ -45,0 +56,0 @@

esm/styleFunctionSx.js

@@ -1,15 +0,4 @@
-import { deepmerge } from '@material-ui/utils';
-import getThemeValue from './getThemeValue';
-import { handleBreakpoints, mergeBreakpointsInOrder } from './breakpoints';
-import borders from './borders';
-import display from './display';
-import flexbox from './flexbox';
-import grid from './grid';
-import positions from './positions';
-import palette from './palette';
-import shadows from './shadows';
-import sizing from './sizing';
-import spacing from './spacing';
-import typography from './typography';
-const filterProps = [...borders.filterProps, ...display.filterProps, ...flexbox.filterProps, ...grid.filterProps, ...positions.filterProps, ...palette.filterProps, ...shadows.filterProps, ...sizing.filterProps, ...spacing.filterProps, ...typography.filterProps, 'sx'];
+import merge from './merge';
+import getThemeValue, { propToStyleFunction } from './getThemeValue';
+import { handleBreakpoints, createEmptyBreakpointObject, removeUnusedBreakpoints } from './breakpoints';
 
@@ -22,6 +11,10 @@ function objectsHaveSameKeys(...objects) {
 
+function callIfFn(maybeFn, arg) {
+  return typeof maybeFn === 'function' ? maybeFn(arg) : maybeFn;
+}
+
 function styleFunctionSx(props) {
   const {
     sx: styles,
-    theme
+    theme = {}
   } = props || {};
@@ -39,33 +32,32 @@ if (!styles) return null;
 
-  let css = {};
+  const emptyBreakpoints = createEmptyBreakpointObject(theme.breakpoints);
+  const breakpointsKeys = Object.keys(emptyBreakpoints);
+  let css = emptyBreakpoints;
   Object.keys(styles).forEach(styleKey => {
-    if (typeof styles[styleKey] === 'object') {
-      if (filterProps.indexOf(styleKey) !== -1) {
-        css = deepmerge(css, getThemeValue(styleKey, styles[styleKey], theme));
+    const value = callIfFn(styles[styleKey], theme);
+
+    if (typeof value === 'object') {
+      if (propToStyleFunction[styleKey]) {
+        css = merge(css, getThemeValue(styleKey, value, theme));
       } else {
         const breakpointsValues = handleBreakpoints({
           theme
-        }, styles[styleKey], x => ({
+        }, value, x => ({
           [styleKey]: x
         }));
 
-        if (objectsHaveSameKeys(breakpointsValues, styles[styleKey])) {
-          const transformedValue = styleFunctionSx({
-            sx: styles[styleKey],
+        if (objectsHaveSameKeys(breakpointsValues, value)) {
+          css[styleKey] = styleFunctionSx({
+            sx: value,
             theme
           });
-          css[styleKey] = transformedValue;
         } else {
-          css = deepmerge(css, breakpointsValues);
+          css = merge(css, breakpointsValues);
         }
       }
-    } else if (typeof styles[styleKey] === 'function') {
-      css = deepmerge(css, {
-        [styleKey]: styles[styleKey](theme)
-      });
     } else {
-      css = deepmerge(css, getThemeValue(styleKey, styles[styleKey], theme));
+      css = merge(css, getThemeValue(styleKey, value, theme));
     }
   });
-  return mergeBreakpointsInOrder(theme.breakpoints, css);
+  return removeUnusedBreakpoints(breakpointsKeys, css);
 }
@@ -72,0 +64,0 @@

getThemeValue.js

@@ -8,3 +8,3 @@ "use strict";
 });
-exports.default = void 0;
+exports.default = exports.propToStyleFunction = void 0;
 
@@ -31,2 +31,34 @@ var _borders = _interopRequireDefault(require("./borders"));
 
+const filterPropsMapping = {
+  borders: _borders.default.filterProps,
+  display: _display.default.filterProps,
+  flexbox: _flexbox.default.filterProps,
+  grid: _grid.default.filterProps,
+  positions: _positions.default.filterProps,
+  palette: _palette.default.filterProps,
+  shadows: _shadows.default.filterProps,
+  sizing: _sizing.default.filterProps,
+  spacing: _spacing.default.filterProps,
+  typography: _typography.default.filterProps
+};
+const styleFunctionMapping = {
+  borders: _borders.default,
+  display: _display.default,
+  flexbox: _flexbox.default,
+  grid: _grid.default,
+  positions: _positions.default,
+  palette: _palette.default,
+  shadows: _shadows.default,
+  sizing: _sizing.default,
+  spacing: _spacing.default,
+  typography: _typography.default
+};
+const propToStyleFunction = Object.keys(filterPropsMapping).reduce((acc, styleFnName) => {
+  filterPropsMapping[styleFnName].forEach(propName => {
+    acc[propName] = styleFunctionMapping[styleFnName];
+  });
+  return acc;
+}, {});
+exports.propToStyleFunction = propToStyleFunction;
+
 function getThemeValue(prop, value, theme) {
@@ -37,44 +69,4 @@ const inputProps = {
   };
-
-  if (_borders.default.filterProps.indexOf(prop) !== -1) {
-    return (0, _borders.default)(inputProps);
-  }
-
-  if (_display.default.filterProps.indexOf(prop) !== -1) {
-    return (0, _display.default)(inputProps);
-  }
-
-  if (_flexbox.default.filterProps.indexOf(prop) !== -1) {
-    return (0, _flexbox.default)(inputProps);
-  }
-
-  if (_grid.default.filterProps.indexOf(prop) !== -1) {
-    return (0, _grid.default)(inputProps);
-  }
-
-  if (_positions.default.filterProps.indexOf(prop) !== -1) {
-    return (0, _positions.default)(inputProps);
-  }
-
-  if (_palette.default.filterProps.indexOf(prop) !== -1) {
-    return (0, _palette.default)(inputProps);
-  }
-
-  if (_shadows.default.filterProps.indexOf(prop) !== -1) {
-    return (0, _shadows.default)(inputProps);
-  }
-
-  if (_sizing.default.filterProps.indexOf(prop) !== -1) {
-    return (0, _sizing.default)(inputProps);
-  }
-
-  if (_spacing.default.filterProps.indexOf(prop) !== -1) {
-    return (0, _spacing.default)(inputProps);
-  }
-
-  if (_typography.default.filterProps.indexOf(prop) !== -1) {
-    return (0, _typography.default)(inputProps);
-  }
-
-  return {
+  const styleFunction = propToStyleFunction[prop];
+  return styleFunction ? styleFunction(inputProps) : {
     [prop]: value
@@ -81,0 +73,0 @@ };

index.d.ts

@@ -235,3 +235,3 @@ import * as React from 'react';
   themeKey?: string;
-  transform?: (cssValue: unknown) => number | string | React.CSSProperties;
+  transform?: (cssValue: unknown) => number | string | React.CSSProperties | CSSObject;
 }
@@ -274,4 +274,2 @@ export function style<PropKey extends string, Theme extends object>(
  * will also works.
- *
- * For more information see: https://styled-system.com/responsive-styles.
  */
@@ -399,3 +397,2 @@ export type ResponsiveStyleValue<T> = T | Array<T | null> | { [key: string]: T | null };
    *
-   * @see https://styled-system.com/#margin-props
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-left
@@ -415,3 +412,2 @@ * @see https://developer.mozilla.org/docs/Web/CSS/margin-right
    *
-   * @see https://styled-system.com/#margin-props
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-left
@@ -431,3 +427,2 @@ * @see https://developer.mozilla.org/docs/Web/CSS/margin-right
    *
-   * @see https://styled-system.com/#margin-props
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-top
@@ -447,3 +442,2 @@ * @see https://developer.mozilla.org/docs/Web/CSS/margin-bottom
    *
-   * @see https://styled-system.com/#margin-props
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-top
@@ -520,3 +514,2 @@ * @see https://developer.mozilla.org/docs/Web/CSS/margin-bottom
    *
-   * @see https://styled-system.com/#padding-props
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-left
@@ -535,3 +528,2 @@ * @see https://developer.mozilla.org/docs/Web/CSS/padding-right
    *
-   * @see https://styled-system.com/#padding-props
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-left
@@ -550,3 +542,2 @@ * @see https://developer.mozilla.org/docs/Web/CSS/padding-right
    *
-   * @see https://styled-system.com/#padding-props
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-top
@@ -565,3 +556,2 @@ * @see https://developer.mozilla.org/docs/Web/CSS/padding-bottom
    *
-   * @see https://styled-system.com/#padding-props
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-top
@@ -568,0 +558,0 @@ * @see https://developer.mozilla.org/docs/Web/CSS/padding-bottom

index.js

@@ -1,2 +0,2 @@
-/** @license Material-UI v5.0.0-alpha.17
+/** @license Material-UI v5.0.0-alpha.18
  *
@@ -3,0 +3,0 @@ * This source code is licensed under the MIT license found in the

legacy/borders.js

@@ -0,3 +1,6 @@
+import responsivePropType from './responsivePropType';
 import style from './style';
 import compose from './compose';
+import { createUnaryUnit, getStyleFromPropValue } from './spacing';
+import { handleBreakpoints } from './breakpoints';
 
@@ -41,7 +44,25 @@ function getBorder(value) {
 });
-export var borderRadius = style({
-  prop: 'borderRadius',
-  themeKey: 'shape'
-});
+
+function resolveCssProperty(props, prop, transformer) {
+  // Using a hash computation over an array iteration could be faster, but with only 28 items,
+  // it isn’t worth the bundle size.
+  if (prop !== 'borderRadius') {
+    return null;
+  }
+
+  var cssProperties = ['borderRadius'];
+  var styleFromPropValue = getStyleFromPropValue(cssProperties, transformer);
+  var propValue = props[prop];
+  return handleBreakpoints(props, propValue, styleFromPropValue);
+}
+
+export var borderRadius = function borderRadius(props) {
+  var transformer = createUnaryUnit(props.theme, 'shape.borderRadius', 4, 'borderRadius');
+  return props.borderRadius ? resolveCssProperty(props, 'borderRadius', transformer) : {};
+};
+borderRadius.propTypes = process.env.NODE_ENV !== 'production' ? {
+  borderRadius: responsivePropType
+} : {};
+borderRadius.filterProps = ['borderRadius'];
 var borders = compose(border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderRadius);
 export default borders;

legacy/breakpoints.js

@@ -87,3 +87,3 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 
-function createEmptyBreakpointObject() {
+export function createEmptyBreakpointObject() {
   var _breakpointsInput$key;
@@ -99,4 +99,3 @@
 }
-
-function removeUnusedBreakpoints(breakpointKeys, style) {
+export function removeUnusedBreakpoints(breakpointKeys, style) {
   return breakpointKeys.reduce(function (acc, key) {
@@ -111,5 +110,4 @@ var breakpointOutput = acc[key];
     return acc;
-  }, _extends({}, style));
+  }, style);
 }
-
 export function mergeBreakpointsInOrder(breakpointsInput) {
@@ -116,0 +114,0 @@ var emptyBreakpoints = createEmptyBreakpointObject(breakpointsInput);

legacy/compose.js

@@ -9,8 +9,13 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 
+  var handlers = styles.reduce(function (acc, style) {
+    style.filterProps.forEach(function (prop) {
+      acc[prop] = style;
+    });
+    return acc;
+  }, {});
+
   var fn = function fn(props) {
-    return styles.reduce(function (acc, style) {
-      var output = style(props);
-
-      if (output) {
-        return merge(acc, output);
+    return Object.keys(props).reduce(function (acc, prop) {
+      if (handlers[prop]) {
+        return merge(acc, handlers[prop](props));
       }
@@ -20,19 +25,4 @@
     }, {});
-  }; // Alternative approach that doesn't yield any performance gain.
-  // const handlers = styles.reduce((acc, style) => {
-  //   style.filterProps.forEach(prop => {
-  //     acc[prop] = style;
-  //   });
-  //   return acc;
-  // }, {});
-  // const fn = props => {
-  //   return Object.keys(props).reduce((acc, prop) => {
-  //     if (handlers[prop]) {
-  //       return merge(acc, handlers[prop](props));
-  //     }
-  //     return acc;
-  //   }, {});
-  // };
+  };
 
-
   fn.propTypes = process.env.NODE_ENV !== 'production' ? styles.reduce(function (acc, style) {
@@ -39,0 +29,0 @@ return _extends(acc, style.propTypes);

legacy/getThemeValue.js

@@ -12,2 +12,32 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import typography from './typography';
+var filterPropsMapping = {
+  borders: borders.filterProps,
+  display: display.filterProps,
+  flexbox: flexbox.filterProps,
+  grid: grid.filterProps,
+  positions: positions.filterProps,
+  palette: palette.filterProps,
+  shadows: shadows.filterProps,
+  sizing: sizing.filterProps,
+  spacing: spacing.filterProps,
+  typography: typography.filterProps
+};
+var styleFunctionMapping = {
+  borders: borders,
+  display: display,
+  flexbox: flexbox,
+  grid: grid,
+  positions: positions,
+  palette: palette,
+  shadows: shadows,
+  sizing: sizing,
+  spacing: spacing,
+  typography: typography
+};
+export var propToStyleFunction = Object.keys(filterPropsMapping).reduce(function (acc, styleFnName) {
+  filterPropsMapping[styleFnName].forEach(function (propName) {
+    acc[propName] = styleFunctionMapping[styleFnName];
+  });
+  return acc;
+}, {});
 
@@ -18,46 +48,6 @@ function getThemeValue(prop, value, theme) {
   var inputProps = (_inputProps = {}, _defineProperty(_inputProps, prop, value), _defineProperty(_inputProps, "theme", theme), _inputProps);
-
-  if (borders.filterProps.indexOf(prop) !== -1) {
-    return borders(inputProps);
-  }
-
-  if (display.filterProps.indexOf(prop) !== -1) {
-    return display(inputProps);
-  }
-
-  if (flexbox.filterProps.indexOf(prop) !== -1) {
-    return flexbox(inputProps);
-  }
-
-  if (grid.filterProps.indexOf(prop) !== -1) {
-    return grid(inputProps);
-  }
-
-  if (positions.filterProps.indexOf(prop) !== -1) {
-    return positions(inputProps);
-  }
-
-  if (palette.filterProps.indexOf(prop) !== -1) {
-    return palette(inputProps);
-  }
-
-  if (shadows.filterProps.indexOf(prop) !== -1) {
-    return shadows(inputProps);
-  }
-
-  if (sizing.filterProps.indexOf(prop) !== -1) {
-    return sizing(inputProps);
-  }
-
-  if (spacing.filterProps.indexOf(prop) !== -1) {
-    return spacing(inputProps);
-  }
-
-  if (typography.filterProps.indexOf(prop) !== -1) {
-    return typography(inputProps);
-  }
-
-  return _defineProperty({}, prop, value);
+  var styleFunction = propToStyleFunction[prop];
+  return styleFunction ? styleFunction(inputProps) : _defineProperty({}, prop, value);
 }
 
 export default getThemeValue;

legacy/index.js

@@ -1,2 +0,2 @@
-/** @license Material-UI v5.0.0-alpha.17
+/** @license Material-UI v5.0.0-alpha.18
  *
@@ -3,0 +3,0 @@ * This source code is licensed under the MIT license found in the

legacy/spacing.js

 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import responsivePropType from './responsivePropType';
 import { handleBreakpoints } from './breakpoints';
+import { getPath } from './style';
 import merge from './merge';
@@ -51,4 +52,4 @@ import memoize from './memoize';
 var spacingKeys = [].concat(marginKeys, paddingKeys);
-export function createUnarySpacing(theme) {
-  var themeSpacing = theme.spacing || 8;
+export function createUnaryUnit(theme, themeKey, defaultValue, propName) {
+  var themeSpacing = getPath(theme, themeKey) || defaultValue;
 
@@ -63,3 +64,3 @@ if (typeof themeSpacing === 'number') {
         if (typeof abs !== 'number') {
-          console.error("Material-UI: Expected spacing argument to be a number or a string, got ".concat(abs, "."));
+          console.error("Material-UI: Expected ".concat(propName, " argument to be a number or a string, got ").concat(abs, "."));
         }
@@ -80,3 +81,3 @@ }
         if (!Number.isInteger(abs)) {
-          console.error(['Material-UI: The `theme.spacing` array type cannot be combined with non integer values.' + 'You should either use an integer value that can be used as index, or define the `theme.spacing` as a number.'].join('\n'));
+          console.error(["Material-UI: The `theme.".concat(themeKey, "` array type cannot be combined with non integer values.") + "You should either use an integer value that can be used as index, or define the `theme.".concat(themeKey, "` as a number.")].join('\n'));
         } else if (abs > themeSpacing.length - 1) {
@@ -96,3 +97,3 @@ console.error(["Material-UI: The value provided (".concat(abs, ") overflows."), "The supported values are: ".concat(JSON.stringify(themeSpacing), "."), "".concat(abs, " > ").concat(themeSpacing.length - 1, ", you need to add the missing values.")].join('\n'));
   if (process.env.NODE_ENV !== 'production') {
-    console.error(["Material-UI: The `theme.spacing` value (".concat(themeSpacing, ") is invalid."), 'It should be a number, an array or a function.'].join('\n'));
+    console.error(["Material-UI: The `theme.".concat(themeKey, "` value (").concat(themeSpacing, ") is invalid."), 'It should be a number, an array or a function.'].join('\n'));
   }
@@ -104,4 +105,6 @@
 }
-
-function getValue(transformer, propValue) {
+export function createUnarySpacing(theme) {
+  return createUnaryUnit(theme, 'spacing', 8, 'spacing');
+}
+export function getValue(transformer, propValue) {
   if (typeof propValue === 'string') {
@@ -124,4 +127,3 @@ return propValue;
 }
-
-function getStyleFromPropValue(cssProperties, transformer) {
+export function getStyleFromPropValue(cssProperties, transformer) {
   return function (propValue) {
@@ -128,0 +130,0 @@ return cssProperties.reduce(function (acc, cssProperty) {

legacy/style.js

 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { unstable_capitalize as capitalize } from '@material-ui/utils';
 import responsivePropType from './responsivePropType';
 import { handleBreakpoints } from './breakpoints';
-
-function getPath(obj, path) {
+export function getPath(obj, path) {
   if (!path || typeof path !== 'string') {
@@ -15,2 +15,21 @@ return null;
 
+function getValue(themeMapping, transform, propValueFinal) {
+  var userValue = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : propValueFinal;
+  var value;
+
+  if (typeof themeMapping === 'function') {
+    value = themeMapping(propValueFinal);
+  } else if (Array.isArray(themeMapping)) {
+    value = themeMapping[propValueFinal] || userValue;
+  } else {
+    value = getPath(themeMapping, propValueFinal) || userValue;
+
+    if (transform) {
+      value = transform(value);
+    }
+  }
+
+  return value;
+}
+
 function style(options) {
@@ -33,14 +52,7 @@ var prop = options.prop,
     var styleFromPropValue = function styleFromPropValue(propValueFinal) {
-      var value;
+      var value = getValue(themeMapping, transform, propValueFinal);
 
-      if (typeof themeMapping === 'function') {
-        value = themeMapping(propValueFinal);
-      } else if (Array.isArray(themeMapping)) {
-        value = themeMapping[propValueFinal] || propValueFinal;
-      } else {
-        value = getPath(themeMapping, propValueFinal) || propValueFinal;
-
-        if (transform) {
-          value = transform(value);
-        }
+      if (propValueFinal === value && typeof propValueFinal === 'string') {
+        // Haven't found value
+        value = getValue(themeMapping, transform, "".concat(prop).concat(propValueFinal === 'default' ? '' : capitalize(propValueFinal)), propValueFinal);
       }
@@ -47,0 +59,0 @@

legacy/styleFunctionSx.js

 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import { deepmerge } from '@material-ui/utils';
-import getThemeValue from './getThemeValue';
-import { handleBreakpoints, mergeBreakpointsInOrder } from './breakpoints';
-import borders from './borders';
-import display from './display';
-import flexbox from './flexbox';
-import grid from './grid';
-import positions from './positions';
-import palette from './palette';
-import shadows from './shadows';
-import sizing from './sizing';
-import spacing from './spacing';
-import typography from './typography';
-var filterProps = [].concat(_toConsumableArray(borders.filterProps), _toConsumableArray(display.filterProps), _toConsumableArray(flexbox.filterProps), _toConsumableArray(grid.filterProps), _toConsumableArray(positions.filterProps), _toConsumableArray(palette.filterProps), _toConsumableArray(shadows.filterProps), _toConsumableArray(sizing.filterProps), _toConsumableArray(spacing.filterProps), _toConsumableArray(typography.filterProps), ['sx']);
+import merge from './merge';
+import getThemeValue, { propToStyleFunction } from './getThemeValue';
+import { handleBreakpoints, createEmptyBreakpointObject, removeUnusedBreakpoints } from './breakpoints';
 
@@ -33,6 +21,11 @@ function objectsHaveSameKeys() {
 
+function callIfFn(maybeFn, arg) {
+  return typeof maybeFn === 'function' ? maybeFn(arg) : maybeFn;
+}
+
 function styleFunctionSx(props) {
   var _ref = props || {},
       styles = _ref.sx,
-      theme = _ref.theme;
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? {} : _ref$theme;
 
@@ -50,31 +43,32 @@ if (!styles) return null;
 
-  var css = {};
+  var emptyBreakpoints = createEmptyBreakpointObject(theme.breakpoints);
+  var breakpointsKeys = Object.keys(emptyBreakpoints);
+  var css = emptyBreakpoints;
   Object.keys(styles).forEach(function (styleKey) {
-    if (_typeof(styles[styleKey]) === 'object') {
-      if (filterProps.indexOf(styleKey) !== -1) {
-        css = deepmerge(css, getThemeValue(styleKey, styles[styleKey], theme));
+    var value = callIfFn(styles[styleKey], theme);
+
+    if (_typeof(value) === 'object') {
+      if (propToStyleFunction[styleKey]) {
+        css = merge(css, getThemeValue(styleKey, value, theme));
       } else {
         var breakpointsValues = handleBreakpoints({
           theme: theme
-        }, styles[styleKey], function (x) {
+        }, value, function (x) {
           return _defineProperty({}, styleKey, x);
         });
 
-        if (objectsHaveSameKeys(breakpointsValues, styles[styleKey])) {
-          var transformedValue = styleFunctionSx({
-            sx: styles[styleKey],
+        if (objectsHaveSameKeys(breakpointsValues, value)) {
+          css[styleKey] = styleFunctionSx({
+            sx: value,
             theme: theme
           });
-          css[styleKey] = transformedValue;
         } else {
-          css = deepmerge(css, breakpointsValues);
+          css = merge(css, breakpointsValues);
         }
       }
-    } else if (typeof styles[styleKey] === 'function') {
-      css = deepmerge(css, _defineProperty({}, styleKey, styles[styleKey](theme)));
     } else {
-      css = deepmerge(css, getThemeValue(styleKey, styles[styleKey], theme));
+      css = merge(css, getThemeValue(styleKey, value, theme));
     }
   });
-  return mergeBreakpointsInOrder(theme.breakpoints, css);
+  return removeUnusedBreakpoints(breakpointsKeys, css);
 }
@@ -81,0 +75,0 @@

modern/borders.js

@@ -0,3 +1,6 @@
+import responsivePropType from './responsivePropType';
 import style from './style';
 import compose from './compose';
+import { createUnaryUnit, getStyleFromPropValue } from './spacing';
+import { handleBreakpoints } from './breakpoints';
 
@@ -41,7 +44,25 @@ function getBorder(value) {
 });
-export const borderRadius = style({
-  prop: 'borderRadius',
-  themeKey: 'shape'
-});
+
+function resolveCssProperty(props, prop, transformer) {
+  // Using a hash computation over an array iteration could be faster, but with only 28 items,
+  // it isn’t worth the bundle size.
+  if (prop !== 'borderRadius') {
+    return null;
+  }
+
+  const cssProperties = ['borderRadius'];
+  const styleFromPropValue = getStyleFromPropValue(cssProperties, transformer);
+  const propValue = props[prop];
+  return handleBreakpoints(props, propValue, styleFromPropValue);
+}
+
+export const borderRadius = props => {
+  const transformer = createUnaryUnit(props.theme, 'shape.borderRadius', 4, 'borderRadius');
+  return props.borderRadius ? resolveCssProperty(props, 'borderRadius', transformer) : {};
+};
+borderRadius.propTypes = process.env.NODE_ENV !== 'production' ? {
+  borderRadius: responsivePropType
+} : {};
+borderRadius.filterProps = ['borderRadius'];
 const borders = compose(border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderRadius);
 export default borders;

modern/breakpoints.js

@@ -82,3 +82,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 
-function createEmptyBreakpointObject(breakpointsInput = {}) {
+export function createEmptyBreakpointObject(breakpointsInput = {}) {
   const breakpointsInOrder = breakpointsInput?.keys?.reduce((acc, key) => {
@@ -91,4 +91,3 @@ const breakpointStyleKey = breakpointsInput.up(key);
 }
-
-function removeUnusedBreakpoints(breakpointKeys, style) {
+export function removeUnusedBreakpoints(breakpointKeys, style) {
   return breakpointKeys.reduce((acc, key) => {
@@ -103,5 +102,4 @@ const breakpointOutput = acc[key];
     return acc;
-  }, _extends({}, style));
+  }, style);
 }
-
 export function mergeBreakpointsInOrder(breakpointsInput, ...styles) {
@@ -108,0 +106,0 @@ const emptyBreakpoints = createEmptyBreakpointObject(breakpointsInput);

modern/compose.js

 import merge from './merge';
 
 function compose(...styles) {
-  const fn = props => styles.reduce((acc, style) => {
-    const output = style(props);
+  const handlers = styles.reduce((acc, style) => {
+    style.filterProps.forEach(prop => {
+      acc[prop] = style;
+    });
+    return acc;
+  }, {});
 
-    if (output) {
-      return merge(acc, output);
-    }
+  const fn = props => {
+    return Object.keys(props).reduce((acc, prop) => {
+      if (handlers[prop]) {
+        return merge(acc, handlers[prop](props));
+      }
 
-    return acc;
-  }, {}); // Alternative approach that doesn't yield any performance gain.
-  // const handlers = styles.reduce((acc, style) => {
-  //   style.filterProps.forEach(prop => {
-  //     acc[prop] = style;
-  //   });
-  //   return acc;
-  // }, {});
-  // const fn = props => {
-  //   return Object.keys(props).reduce((acc, prop) => {
-  //     if (handlers[prop]) {
-  //       return merge(acc, handlers[prop](props));
-  //     }
-  //     return acc;
-  //   }, {});
-  // };
+      return acc;
+    }, {});
+  };
 
-
   fn.propTypes = process.env.NODE_ENV !== 'production' ? styles.reduce((acc, style) => Object.assign(acc, style.propTypes), {}) : {};
@@ -30,0 +22,0 @@ fn.filterProps = styles.reduce((acc, style) => acc.concat(style.filterProps), []);

modern/getThemeValue.js

@@ -11,2 +11,32 @@ import borders from './borders';
 import typography from './typography';
+const filterPropsMapping = {
+  borders: borders.filterProps,
+  display: display.filterProps,
+  flexbox: flexbox.filterProps,
+  grid: grid.filterProps,
+  positions: positions.filterProps,
+  palette: palette.filterProps,
+  shadows: shadows.filterProps,
+  sizing: sizing.filterProps,
+  spacing: spacing.filterProps,
+  typography: typography.filterProps
+};
+const styleFunctionMapping = {
+  borders,
+  display,
+  flexbox,
+  grid,
+  positions,
+  palette,
+  shadows,
+  sizing,
+  spacing,
+  typography
+};
+export const propToStyleFunction = Object.keys(filterPropsMapping).reduce((acc, styleFnName) => {
+  filterPropsMapping[styleFnName].forEach(propName => {
+    acc[propName] = styleFunctionMapping[styleFnName];
+  });
+  return acc;
+}, {});
 
@@ -18,44 +48,4 @@ function getThemeValue(prop, value, theme) {
   };
-
-  if (borders.filterProps.indexOf(prop) !== -1) {
-    return borders(inputProps);
-  }
-
-  if (display.filterProps.indexOf(prop) !== -1) {
-    return display(inputProps);
-  }
-
-  if (flexbox.filterProps.indexOf(prop) !== -1) {
-    return flexbox(inputProps);
-  }
-
-  if (grid.filterProps.indexOf(prop) !== -1) {
-    return grid(inputProps);
-  }
-
-  if (positions.filterProps.indexOf(prop) !== -1) {
-    return positions(inputProps);
-  }
-
-  if (palette.filterProps.indexOf(prop) !== -1) {
-    return palette(inputProps);
-  }
-
-  if (shadows.filterProps.indexOf(prop) !== -1) {
-    return shadows(inputProps);
-  }
-
-  if (sizing.filterProps.indexOf(prop) !== -1) {
-    return sizing(inputProps);
-  }
-
-  if (spacing.filterProps.indexOf(prop) !== -1) {
-    return spacing(inputProps);
-  }
-
-  if (typography.filterProps.indexOf(prop) !== -1) {
-    return typography(inputProps);
-  }
-
-  return {
+  const styleFunction = propToStyleFunction[prop];
+  return styleFunction ? styleFunction(inputProps) : {
     [prop]: value
@@ -62,0 +52,0 @@ };

modern/index.js

@@ -1,2 +0,2 @@
-/** @license Material-UI v5.0.0-alpha.17
+/** @license Material-UI v5.0.0-alpha.18
  *
@@ -3,0 +3,0 @@ * This source code is licensed under the MIT license found in the

modern/spacing.js

 import responsivePropType from './responsivePropType';
 import { handleBreakpoints } from './breakpoints';
+import { getPath } from './style';
 import merge from './merge';
@@ -44,4 +45,4 @@ import memoize from './memoize';
 const spacingKeys = [...marginKeys, ...paddingKeys];
-export function createUnarySpacing(theme) {
-  const themeSpacing = theme.spacing || 8;
+export function createUnaryUnit(theme, themeKey, defaultValue, propName) {
+  const themeSpacing = getPath(theme, themeKey) || defaultValue;
 
@@ -56,3 +57,3 @@ if (typeof themeSpacing === 'number') {
         if (typeof abs !== 'number') {
-          console.error(`Material-UI: Expected spacing argument to be a number or a string, got ${abs}.`);
+          console.error(`Material-UI: Expected ${propName} argument to be a number or a string, got ${abs}.`);
         }
@@ -73,3 +74,3 @@ }
         if (!Number.isInteger(abs)) {
-          console.error(['Material-UI: The `theme.spacing` array type cannot be combined with non integer values.' + 'You should either use an integer value that can be used as index, or define the `theme.spacing` as a number.'].join('\n'));
+          console.error([`Material-UI: The \`theme.${themeKey}\` array type cannot be combined with non integer values.` + `You should either use an integer value that can be used as index, or define the \`theme.${themeKey}\` as a number.`].join('\n'));
         } else if (abs > themeSpacing.length - 1) {
@@ -89,3 +90,3 @@ console.error([`Material-UI: The value provided (${abs}) overflows.`, `The supported values are: ${JSON.stringify(themeSpacing)}.`, `${abs} > ${themeSpacing.length - 1}, you need to add the missing values.`].join('\n'));
   if (process.env.NODE_ENV !== 'production') {
-    console.error([`Material-UI: The \`theme.spacing\` value (${themeSpacing}) is invalid.`, 'It should be a number, an array or a function.'].join('\n'));
+    console.error([`Material-UI: The \`theme.${themeKey}\` value (${themeSpacing}) is invalid.`, 'It should be a number, an array or a function.'].join('\n'));
   }
@@ -95,4 +96,6 @@
 }
-
-function getValue(transformer, propValue) {
+export function createUnarySpacing(theme) {
+  return createUnaryUnit(theme, 'spacing', 8, 'spacing');
+}
+export function getValue(transformer, propValue) {
   if (typeof propValue === 'string') {
@@ -115,4 +118,3 @@ return propValue;
 }
-
-function getStyleFromPropValue(cssProperties, transformer) {
+export function getStyleFromPropValue(cssProperties, transformer) {
   return propValue => cssProperties.reduce((acc, cssProperty) => {
@@ -119,0 +121,0 @@ acc[cssProperty] = getValue(transformer, propValue);

modern/style.js

@@ -0,5 +1,5 @@
+import { unstable_capitalize as capitalize } from '@material-ui/utils';
 import responsivePropType from './responsivePropType';
 import { handleBreakpoints } from './breakpoints';
-
-function getPath(obj, path) {
+export function getPath(obj, path) {
   if (!path || typeof path !== 'string') {
@@ -12,2 +12,20 @@ return null;
 
+function getValue(themeMapping, transform, propValueFinal, userValue = propValueFinal) {
+  let value;
+
+  if (typeof themeMapping === 'function') {
+    value = themeMapping(propValueFinal);
+  } else if (Array.isArray(themeMapping)) {
+    value = themeMapping[propValueFinal] || userValue;
+  } else {
+    value = getPath(themeMapping, propValueFinal) || userValue;
+
+    if (transform) {
+      value = transform(value);
+    }
+  }
+
+  return value;
+}
+
 function style(options) {
@@ -31,14 +49,7 @@ const {
     const styleFromPropValue = propValueFinal => {
-      let value;
+      let value = getValue(themeMapping, transform, propValueFinal);
 
-      if (typeof themeMapping === 'function') {
-        value = themeMapping(propValueFinal);
-      } else if (Array.isArray(themeMapping)) {
-        value = themeMapping[propValueFinal] || propValueFinal;
-      } else {
-        value = getPath(themeMapping, propValueFinal) || propValueFinal;
-
-        if (transform) {
-          value = transform(value);
-        }
+      if (propValueFinal === value && typeof propValueFinal === 'string') {
+        // Haven't found value
+        value = getValue(themeMapping, transform, `${prop}${propValueFinal === 'default' ? '' : capitalize(propValueFinal)}`, propValueFinal);
       }
@@ -45,0 +56,0 @@

modern/styleFunctionSx.js

@@ -1,15 +0,4 @@
-import { deepmerge } from '@material-ui/utils';
-import getThemeValue from './getThemeValue';
-import { handleBreakpoints, mergeBreakpointsInOrder } from './breakpoints';
-import borders from './borders';
-import display from './display';
-import flexbox from './flexbox';
-import grid from './grid';
-import positions from './positions';
-import palette from './palette';
-import shadows from './shadows';
-import sizing from './sizing';
-import spacing from './spacing';
-import typography from './typography';
-const filterProps = [...borders.filterProps, ...display.filterProps, ...flexbox.filterProps, ...grid.filterProps, ...positions.filterProps, ...palette.filterProps, ...shadows.filterProps, ...sizing.filterProps, ...spacing.filterProps, ...typography.filterProps, 'sx'];
+import merge from './merge';
+import getThemeValue, { propToStyleFunction } from './getThemeValue';
+import { handleBreakpoints, createEmptyBreakpointObject, removeUnusedBreakpoints } from './breakpoints';
 
@@ -22,6 +11,10 @@ function objectsHaveSameKeys(...objects) {
 
+function callIfFn(maybeFn, arg) {
+  return typeof maybeFn === 'function' ? maybeFn(arg) : maybeFn;
+}
+
 function styleFunctionSx(props) {
   const {
     sx: styles,
-    theme
+    theme = {}
   } = props || {};
@@ -39,33 +32,32 @@ if (!styles) return null;
 
-  let css = {};
+  const emptyBreakpoints = createEmptyBreakpointObject(theme.breakpoints);
+  const breakpointsKeys = Object.keys(emptyBreakpoints);
+  let css = emptyBreakpoints;
   Object.keys(styles).forEach(styleKey => {
-    if (typeof styles[styleKey] === 'object') {
-      if (filterProps.indexOf(styleKey) !== -1) {
-        css = deepmerge(css, getThemeValue(styleKey, styles[styleKey], theme));
+    const value = callIfFn(styles[styleKey], theme);
+
+    if (typeof value === 'object') {
+      if (propToStyleFunction[styleKey]) {
+        css = merge(css, getThemeValue(styleKey, value, theme));
       } else {
         const breakpointsValues = handleBreakpoints({
           theme
-        }, styles[styleKey], x => ({
+        }, value, x => ({
           [styleKey]: x
         }));
 
-        if (objectsHaveSameKeys(breakpointsValues, styles[styleKey])) {
-          const transformedValue = styleFunctionSx({
-            sx: styles[styleKey],
+        if (objectsHaveSameKeys(breakpointsValues, value)) {
+          css[styleKey] = styleFunctionSx({
+            sx: value,
             theme
           });
-          css[styleKey] = transformedValue;
         } else {
-          css = deepmerge(css, breakpointsValues);
+          css = merge(css, breakpointsValues);
         }
       }
-    } else if (typeof styles[styleKey] === 'function') {
-      css = deepmerge(css, {
-        [styleKey]: styles[styleKey](theme)
-      });
     } else {
-      css = deepmerge(css, getThemeValue(styleKey, styles[styleKey], theme));
+      css = merge(css, getThemeValue(styleKey, value, theme));
     }
   });
-  return mergeBreakpointsInOrder(theme.breakpoints, css);
+  return removeUnusedBreakpoints(breakpointsKeys, css);
 }
@@ -72,0 +64,0 @@

package.json

 {
   "name": "@material-ui/system",
-  "version": "5.0.0-alpha.17",
+  "version": "5.0.0-alpha.18",
   "private": false,
@@ -40,3 +40,3 @@ "author": "Material-UI Team",
     "@babel/runtime": "^7.4.4",
-    "@material-ui/utils": "^5.0.0-alpha.17",
+    "@material-ui/utils": "^5.0.0-alpha.18",
     "prop-types": "^15.7.2",
@@ -43,0 +43,0 @@ "csstype": "^3.0.2"

spacing.js

@@ -8,3 +8,6 @@ "use strict";
 });
+exports.createUnaryUnit = createUnaryUnit;
 exports.createUnarySpacing = createUnarySpacing;
+exports.getValue = getValue;
+exports.getStyleFromPropValue = getStyleFromPropValue;
 exports.margin = margin;
@@ -18,2 +21,4 @@ exports.padding = padding;
 
+var _style = require("./style");
+
 var _merge = _interopRequireDefault(require("./merge"));
@@ -63,4 +68,4 @@
 
-function createUnarySpacing(theme) {
-  const themeSpacing = theme.spacing || 8;
+function createUnaryUnit(theme, themeKey, defaultValue, propName) {
+  const themeSpacing = (0, _style.getPath)(theme, themeKey) || defaultValue;
 
@@ -75,3 +80,3 @@ if (typeof themeSpacing === 'number') {
         if (typeof abs !== 'number') {
-          console.error(`Material-UI: Expected spacing argument to be a number or a string, got ${abs}.`);
+          console.error(`Material-UI: Expected ${propName} argument to be a number or a string, got ${abs}.`);
         }
@@ -92,3 +97,3 @@ }
         if (!Number.isInteger(abs)) {
-          console.error(['Material-UI: The `theme.spacing` array type cannot be combined with non integer values.' + 'You should either use an integer value that can be used as index, or define the `theme.spacing` as a number.'].join('\n'));
+          console.error([`Material-UI: The \`theme.${themeKey}\` array type cannot be combined with non integer values.` + `You should either use an integer value that can be used as index, or define the \`theme.${themeKey}\` as a number.`].join('\n'));
         } else if (abs > themeSpacing.length - 1) {
@@ -108,3 +113,3 @@ console.error([`Material-UI: The value provided (${abs}) overflows.`, `The supported values are: ${JSON.stringify(themeSpacing)}.`, `${abs} > ${themeSpacing.length - 1}, you need to add the missing values.`].join('\n'));
   if (process.env.NODE_ENV !== 'production') {
-    console.error([`Material-UI: The \`theme.spacing\` value (${themeSpacing}) is invalid.`, 'It should be a number, an array or a function.'].join('\n'));
+    console.error([`Material-UI: The \`theme.${themeKey}\` value (${themeSpacing}) is invalid.`, 'It should be a number, an array or a function.'].join('\n'));
   }
@@ -115,2 +120,6 @@
 
+function createUnarySpacing(theme) {
+  return createUnaryUnit(theme, 'spacing', 8, 'spacing');
+}
+
 function getValue(transformer, propValue) {
@@ -117,0 +126,0 @@ if (typeof propValue === 'string') {

style.js

@@ -8,4 +8,7 @@ "use strict";
 });
+exports.getPath = getPath;
 exports.default = void 0;
 
+var _utils = require("@material-ui/utils");
+
 var _responsivePropType = _interopRequireDefault(require("./responsivePropType"));
@@ -23,2 +26,20 @@
 
+function getValue(themeMapping, transform, propValueFinal, userValue = propValueFinal) {
+  let value;
+
+  if (typeof themeMapping === 'function') {
+    value = themeMapping(propValueFinal);
+  } else if (Array.isArray(themeMapping)) {
+    value = themeMapping[propValueFinal] || userValue;
+  } else {
+    value = getPath(themeMapping, propValueFinal) || userValue;
+
+    if (transform) {
+      value = transform(value);
+    }
+  }
+
+  return value;
+}
+
 function style(options) {
@@ -42,14 +63,7 @@ const {
     const styleFromPropValue = propValueFinal => {
-      let value;
+      let value = getValue(themeMapping, transform, propValueFinal);
 
-      if (typeof themeMapping === 'function') {
-        value = themeMapping(propValueFinal);
-      } else if (Array.isArray(themeMapping)) {
-        value = themeMapping[propValueFinal] || propValueFinal;
-      } else {
-        value = getPath(themeMapping, propValueFinal) || propValueFinal;
-
-        if (transform) {
-          value = transform(value);
-        }
+      if (propValueFinal === value && typeof propValueFinal === 'string') {
+        // Haven't found value
+        value = getValue(themeMapping, transform, `${prop}${propValueFinal === 'default' ? '' : (0, _utils.unstable_capitalize)(propValueFinal)}`, propValueFinal);
       }
@@ -56,0 +70,0 @@

styleFunctionSx.js

 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -10,30 +12,8 @@
 
-var _utils = require("@material-ui/utils");
+var _merge = _interopRequireDefault(require("./merge"));
 
-var _getThemeValue = _interopRequireDefault(require("./getThemeValue"));
+var _getThemeValue = _interopRequireWildcard(require("./getThemeValue"));
 
 var _breakpoints = require("./breakpoints");
 
-var _borders = _interopRequireDefault(require("./borders"));
-
-var _display = _interopRequireDefault(require("./display"));
-
-var _flexbox = _interopRequireDefault(require("./flexbox"));
-
-var _grid = _interopRequireDefault(require("./grid"));
-
-var _positions = _interopRequireDefault(require("./positions"));
-
-var _palette = _interopRequireDefault(require("./palette"));
-
-var _shadows = _interopRequireDefault(require("./shadows"));
-
-var _sizing = _interopRequireDefault(require("./sizing"));
-
-var _spacing = _interopRequireDefault(require("./spacing"));
-
-var _typography = _interopRequireDefault(require("./typography"));
-
-const filterProps = [..._borders.default.filterProps, ..._display.default.filterProps, ..._flexbox.default.filterProps, ..._grid.default.filterProps, ..._positions.default.filterProps, ..._palette.default.filterProps, ..._shadows.default.filterProps, ..._sizing.default.filterProps, ..._spacing.default.filterProps, ..._typography.default.filterProps, 'sx'];
-
 function objectsHaveSameKeys(...objects) {
@@ -45,6 +25,10 @@ const allKeys = objects.reduce((keys, object) => keys.concat(Object.keys(object)), []);
 
+function callIfFn(maybeFn, arg) {
+  return typeof maybeFn === 'function' ? maybeFn(arg) : maybeFn;
+}
+
 function styleFunctionSx(props) {
   const {
     sx: styles,
-    theme
+    theme = {}
   } = props || {};
@@ -62,33 +46,32 @@ if (!styles) return null;
 
-  let css = {};
+  const emptyBreakpoints = (0, _breakpoints.createEmptyBreakpointObject)(theme.breakpoints);
+  const breakpointsKeys = Object.keys(emptyBreakpoints);
+  let css = emptyBreakpoints;
   Object.keys(styles).forEach(styleKey => {
-    if (typeof styles[styleKey] === 'object') {
-      if (filterProps.indexOf(styleKey) !== -1) {
-        css = (0, _utils.deepmerge)(css, (0, _getThemeValue.default)(styleKey, styles[styleKey], theme));
+    const value = callIfFn(styles[styleKey], theme);
+
+    if (typeof value === 'object') {
+      if (_getThemeValue.propToStyleFunction[styleKey]) {
+        css = (0, _merge.default)(css, (0, _getThemeValue.default)(styleKey, value, theme));
       } else {
         const breakpointsValues = (0, _breakpoints.handleBreakpoints)({
           theme
-        }, styles[styleKey], x => ({
+        }, value, x => ({
           [styleKey]: x
         }));
 
-        if (objectsHaveSameKeys(breakpointsValues, styles[styleKey])) {
-          const transformedValue = styleFunctionSx({
-            sx: styles[styleKey],
+        if (objectsHaveSameKeys(breakpointsValues, value)) {
+          css[styleKey] = styleFunctionSx({
+            sx: value,
             theme
           });
-          css[styleKey] = transformedValue;
         } else {
-          css = (0, _utils.deepmerge)(css, breakpointsValues);
+          css = (0, _merge.default)(css, breakpointsValues);
         }
       }
-    } else if (typeof styles[styleKey] === 'function') {
-      css = (0, _utils.deepmerge)(css, {
-        [styleKey]: styles[styleKey](theme)
-      });
     } else {
-      css = (0, _utils.deepmerge)(css, (0, _getThemeValue.default)(styleKey, styles[styleKey], theme));
+      css = (0, _merge.default)(css, (0, _getThemeValue.default)(styleKey, value, theme));
     }
   });
-  return (0, _breakpoints.mergeBreakpointsInOrder)(theme.breakpoints, css);
+  return (0, _breakpoints.removeUnusedBreakpoints)(breakpointsKeys, css);
 }
@@ -95,0 +78,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

815974

increased by0.85%

Lines of code

4140

increased by1.4%

Worsened metrics

Number of low supply chain risk alerts

48

increased by9.09%

Dependency changes

• Updated@material-ui/utils@^5.0.0-alpha.18