@mui/styled-engine 6.4.9 → 6.5.0

package/CHANGELOG.md

@@ -1,5 +1,117 @@
 # [Versions](https://mui.com/versions/)
 
+## 6.5.0
+
+<!-- generated comparing v6.4.12..v6.x -->
+
+_Jul 2, 2025_
+
+A big thanks to the 2 contributors who made this release possible.
+
+CSS layers make it easier to override styles by splitting a single style sheet into multiple layers.
+To learn more, check out the [CSS layers documentation](https://v6.mui.com/material-ui/customization/css-layers/).
+
+### `@mui/material@6.5.0`
+
+- [Dialog] Add codemod for deprecated props (#46335) @sai6855
+
+### `@mui/system@6.5.0`
+
+- Backport CSS layers feature from v7 (#46283) @siriwatknp
+
+### `@mui/material-nextjs@6.5.0`
+
+- Backport CSS layers feature from v7 (#46283) @siriwatknp
+
+### Docs
+
+- Add ListItemButton to make the deprecation clear (#46357) @sai6855
+
+All contributors of this release in alphabetical order: @sai6855, @siriwatknp
+
+## 6.4.12
+
+<!-- generated comparing v6.4.11..v6.x -->
+
+_May 30, 2025_
+
+A big thanks to the 7 contributors who made this release possible.
+
+### `@mui/material@6.4.12`
+
+- [Badge] Replace useSlotProps with useSlot hook (#45876) @sai6855
+- [BottomNavigationAction] Add slots and slotProps (#45875) @sai6855
+- [CardActionArea] Add slots and slotProps (#45877) @sai6855
+- [OutlinedInput] Add missing `notchedOutline` slot (#45938) @siriwatknp
+- [useMediaQuery] Add warning and docs for using `useMediaQuery('print')` (#45886) @good-jinu
+- Fix theme object changes between renders (#45874) @siriwatknp
+
+### `@mui/material-nextjs@6.4.12`
+
+- Do not wrap `@layer` order rules in App Router (#45870) @Nayeem-XTREME
+
+### `@mui/system@6.4.12`
+
+- Skip styled component from being transformed (#46184) @siriwatknp
+
+### Docs
+
+- [Dialog] Remove deprecated props usage in demos (#45928) @sai6855
+- [Grid] Update grid migration guide (#46153) @sai6855
+- [Menu] Update `paper` slot JSDoc default from `Paper` to `PopoverPaper` (@andreachiera) (#45865) @andreachiera
+- Update CSS variable usage in migration guide for Pigment CSS (#46038) @sai6855
+- Remove outdated StackOverflow tag (9b9f96b) @oliviertassinari
+- Update `@mui/icons-material` install command to use 6.x version (#45810) @Nickknack
+- Add AccordionSummary to the breaking change migration (#45973) @siriwatknp
+
+All contributors of this release in alphabetical order: @andreachiera, @good-jinu, @Nayeem-XTREME, @Nickknack, @oliviertassinari, @sai6855, @siriwatknp
+
+## 6.4.11
+
+_Apr 9, 2025_
+
+A big thanks to the 3 contributors who made this release possible.
+
+### `@mui/material@6.4.11`
+
+- [AvatarGroup] Fix `spacing` prop ignoring value `0` (#45845) @Kartik-Murthy
+- [Dialog] Deprecate composed classes (#45814) @sai6855
+
+### `@mui/styled-engine@6.4.11`
+
+- Add caching to improve performance for running tests with Jest (#45855) @siriwatknp
+
+### Docs
+
+- Add missing v7 docs banner (#45842) @DiegoAndai
+- Add v7 is here banner (#45838) @DiegoAndai
+- Fix lab version install instructions (#45770) @DiegoAndai
+
+All contributors of this release in alphabetical order: @DiegoAndai, @Kartik-Murthy, @sai6855
+
+## 6.4.10
+
+<!-- generated comparing v6.4.9..v6.x -->
+
+_Mar 31, 2025_
+
+A big thanks to the 4 contributors who made this release possible.
+
+### `@mui/material@6.4.10`
+
+- [Autocomplete] Prevent shrink animation in controlled Autocomplete when initial `value` is provided (#45735) @imadx
+- [Popover] Allow `null` in `anchorEl` function return type (#45723) @eduter
+
+### Docs
+
+- Fix new React project link, CRA deprecated (#45669) @oliviertassinari
+
+### Core
+
+- [utils] Support cleanup callbacks in useForkRef (#45733) @DiegoAndai
+
+All contributors of this release in alphabetical order: @DiegoAndai, @eduter, @imadx, @oliviertassinari
+
 ## 6.4.9
 
 <!-- generated comparing v6.4.8..v6.x -->

package/StyledEngineProvider/StyledEngineProvider.js

@@ -6,10 +6,13 @@ import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
 import { StyleSheet } from '@emotion/sheet';
 
+// To fix [Jest performance](https://github.com/mui/material-ui/issues/45638).
+import { jsx as _jsx } from "react/jsx-runtime";
+const cacheMap = new Map();
+
 // Need to add a private variable to test the generated CSS from Emotion, this is the simplest way to do it.
 // We can't test the CSS from `style` tag easily because the `speedy: true` (produce empty text content) is enabled by Emotion.
 // Even if we disable it, JSDOM needs extra configuration to be able to parse `@layer` CSS.
-import { jsx as _jsx } from "react/jsx-runtime";
 export const TEST_INTERNALS_DO_NOT_USE = {
   /**
    * to intercept the generated CSS before inserting to the style tag, so that we can check the generated CSS.
@@ -80,7 +83,7 @@ function getCache(injectFirst, enableCssLayer) {
     if (enableCssLayer) {
       const prevInsert = emotionCache.insert;
       emotionCache.insert = (...args) => {
-        if (!args[1].styles.startsWith('@layer')) {
+        if (!args[1].styles.match(/^@layer\s+[^{]*$/)) {
           // avoid nested @layer
           args[1].styles = `@layer mui {${args[1].styles}}`;
         }
@@ -97,7 +100,15 @@ export default function StyledEngineProvider(props) {
     enableCssLayer,
     children
   } = props;
-  const cache = React.useMemo(() => getCache(injectFirst, enableCssLayer), [injectFirst, enableCssLayer]);
+  const cache = React.useMemo(() => {
+    const cacheKey = `${injectFirst}-${enableCssLayer}`;
+    if (typeof document === 'object' && cacheMap.has(cacheKey)) {
+      return cacheMap.get(cacheKey);
+    }
+    const fresh = getCache(injectFirst, enableCssLayer);
+    cacheMap.set(cacheKey, fresh);
+    return fresh;
+  }, [injectFirst, enableCssLayer]);
   return cache ? /*#__PURE__*/_jsx(CacheProvider, {
     value: cache,
     children: children

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/styled-engine v6.4.9
+ * @mui/styled-engine v6.5.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/StyledEngineProvider/StyledEngineProvider.js

@@ -6,10 +6,13 @@ import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
 import { StyleSheet } from '@emotion/sheet';
 
+// To fix [Jest performance](https://github.com/mui/material-ui/issues/45638).
+import { jsx as _jsx } from "react/jsx-runtime";
+const cacheMap = new Map();
+
 // Need to add a private variable to test the generated CSS from Emotion, this is the simplest way to do it.
 // We can't test the CSS from `style` tag easily because the `speedy: true` (produce empty text content) is enabled by Emotion.
 // Even if we disable it, JSDOM needs extra configuration to be able to parse `@layer` CSS.
-import { jsx as _jsx } from "react/jsx-runtime";
 export const TEST_INTERNALS_DO_NOT_USE = {
   /**
    * to intercept the generated CSS before inserting to the style tag, so that we can check the generated CSS.
@@ -80,7 +83,7 @@ function getCache(injectFirst, enableCssLayer) {
     if (enableCssLayer) {
       const prevInsert = emotionCache.insert;
       emotionCache.insert = (...args) => {
-        if (!args[1].styles.startsWith('@layer')) {
+        if (!args[1].styles.match(/^@layer\s+[^{]*$/)) {
           // avoid nested @layer
           args[1].styles = `@layer mui {${args[1].styles}}`;
         }
@@ -97,7 +100,15 @@ export default function StyledEngineProvider(props) {
     enableCssLayer,
     children
   } = props;
-  const cache = React.useMemo(() => getCache(injectFirst, enableCssLayer), [injectFirst, enableCssLayer]);
+  const cache = React.useMemo(() => {
+    const cacheKey = `${injectFirst}-${enableCssLayer}`;
+    if (typeof document === 'object' && cacheMap.has(cacheKey)) {
+      return cacheMap.get(cacheKey);
+    }
+    const fresh = getCache(injectFirst, enableCssLayer);
+    cacheMap.set(cacheKey, fresh);
+    return fresh;
+  }, [injectFirst, enableCssLayer]);
   return cache ? /*#__PURE__*/_jsx(CacheProvider, {
     value: cache,
     children: children

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/styled-engine v6.4.9
+ * @mui/styled-engine v6.5.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/StyledEngineProvider/StyledEngineProvider.js

@@ -14,6 +14,9 @@ var _react2 = require("@emotion/react");
 var _cache = _interopRequireDefault(require("@emotion/cache"));
 var _sheet = require("@emotion/sheet");
 var _jsxRuntime = require("react/jsx-runtime");
+// To fix [Jest performance](https://github.com/mui/material-ui/issues/45638).
+const cacheMap = new Map();
+
 // Need to add a private variable to test the generated CSS from Emotion, this is the simplest way to do it.
 // We can't test the CSS from `style` tag easily because the `speedy: true` (produce empty text content) is enabled by Emotion.
 // Even if we disable it, JSDOM needs extra configuration to be able to parse `@layer` CSS.
@@ -87,7 +90,7 @@ function getCache(injectFirst, enableCssLayer) {
     if (enableCssLayer) {
       const prevInsert = emotionCache.insert;
       emotionCache.insert = (...args) => {
-        if (!args[1].styles.startsWith('@layer')) {
+        if (!args[1].styles.match(/^@layer\s+[^{]*$/)) {
           // avoid nested @layer
           args[1].styles = `@layer mui {${args[1].styles}}`;
         }
@@ -104,7 +107,15 @@ function StyledEngineProvider(props) {
     enableCssLayer,
     children
   } = props;
-  const cache = React.useMemo(() => getCache(injectFirst, enableCssLayer), [injectFirst, enableCssLayer]);
+  const cache = React.useMemo(() => {
+    const cacheKey = `${injectFirst}-${enableCssLayer}`;
+    if (typeof document === 'object' && cacheMap.has(cacheKey)) {
+      return cacheMap.get(cacheKey);
+    }
+    const fresh = getCache(injectFirst, enableCssLayer);
+    cacheMap.set(cacheKey, fresh);
+    return fresh;
+  }, [injectFirst, enableCssLayer]);
   return cache ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.CacheProvider, {
     value: cache,
     children: children

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/styled-engine v6.4.9
+ * @mui/styled-engine v6.5.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/styled-engine",
-  "version": "6.4.9",
+  "version": "6.5.0",
   "private": false,
   "author": "MUI Team",
   "description": "styled() API wrapper package for emotion.",