@mui/system 5.2.3 → 5.2.8

package/modern/cssVars/createCssVarsProvider.js

@@ -7,13 +7,14 @@ const _excluded = ["colorSchemes"],
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { GlobalStyles } from '@mui/styled-engine';
-import { deepmerge } from '@mui/utils';
+import { deepmerge, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 import createSpacing from '../createTheme/createSpacing';
 import createBreakpoints from '../createTheme/createBreakpoints';
 import cssVarsParser from './cssVarsParser';
 import ThemeProvider from '../ThemeProvider';
 import getInitColorSchemeScript, { DEFAULT_ATTRIBUTE, 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}';
@@ -69,7 +70,7 @@ export default function createCssVarsProvider(options) {
     } = themeProp,
           restThemeProp = _objectWithoutPropertiesLoose(themeProp, _excluded2);
 
-    const hasMounted = React.useRef(null); // eslint-disable-next-line prefer-const
+    const hasMounted = React.useRef(false); // eslint-disable-next-line prefer-const
 
     let _deepmerge = deepmerge(restBaseTheme, restThemeProp),
         {
@@ -124,7 +125,8 @@ export default function createCssVarsProvider(options) {
       colorSchemes,
       vars: rootVars,
       spacing: themeProp.spacing ? createSpacing(themeProp.spacing) : systemSpacing,
-      breakpoints: themeProp.breakpoints ? createBreakpoints(themeProp.breakpoints) : systemBreakpoints
+      breakpoints: themeProp.breakpoints ? createBreakpoints(themeProp.breakpoints) : systemBreakpoints,
+      getCssVar: createGetCssVar(prefix)
     });
     const styleSheet = {};
     Object.entries(colorSchemes).forEach(([key, scheme]) => {
@@ -162,7 +164,7 @@ export default function createCssVarsProvider(options) {
         document.documentElement.setAttribute(attribute, colorScheme);
       }
     }, [colorScheme, attribute]);
-    React.useEffect(() => {
+    useEnhancedEffect(() => {
       if (!mode || !enableColorScheme) {
         return undefined;
       }
@@ -201,6 +203,9 @@ export default function createCssVarsProvider(options) {
     }, [colorScheme]);
     React.useEffect(() => {
       hasMounted.current = true;
+      return () => {
+        hasMounted.current = false;
+      };
     }, []);
     return /*#__PURE__*/_jsxs(ColorSchemeContext.Provider, {
       value: {

package/modern/cssVars/createGetCssVar.js

@@ -0,0 +1,20 @@
+/**
+ * The benefit of this function is to help developers get CSS var from theme without specifying the whole variable
+ * and they does not need to remember the prefix (defined once).
+ */
+export default function createGetCssVar(prefix = '') {
+  function appendVar(...vars) {
+    if (!vars.length) {
+      return '';
+    }
+
+    return `, var(--${prefix ? `${prefix}-` : ''}${vars[0]}${appendVar(...vars.slice(1))})`;
+  } // 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)})`;
+  };
+
+  return getCssVar;
+}

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.2.3
+/** @license MUI v5.2.8
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -43,4 +43,5 @@ export { default as useTheme } from './useTheme';
 export { default as useThemeWithoutDefault } from './useThemeWithoutDefault';
 export * from './colorManipulator';
 export { default as ThemeProvider } from './ThemeProvider';
-export { default as unstable_createCssVarsProvider } from './cssVars/createCssVarsProvider';
+export { default as unstable_createCssVarsProvider } from './cssVars/createCssVarsProvider';
+export { default as unstable_createGetCssVar } from './cssVars/createGetCssVar';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "5.2.3",
+  "version": "5.2.8",
   "private": false,
   "author": "MUI Team",
   "description": "CSS utilities for rapidly laying out custom designs.",
@@ -45,7 +45,7 @@
   "dependencies": {
     "@babel/runtime": "^7.16.3",
     "@mui/private-theming": "^5.2.3",
-    "@mui/styled-engine": "^5.2.0",
+    "@mui/styled-engine": "^5.2.6",
     "@mui/types": "^7.1.0",
     "@mui/utils": "^5.2.3",
     "clsx": "^1.1.1",

package/styleFunctionSx/styleFunctionSx.d.ts

@@ -49,6 +49,7 @@ export type SystemStyleObject<Theme extends object = {}> =
   | SystemCssProperties<Theme>
   | CSSPseudoSelectorProps<Theme>
   | CSSSelectorObject<Theme>
+  | { [cssVariable: string]: string | number }
   | null;
 
 /**

package/styleFunctionSx/styleFunctionSx.spec.d.ts

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