@mui/system 5.4.3 → 5.5.1

package/modern/cssVars/cssVarsParser.js

@@ -85,19 +85,20 @@ const getCssValue = (keys, value) => {
  *  `basePrefix`: defined by design system.
  *  `prefix`: defined by application
  *
- *   This function also mutate the string value of theme input by replacing `basePrefix` (if existed) with `prefix`
+ *   the CSS variable value will be adjusted based on the provided `basePrefix` & `prefix` which can be found in `parsedTheme`.
  *
- * @returns {{ css: Object, vars: Object }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme)
+ * @returns {{ css: Object, vars: Object, parsedTheme: typeof theme }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme), and `parsedTheme` is the cloned version of theme.
  *
  * @example
- * const { css, vars } = parser({
+ * const { css, vars, parsedTheme } = parser({
  *   fontSize: 12,
  *   lineHeight: 1.2,
- *   palette: { primary: { 500: '#000000' } }
- * })
+ *   palette: { primary: { 500: 'var(--color)' } }
+ * }, { prefix: 'foo' })
  *
- * console.log(css) // { '--fontSize': '12px', '--lineHeight': 1.2, '--palette-primary-500': '#000000' }
- * console.log(vars) // { fontSize: '--fontSize', lineHeight: '--lineHeight', palette: { primary: { 500: 'var(--palette-primary-500)' } } }
+ * console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--foo-color)' }
+ * console.log(vars) // { fontSize: '--foo-fontSize', lineHeight: '--foo-lineHeight', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
+ * console.log(parsedTheme) // { fontSize: 12, lineHeight: 1.2, palette: { primary: { 500: 'var(--foo-color)' } } }
  */
 
 
@@ -109,21 +110,17 @@ export default function cssVarsParser(theme, options) {
   } = options || {};
   const css = {};
   const vars = {};
-  walkObjectDeep(theme, (keys, val, scope) => {
-    if (typeof val === 'string' || typeof val === 'number') {
-      let value = val;
-
+  const parsedTheme = {};
+  walkObjectDeep(theme, (keys, value) => {
+    if (typeof value === 'string' || typeof value === 'number') {
       if (typeof value === 'string' && value.match(/var\(\s*--/)) {
-        // replace the value of the `scope` object with the prefix or remove basePrefix from the value
+        // for CSS variable, apply prefix or remove basePrefix from the variable
         if (!basePrefix && prefix) {
           value = value.replace(/var\(\s*--/g, `var(--${prefix}-`);
         } else {
           value = prefix ? value.replace(new RegExp(`var\\(\\s*--${basePrefix}`, 'g'), `var(--${prefix}`) // removing spaces
           : value.replace(new RegExp(`var\\(\\s*--${basePrefix}-`, 'g'), 'var(--');
-        } // scope is the deepest object in the tree, keys is the theme path keys
-
-
-        scope[keys.slice(-1)[0]] = value;
+        }
       }
 
       if (!shouldSkipGeneratingVar || shouldSkipGeneratingVar && !shouldSkipGeneratingVar(keys, value)) {
@@ -135,10 +132,13 @@ export default function cssVarsParser(theme, options) {
         assignNestedKeys(vars, keys, `var(${cssVar})`);
       }
     }
+
+    assignNestedKeys(parsedTheme, keys, value);
   }, keys => keys[0] === 'vars' // skip 'vars/*' paths
   );
   return {
     css,
-    vars
+    vars,
+    parsedTheme
   };
 }

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.4.3
+/** @license MUI v5.5.1
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "5.4.3",
+  "version": "5.5.1",
   "private": false,
   "author": "MUI Team",
   "description": "CSS utilities for rapidly laying out custom designs.",
@@ -43,13 +43,13 @@
     }
   },
   "dependencies": {
-    "@babel/runtime": "^7.17.0",
-    "@mui/private-theming": "^5.4.2",
-    "@mui/styled-engine": "^5.4.2",
-    "@mui/types": "^7.1.2",
-    "@mui/utils": "^5.4.2",
+    "@babel/runtime": "^7.17.2",
+    "@mui/private-theming": "^5.4.4",
+    "@mui/styled-engine": "^5.4.4",
+    "@mui/types": "^7.1.3",
+    "@mui/utils": "^5.4.4",
     "clsx": "^1.1.1",
-    "csstype": "^3.0.10",
+    "csstype": "^3.0.11",
     "prop-types": "^15.7.2"
   },
   "sideEffects": false,

package/styleFunctionSx/styleFunctionSx.d.ts

@@ -24,6 +24,18 @@ export interface CSSSelectorObject<Theme extends object = {}> {
   [cssSelector: string]: ((theme: Theme) => SystemStyleObject<Theme>) | SystemStyleObject<Theme>;
 }
 
+type CssVariableType = string | number;
+
+/**
+ * Map all nested selectors and CSS variables.
+ */
+export interface CSSSelectorObjectOrCssVariables<Theme extends object = {}> {
+  [cssSelectorOrVariable: string]:
+    | ((theme: Theme) => SystemStyleObject<Theme> | string | number)
+    | SystemStyleObject<Theme>
+    | CssVariableType;
+}
+
 /**
  * Map of all available CSS properties (including aliases) and their raw value.
  * Only used internally to map CSS properties to input types (responsive value,
@@ -48,8 +60,7 @@ export type SystemCssProperties<Theme extends object = {}> = {
 export type SystemStyleObject<Theme extends object = {}> =
   | SystemCssProperties<Theme>
   | CSSPseudoSelectorProps<Theme>
-  | CSSSelectorObject<Theme>
-  | { [cssVariable: string]: string | number }
+  | CSSSelectorObjectOrCssVariables<Theme>
   | null;
 
 /**

package/styleFunctionSx/styleFunctionSx.spec.d.ts

@@ -1 +1 @@
-export {};
+export {};