@mui/system 5.8.6 → 5.8.7

package/modern/cssVars/createCssVarsProvider.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
-const _excluded = ["colorSchemes", "components"];
+const _excluded = ["colorSchemes", "components", "cssVarPrefix"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { deepmerge, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
@@ -10,7 +10,6 @@ import cssVarsParser from './cssVarsParser';
 import ThemeProvider from '../ThemeProvider';
 import systemGetInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
 import useCurrentColorScheme from './useCurrentColorScheme';
-import createGetCssVar from './createGetCssVar';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
@@ -24,8 +23,7 @@ export default function createCssVarsProvider(options) {
     defaultColorScheme: designSystemColorScheme,
     disableTransitionOnChange: designSystemTransitionOnChange = false,
     enableColorScheme: designSystemEnableColorScheme = true,
-    prefix: designSystemPrefix = '',
-    shouldSkipGeneratingVar,
+    shouldSkipGeneratingVar: designSystemShouldSkipGeneratingVar,
     resolveTheme
   } = options;
 
@@ -48,7 +46,6 @@ export default function createCssVarsProvider(options) {
   function CssVarsProvider({
     children,
     theme: themeProp = defaultTheme,
-    prefix = designSystemPrefix,
     modeStorageKey = defaultModeStorageKey,
     colorSchemeStorageKey = defaultColorSchemeStorageKey,
     attribute = defaultAttribute,
@@ -59,13 +56,15 @@ export default function createCssVarsProvider(options) {
     storageWindow = typeof window === 'undefined' ? undefined : window,
     documentNode = typeof document === 'undefined' ? undefined : document,
     colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
-    colorSchemeSelector = ':root'
+    colorSchemeSelector = ':root',
+    shouldSkipGeneratingVar = designSystemShouldSkipGeneratingVar
   }) {
     const hasMounted = React.useRef(false);
 
     const {
       colorSchemes = {},
-      components = {}
+      components = {},
+      cssVarPrefix
     } = themeProp,
           restThemeProp = _objectWithoutPropertiesLoose(themeProp, _excluded);
 
@@ -110,16 +109,14 @@ export default function createCssVarsProvider(options) {
       vars: rootVars,
       parsedTheme
     } = cssVarsParser(theme, {
-      prefix,
-      basePrefix: designSystemPrefix,
+      prefix: cssVarPrefix,
       shouldSkipGeneratingVar
     });
     theme = _extends({}, parsedTheme, {
       components,
       colorSchemes,
-      prefix,
+      cssVarPrefix,
       vars: rootVars,
-      getCssVar: createGetCssVar(prefix),
       getColorSchemeSelector: targetColorScheme => `[${attribute}="${targetColorScheme}"] &`
     });
     const defaultColorSchemeStyleSheet = {};
@@ -130,8 +127,7 @@ export default function createCssVarsProvider(options) {
         vars,
         parsedTheme: parsedScheme
       } = cssVarsParser(scheme, {
-        prefix,
-        basePrefix: designSystemPrefix,
+        prefix: cssVarPrefix,
         shouldSkipGeneratingVar
       });
       theme.vars = deepmerge(theme.vars, vars);
@@ -295,9 +291,9 @@ export default function createCssVarsProvider(options) {
     modeStorageKey: PropTypes.string,
 
     /**
-     * CSS variable prefix.
+     * A function to determine if the key, value should be attached as CSS Variable
      */
-    prefix: PropTypes.string,
+    shouldSkipGeneratingVar: PropTypes.func,
 
     /**
      * The window that attaches the 'storage' event listener

package/modern/cssVars/createGetCssVar.js

@@ -18,8 +18,8 @@ export default function createGetCssVar(prefix = '') {
   } // AdditionalVars makes `getCssVar` less strict, so it can be use like this `getCssVar('non-mui-variable')` without type error.
 
 
-  const getCssVar = (field, ...vars) => {
-    return `var(--${prefix ? `${prefix}-` : ''}${field}${appendVar(...vars)})`;
+  const getCssVar = (field, ...fallbacks) => {
+    return `var(--${prefix ? `${prefix}-` : ''}${field}${appendVar(...fallbacks)})`;
   };
 
   return getCssVar;

package/modern/cssVars/cssVarsParser.js

@@ -88,13 +88,9 @@ const getCssValue = (keys, value) => {
  * @param {Object} theme
  * @param {{
  *  prefix?: string,
- *  basePrefix?: string,
  *  shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean
  * }} options.
- *  `basePrefix`: defined by design system.
- *  `prefix`: defined by application
- *
- *   the CSS variable value will be adjusted based on the provided `basePrefix` & `prefix` which can be found in `parsedTheme`.
+ *  `prefix`: The prefix of the generated CSS variables. This function does not change the value.
  *
  * @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.
  *
@@ -105,16 +101,15 @@ const getCssValue = (keys, value) => {
  *   palette: { primary: { 500: 'var(--color)' } }
  * }, { prefix: 'foo' })
  *
- * 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)' } } }
+ * console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--color)' }
+ * console.log(vars) // { fontSize: 'var(--foo-fontSize)', lineHeight: 'var(--foo-lineHeight)', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
+ * console.log(parsedTheme) // { fontSize: 12, lineHeight: 1.2, palette: { primary: { 500: 'var(--color)' } } }
  */
 
 
 export default function cssVarsParser(theme, options) {
   const {
     prefix,
-    basePrefix = '',
     shouldSkipGeneratingVar
   } = options || {};
   const css = {};
@@ -122,16 +117,6 @@ export default function cssVarsParser(theme, options) {
   const parsedTheme = {};
   walkObjectDeep(theme, (keys, value, arrayKeys) => {
     if (typeof value === 'string' || typeof value === 'number') {
-      if (typeof value === 'string' && value.match(/var\(\s*--/)) {
-        // 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(--');
-        }
-      }
-
       if (!shouldSkipGeneratingVar || shouldSkipGeneratingVar && !shouldSkipGeneratingVar(keys, value)) {
         // only create css & var if `shouldSkipGeneratingVar` return false
         const cssVar = `--${prefix ? `${prefix}-` : ''}${keys.join('-')}`;

package/modern/cssVars/index.js

@@ -1 +1,2 @@
-export { default } from './createCssVarsProvider';
+export { default } from './createCssVarsProvider';
+export { default as getInitColorSchemeScript } from './getInitColorSchemeScript';

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.8.6
+/** @license MUI v5.8.7
  *
  * 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.8.6",
+  "version": "5.8.7",
   "private": false,
   "author": "MUI Team",
   "description": "CSS utilities for rapidly laying out custom designs.",
@@ -45,10 +45,10 @@
   "dependencies": {
     "@babel/runtime": "^7.17.2",
     "@mui/private-theming": "^5.8.6",
-    "@mui/styled-engine": "^5.8.0",
+    "@mui/styled-engine": "^5.8.7",
     "@mui/types": "^7.1.4",
     "@mui/utils": "^5.8.6",
-    "clsx": "^1.1.1",
+    "clsx": "^1.2.0",
     "csstype": "^3.1.0",
     "prop-types": "^15.8.1"
   },

package/styleFunctionSx/styleFunctionSx.spec.d.ts

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