@mui/styled-engine 5.16.14 → 5.18.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/CHANGELOG.md +47 -0
  2. package/StyledEngineProvider/StyledEngineProvider.d.ts +1 -0
  3. package/StyledEngineProvider/StyledEngineProvider.js +37 -8
  4. package/index.d.ts +3 -0
  5. package/index.js +10 -1
  6. package/legacy/StyledEngineProvider/StyledEngineProvider.js +40 -8
  7. package/legacy/index.js +10 -1
  8. package/modern/StyledEngineProvider/StyledEngineProvider.js +37 -8
  9. package/modern/index.js +10 -1
  10. package/node/StyledEngineProvider/StyledEngineProvider.js +37 -8
  11. package/node/index.js +12 -2
  12. package/package.json +2 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,52 @@
1
1
  # [Versions](https://mui.com/versions/)
2
2
 
3
+ ## 5.18.0
4
+
5
+ <!-- generated comparing v5.17.1..v5.x -->
6
+
7
+ _Jun 26, 2025_
8
+
9
+ A big thanks to the 2 contributors who made this release possible.
10
+
11
+ CSS layers make it easier to override styles by splitting a single style sheet into multiple layers.
12
+ To learn more, check out the [CSS layers documentation](https://v5.mui.com/material-ui/customization/css-layers/).
13
+
14
+ ### `@mui/system@5.18.0`
15
+
16
+ - Backport CSS layers from v7 (#46320) @siriwatknp
17
+
18
+ ### `@mui/material-nextjs@5.18.0`
19
+
20
+ - Backport CSS layers from v7 (#46320) @siriwatknp
21
+
22
+ ### Docs
23
+
24
+ - Ease migration to v5 (#45991) @oliviertassinari
25
+ - Add AccordionSummary to the breaking change migration (@siriwatknp) (#45972) @siriwatknp
26
+
27
+ All contributors of this release in alphabetical order: @oliviertassinari, @siriwatknp
28
+
29
+ ## v5.17.1
30
+
31
+ <!-- generated comparing v5.17.0..v5.x -->
32
+
33
+ _Mar 18, 2025_
34
+
35
+ This release fixes the `@mui/types` dependencies in all packages to fix a package layout bug (#45612) @DiegoAndai
36
+
37
+ ## v5.17.0
38
+
39
+ _Mar 18, 2025_
40
+
41
+ A big thanks to the 2 contributors who made this release possible.
42
+
43
+ ### `@mui/material@5.17.0`
44
+
45
+ - [TextareaAutosize] Temporarily disconnect ResizeObserver to avoid loop error (#44540) (#45238) @DiegoAndai
46
+ - Support nested theme when upper theme is CSS vars theme (#45604) @siriwatknp
47
+
48
+ All contributors of this release in alphabetical order: @DiegoAndai, @siriwatknp
49
+
3
50
  ## v5.16.14
4
51
 
5
52
  <!-- generated comparing v5.16.13..v5.x -->
package/StyledEngineProvider/StyledEngineProvider.d.ts CHANGED
@@ -2,6 +2,7 @@ import * as React from 'react';
2
2
 
3
3
  export interface StyledEngineProviderProps {
4
4
  children?: React.ReactNode;
5
+ enableCssLayer?: boolean;
5
6
  injectFirst?: boolean;
6
7
  }
7
8
 
package/StyledEngineProvider/StyledEngineProvider.js CHANGED
@@ -8,28 +8,57 @@ import createCache from '@emotion/cache';
8
8
  // prepend: true moves MUI styles to the top of the <head> so they're loaded first.
9
9
  // It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
10
10
  import { jsx as _jsx } from "react/jsx-runtime";
11
- let cache;
12
- if (typeof document === 'object') {
13
- cache = createCache({
11
+ function getCache(injectFirst, enableCssLayer) {
12
+ const emotionCache = createCache({
14
13
  key: 'css',
15
- prepend: true
14
+ prepend: injectFirst
16
15
  });
16
+ if (enableCssLayer) {
17
+ const prevInsert = emotionCache.insert;
18
+ emotionCache.insert = (...args) => {
19
+ if (!args[1].styles.match(/^@layer\s+[^{]*$/)) {
20
+ // avoid nested @layer
21
+ args[1].styles = `@layer mui {${args[1].styles}}`;
22
+ }
23
+ return prevInsert(...args);
24
+ };
25
+ }
26
+ return emotionCache;
17
27
  }
28
+ const cacheMap = new Map();
18
29
  export default function StyledEngineProvider(props) {
19
30
  const {
20
31
  injectFirst,
32
+ enableCssLayer,
21
33
  children
22
34
  } = props;
23
- return injectFirst && cache ? /*#__PURE__*/_jsx(CacheProvider, {
24
- value: cache,
25
- children: children
26
- }) : children;
35
+ const cache = React.useMemo(() => {
36
+ const cacheKey = `${injectFirst}-${enableCssLayer}`;
37
+ if (typeof document === 'object' && cacheMap.has(cacheKey)) {
38
+ return cacheMap.get(cacheKey);
39
+ }
40
+ const fresh = getCache(injectFirst, enableCssLayer);
41
+ cacheMap.set(cacheKey, fresh);
42
+ return fresh;
43
+ }, [injectFirst, enableCssLayer]);
44
+ if (injectFirst || enableCssLayer) {
45
+ return /*#__PURE__*/_jsx(CacheProvider, {
46
+ value: cache,
47
+ children: children
48
+ });
49
+ }
50
+ return children;
27
51
  }
28
52
  process.env.NODE_ENV !== "production" ? StyledEngineProvider.propTypes = {
29
53
  /**
30
54
  * Your component tree.
31
55
  */
32
56
  children: PropTypes.node,
57
+ /**
58
+ * If true, MUI styles are wrapped in CSS `@layer mui` rule.
59
+ * It helps to override MUI styles when using CSS Modules, Tailwind CSS, plain CSS, or any other styling solution.
60
+ */
61
+ enableCssLayer: PropTypes.bool,
33
62
  /**
34
63
  * By default, the styles are injected last in the <head> element of the page.
35
64
  * As a result, they gain more specificity than any other style sheet.
package/index.d.ts CHANGED
@@ -26,6 +26,9 @@ export function internal_processStyles(
26
26
  processor: (styles: any) => any,
27
27
  ): void;
28
28
 
29
+ // eslint-disable-next-line @typescript-eslint/naming-convention
30
+ export function internal_serializeStyles<P>(styles: Interpolation<P>): object;
31
+
29
32
  export interface SerializedStyles {
30
33
  name: string;
31
34
  styles: string;
package/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/styled-engine v5.16.14
2
+ * @mui/styled-engine v5.18.0
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
@@ -9,6 +9,7 @@
9
9
 
10
10
  /* eslint-disable no-underscore-dangle */
11
11
  import emStyled from '@emotion/styled';
12
+ import { serializeStyles as emSerializeStyles } from '@emotion/serialize';
12
13
  export default function styled(tag, options) {
13
14
  const stylesFactory = emStyled(tag, options);
14
15
  if (process.env.NODE_ENV !== 'production') {
@@ -33,6 +34,14 @@ export const internal_processStyles = (tag, processor) => {
33
34
  tag.__emotion_styles = processor(tag.__emotion_styles);
34
35
  }
35
36
  };
37
+
38
+ // Emotion only accepts an array, but we want to avoid allocations
39
+ const wrapper = [];
40
+ // eslint-disable-next-line @typescript-eslint/naming-convention
41
+ export function internal_serializeStyles(styles) {
42
+ wrapper[0] = styles;
43
+ return emSerializeStyles(wrapper);
44
+ }
36
45
  export { ThemeContext, keyframes, css } from '@emotion/react';
37
46
  export { default as StyledEngineProvider } from './StyledEngineProvider';
38
47
  export { default as GlobalStyles } from './GlobalStyles';
package/legacy/StyledEngineProvider/StyledEngineProvider.js CHANGED
@@ -9,26 +9,58 @@ import createCache from '@emotion/cache';
9
9
  // prepend: true moves MUI styles to the top of the <head> so they're loaded first.
10
10
  // It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
11
11
  import { jsx as _jsx } from "react/jsx-runtime";
12
- var cache;
13
- if ((typeof document === "undefined" ? "undefined" : _typeof(document)) === 'object') {
14
- cache = createCache({
12
+ function getCache(injectFirst, enableCssLayer) {
13
+ var emotionCache = createCache({
15
14
  key: 'css',
16
- prepend: true
15
+ prepend: injectFirst
17
16
  });
17
+ if (enableCssLayer) {
18
+ var prevInsert = emotionCache.insert;
19
+ emotionCache.insert = function () {
20
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
21
+ args[_key] = arguments[_key];
22
+ }
23
+ if (!args[1].styles.match(/^@layer\s+[^{]*$/)) {
24
+ // avoid nested @layer
25
+ args[1].styles = "@layer mui {".concat(args[1].styles, "}");
26
+ }
27
+ return prevInsert.apply(void 0, args);
28
+ };
29
+ }
30
+ return emotionCache;
18
31
  }
32
+ var cacheMap = new Map();
19
33
  export default function StyledEngineProvider(props) {
20
34
  var injectFirst = props.injectFirst,
35
+ enableCssLayer = props.enableCssLayer,
21
36
  children = props.children;
22
- return injectFirst && cache ? /*#__PURE__*/_jsx(CacheProvider, {
23
- value: cache,
24
- children: children
25
- }) : children;
37
+ var cache = React.useMemo(function () {
38
+ var cacheKey = "".concat(injectFirst, "-").concat(enableCssLayer);
39
+ if ((typeof document === "undefined" ? "undefined" : _typeof(document)) === 'object' && cacheMap.has(cacheKey)) {
40
+ return cacheMap.get(cacheKey);
41
+ }
42
+ var fresh = getCache(injectFirst, enableCssLayer);
43
+ cacheMap.set(cacheKey, fresh);
44
+ return fresh;
45
+ }, [injectFirst, enableCssLayer]);
46
+ if (injectFirst || enableCssLayer) {
47
+ return /*#__PURE__*/_jsx(CacheProvider, {
48
+ value: cache,
49
+ children: children
50
+ });
51
+ }
52
+ return children;
26
53
  }
27
54
  process.env.NODE_ENV !== "production" ? StyledEngineProvider.propTypes = {
28
55
  /**
29
56
  * Your component tree.
30
57
  */
31
58
  children: PropTypes.node,
59
+ /**
60
+ * If true, MUI styles are wrapped in CSS `@layer mui` rule.
61
+ * It helps to override MUI styles when using CSS Modules, Tailwind CSS, plain CSS, or any other styling solution.
62
+ */
63
+ enableCssLayer: PropTypes.bool,
32
64
  /**
33
65
  * By default, the styles are injected last in the <head> element of the page.
34
66
  * As a result, they gain more specificity than any other style sheet.
package/legacy/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/styled-engine v5.16.14
2
+ * @mui/styled-engine v5.18.0
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
@@ -9,6 +9,7 @@
9
9
 
10
10
  /* eslint-disable no-underscore-dangle */
11
11
  import emStyled from '@emotion/styled';
12
+ import { serializeStyles as emSerializeStyles } from '@emotion/serialize';
12
13
  export default function styled(tag, options) {
13
14
  var stylesFactory = emStyled(tag, options);
14
15
  if (process.env.NODE_ENV !== 'production') {
@@ -38,6 +39,14 @@ export var internal_processStyles = function internal_processStyles(tag, process
38
39
  tag.__emotion_styles = processor(tag.__emotion_styles);
39
40
  }
40
41
  };
42
+
43
+ // Emotion only accepts an array, but we want to avoid allocations
44
+ var wrapper = [];
45
+ // eslint-disable-next-line @typescript-eslint/naming-convention
46
+ export function internal_serializeStyles(styles) {
47
+ wrapper[0] = styles;
48
+ return emSerializeStyles(wrapper);
49
+ }
41
50
  export { ThemeContext, keyframes, css } from '@emotion/react';
42
51
  export { default as StyledEngineProvider } from './StyledEngineProvider';
43
52
  export { default as GlobalStyles } from './GlobalStyles';
package/modern/StyledEngineProvider/StyledEngineProvider.js CHANGED
@@ -8,28 +8,57 @@ import createCache from '@emotion/cache';
8
8
  // prepend: true moves MUI styles to the top of the <head> so they're loaded first.
9
9
  // It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
10
10
  import { jsx as _jsx } from "react/jsx-runtime";
11
- let cache;
12
- if (typeof document === 'object') {
13
- cache = createCache({
11
+ function getCache(injectFirst, enableCssLayer) {
12
+ const emotionCache = createCache({
14
13
  key: 'css',
15
- prepend: true
14
+ prepend: injectFirst
16
15
  });
16
+ if (enableCssLayer) {
17
+ const prevInsert = emotionCache.insert;
18
+ emotionCache.insert = (...args) => {
19
+ if (!args[1].styles.match(/^@layer\s+[^{]*$/)) {
20
+ // avoid nested @layer
21
+ args[1].styles = `@layer mui {${args[1].styles}}`;
22
+ }
23
+ return prevInsert(...args);
24
+ };
25
+ }
26
+ return emotionCache;
17
27
  }
28
+ const cacheMap = new Map();
18
29
  export default function StyledEngineProvider(props) {
19
30
  const {
20
31
  injectFirst,
32
+ enableCssLayer,
21
33
  children
22
34
  } = props;
23
- return injectFirst && cache ? /*#__PURE__*/_jsx(CacheProvider, {
24
- value: cache,
25
- children: children
26
- }) : children;
35
+ const cache = React.useMemo(() => {
36
+ const cacheKey = `${injectFirst}-${enableCssLayer}`;
37
+ if (typeof document === 'object' && cacheMap.has(cacheKey)) {
38
+ return cacheMap.get(cacheKey);
39
+ }
40
+ const fresh = getCache(injectFirst, enableCssLayer);
41
+ cacheMap.set(cacheKey, fresh);
42
+ return fresh;
43
+ }, [injectFirst, enableCssLayer]);
44
+ if (injectFirst || enableCssLayer) {
45
+ return /*#__PURE__*/_jsx(CacheProvider, {
46
+ value: cache,
47
+ children: children
48
+ });
49
+ }
50
+ return children;
27
51
  }
28
52
  process.env.NODE_ENV !== "production" ? StyledEngineProvider.propTypes = {
29
53
  /**
30
54
  * Your component tree.
31
55
  */
32
56
  children: PropTypes.node,
57
+ /**
58
+ * If true, MUI styles are wrapped in CSS `@layer mui` rule.
59
+ * It helps to override MUI styles when using CSS Modules, Tailwind CSS, plain CSS, or any other styling solution.
60
+ */
61
+ enableCssLayer: PropTypes.bool,
33
62
  /**
34
63
  * By default, the styles are injected last in the <head> element of the page.
35
64
  * As a result, they gain more specificity than any other style sheet.
package/modern/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/styled-engine v5.16.14
2
+ * @mui/styled-engine v5.18.0
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
@@ -9,6 +9,7 @@
9
9
 
10
10
  /* eslint-disable no-underscore-dangle */
11
11
  import emStyled from '@emotion/styled';
12
+ import { serializeStyles as emSerializeStyles } from '@emotion/serialize';
12
13
  export default function styled(tag, options) {
13
14
  const stylesFactory = emStyled(tag, options);
14
15
  if (process.env.NODE_ENV !== 'production') {
@@ -33,6 +34,14 @@ export const internal_processStyles = (tag, processor) => {
33
34
  tag.__emotion_styles = processor(tag.__emotion_styles);
34
35
  }
35
36
  };
37
+
38
+ // Emotion only accepts an array, but we want to avoid allocations
39
+ const wrapper = [];
40
+ // eslint-disable-next-line @typescript-eslint/naming-convention
41
+ export function internal_serializeStyles(styles) {
42
+ wrapper[0] = styles;
43
+ return emSerializeStyles(wrapper);
44
+ }
36
45
  export { ThemeContext, keyframes, css } from '@emotion/react';
37
46
  export { default as StyledEngineProvider } from './StyledEngineProvider';
38
47
  export { default as GlobalStyles } from './GlobalStyles';
package/node/StyledEngineProvider/StyledEngineProvider.js CHANGED
@@ -15,28 +15,57 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
15
15
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
16
16
  // prepend: true moves MUI styles to the top of the <head> so they're loaded first.
17
17
  // It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
18
- let cache;
19
- if (typeof document === 'object') {
20
- cache = (0, _cache.default)({
18
+ function getCache(injectFirst, enableCssLayer) {
19
+ const emotionCache = (0, _cache.default)({
21
20
  key: 'css',
22
- prepend: true
21
+ prepend: injectFirst
23
22
  });
23
+ if (enableCssLayer) {
24
+ const prevInsert = emotionCache.insert;
25
+ emotionCache.insert = (...args) => {
26
+ if (!args[1].styles.match(/^@layer\s+[^{]*$/)) {
27
+ // avoid nested @layer
28
+ args[1].styles = `@layer mui {${args[1].styles}}`;
29
+ }
30
+ return prevInsert(...args);
31
+ };
32
+ }
33
+ return emotionCache;
24
34
  }
35
+ const cacheMap = new Map();
25
36
  function StyledEngineProvider(props) {
26
37
  const {
27
38
  injectFirst,
39
+ enableCssLayer,
28
40
  children
29
41
  } = props;
30
- return injectFirst && cache ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.CacheProvider, {
31
- value: cache,
32
- children: children
33
- }) : children;
42
+ const cache = React.useMemo(() => {
43
+ const cacheKey = `${injectFirst}-${enableCssLayer}`;
44
+ if (typeof document === 'object' && cacheMap.has(cacheKey)) {
45
+ return cacheMap.get(cacheKey);
46
+ }
47
+ const fresh = getCache(injectFirst, enableCssLayer);
48
+ cacheMap.set(cacheKey, fresh);
49
+ return fresh;
50
+ }, [injectFirst, enableCssLayer]);
51
+ if (injectFirst || enableCssLayer) {
52
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.CacheProvider, {
53
+ value: cache,
54
+ children: children
55
+ });
56
+ }
57
+ return children;
34
58
  }
35
59
  process.env.NODE_ENV !== "production" ? StyledEngineProvider.propTypes = {
36
60
  /**
37
61
  * Your component tree.
38
62
  */
39
63
  children: _propTypes.default.node,
64
+ /**
65
+ * If true, MUI styles are wrapped in CSS `@layer mui` rule.
66
+ * It helps to override MUI styles when using CSS Modules, Tailwind CSS, plain CSS, or any other styling solution.
67
+ */
68
+ enableCssLayer: _propTypes.default.bool,
40
69
  /**
41
70
  * By default, the styles are injected last in the <head> element of the page.
42
71
  * As a result, they gain more specificity than any other style sheet.
package/node/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/styled-engine v5.16.14
2
+ * @mui/styled-engine v5.18.0
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
@@ -39,6 +39,7 @@ Object.defineProperty(exports, "css", {
39
39
  });
40
40
  exports.default = styled;
41
41
  exports.internal_processStyles = void 0;
42
+ exports.internal_serializeStyles = internal_serializeStyles;
42
43
  Object.defineProperty(exports, "keyframes", {
43
44
  enumerable: true,
44
45
  get: function () {
@@ -46,6 +47,7 @@ Object.defineProperty(exports, "keyframes", {
46
47
  }
47
48
  });
48
49
  var _styled = _interopRequireDefault(require("@emotion/styled"));
50
+ var _serialize = require("@emotion/serialize");
49
51
  var _react = require("@emotion/react");
50
52
  var _StyledEngineProvider = _interopRequireDefault(require("./StyledEngineProvider"));
51
53
  var _GlobalStyles = _interopRequireDefault(require("./GlobalStyles"));
@@ -73,4 +75,12 @@ const internal_processStyles = (tag, processor) => {
73
75
  tag.__emotion_styles = processor(tag.__emotion_styles);
74
76
  }
75
77
  };
76
- exports.internal_processStyles = internal_processStyles;
78
+
79
+ // Emotion only accepts an array, but we want to avoid allocations
80
+ exports.internal_processStyles = internal_processStyles;
81
+ const wrapper = [];
82
+ // eslint-disable-next-line @typescript-eslint/naming-convention
83
+ function internal_serializeStyles(styles) {
84
+ wrapper[0] = styles;
85
+ return (0, _serialize.serializeStyles)(wrapper);
86
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mui/styled-engine",
3
- "version": "5.16.14",
3
+ "version": "5.18.0",
4
4
  "private": false,
5
5
  "author": "MUI Team",
6
6
  "description": "styled() API wrapper package for emotion.",
@@ -28,6 +28,7 @@
28
28
  "dependencies": {
29
29
  "@babel/runtime": "^7.23.9",
30
30
  "@emotion/cache": "^11.13.5",
31
+ "@emotion/serialize": "^1.3.3",
31
32
  "csstype": "^3.1.3",
32
33
  "prop-types": "^15.8.1"
33
34
  },