@mui/system 5.2.4 → 5.3.0

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}';
@@ -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;
       }

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.4
+/** @license MUI v5.3.0
  *
  * 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/modern/typography.js

@@ -19,6 +19,9 @@ export const fontWeight = style({
 export const letterSpacing = style({
   prop: 'letterSpacing'
 });
+export const textTransform = style({
+  prop: 'textTransform'
+});
 export const lineHeight = style({
   prop: 'lineHeight'
 });
@@ -30,5 +33,5 @@ export const typographyVariant = style({
   cssProperty: false,
   themeKey: 'typography'
 });
-const typography = compose(typographyVariant, fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign);
+const typography = compose(typographyVariant, fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign, textTransform);
 export default typography;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "5.2.4",
+  "version": "5.3.0",
   "private": false,
   "author": "MUI Team",
   "description": "CSS utilities for rapidly laying out custom designs.",
@@ -29,7 +29,7 @@
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
     "@types/react": "^16.8.6 || ^17.0.0",
-    "react": "^17.0.2"
+    "react": "^17.0.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {
@@ -43,11 +43,11 @@
     }
   },
   "dependencies": {
-    "@babel/runtime": "^7.16.3",
-    "@mui/private-theming": "^5.2.3",
-    "@mui/styled-engine": "^5.2.4",
+    "@babel/runtime": "^7.16.7",
+    "@mui/private-theming": "^5.3.0",
+    "@mui/styled-engine": "^5.3.0",
     "@mui/types": "^7.1.0",
-    "@mui/utils": "^5.2.3",
+    "@mui/utils": "^5.3.0",
     "clsx": "^1.1.1",
     "csstype": "^3.0.10",
     "prop-types": "^15.7.2"

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 {};

package/typography.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.typographyVariant = exports.textAlign = exports.lineHeight = exports.letterSpacing = exports.fontWeight = exports.fontStyle = exports.fontSize = exports.fontFamily = exports.default = void 0;
+exports.typographyVariant = exports.textTransform = exports.textAlign = exports.lineHeight = exports.letterSpacing = exports.fontWeight = exports.fontStyle = exports.fontSize = exports.fontFamily = exports.default = void 0;
 
 var _style = _interopRequireDefault(require("./style"));
 
@@ -35,6 +35,10 @@ const letterSpacing = (0, _style.default)({
   prop: 'letterSpacing'
 });
 exports.letterSpacing = letterSpacing;
+const textTransform = (0, _style.default)({
+  prop: 'textTransform'
+});
+exports.textTransform = textTransform;
 const lineHeight = (0, _style.default)({
   prop: 'lineHeight'
 });
@@ -49,6 +53,6 @@ const typographyVariant = (0, _style.default)({
   themeKey: 'typography'
 });
 exports.typographyVariant = typographyVariant;
-const typography = (0, _compose.default)(typographyVariant, fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign);
+const typography = (0, _compose.default)(typographyVariant, fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign, textTransform);
 var _default = typography;
 exports.default = _default;