@mui/material-nextjs 5.16.13 → 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.
- package/CHANGELOG.md +61 -0
- package/legacy/v13-appRouter/appRouterV13.js +1 -1
- package/legacy/v13-pagesRouter/createCache.js +22 -3
- package/legacy/v13-pagesRouter/index.js +2 -1
- package/legacy/v13-pagesRouter/pagesRouterV13Document.js +9 -2
- package/modern/v13-appRouter/appRouterV13.js +1 -1
- package/modern/v13-pagesRouter/createCache.js +22 -3
- package/modern/v13-pagesRouter/index.js +2 -1
- package/modern/v13-pagesRouter/pagesRouterV13Document.js +15 -6
- package/node/v13-appRouter/appRouterV13.js +1 -1
- package/node/v13-pagesRouter/createCache.js +22 -3
- package/node/v13-pagesRouter/index.js +14 -1
- package/node/v13-pagesRouter/pagesRouterV13Document.js +15 -6
- package/package.json +1 -1
- package/v13-appRouter/appRouterV13.js +1 -1
- package/v13-pagesRouter/createCache.d.ts +4 -1
- package/v13-pagesRouter/createCache.js +22 -3
- package/v13-pagesRouter/index.d.ts +1 -0
- package/v13-pagesRouter/index.js +2 -1
- package/v13-pagesRouter/pagesRouterV13Document.js +15 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,66 @@
|
|
|
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
|
+
|
|
50
|
+
## v5.16.14
|
|
51
|
+
|
|
52
|
+
<!-- generated comparing v5.16.13..v5.x -->
|
|
53
|
+
|
|
54
|
+
_Jan 6, 2025_
|
|
55
|
+
|
|
56
|
+
A big thanks to the 1 contributor who made this release possible.
|
|
57
|
+
|
|
58
|
+
### `@mui/material@5.16.14`
|
|
59
|
+
|
|
60
|
+
- [Autocomplete] Revert: Fix options list rendering in freeSolo mode (#44857) @ZeeshanTamboli
|
|
61
|
+
|
|
62
|
+
All contributors of this release in alphabetical order: @ZeeshanTamboli
|
|
63
|
+
|
|
3
64
|
## v5.16.13
|
|
4
65
|
|
|
5
66
|
<!-- generated comparing v5.16.12..v5.x -->
|
|
@@ -30,7 +30,7 @@ export default function AppRouterCacheProvider(props) {
|
|
|
30
30
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
31
31
|
args[_key] = arguments[_key];
|
|
32
32
|
}
|
|
33
|
-
if (options != null && options.enableCssLayer) {
|
|
33
|
+
if (options != null && options.enableCssLayer && !args[1].styles.match(/^@layer\s+[^{]*$/)) {
|
|
34
34
|
args[1].styles = "@layer mui {".concat(args[1].styles, "}");
|
|
35
35
|
}
|
|
36
36
|
var selector = args[0],
|
|
@@ -1,17 +1,36 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
1
3
|
import createCache from '@emotion/cache';
|
|
2
4
|
var isBrowser = typeof document !== 'undefined';
|
|
3
5
|
|
|
4
6
|
// On the client side, Create a meta tag at the top of the <head> and set it as insertionPoint.
|
|
5
7
|
// This assures that MUI styles are loaded first.
|
|
6
8
|
// It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
|
|
7
|
-
export default function createEmotionCache() {
|
|
9
|
+
export default function createEmotionCache(options) {
|
|
8
10
|
var insertionPoint;
|
|
9
11
|
if (isBrowser) {
|
|
10
12
|
var emotionInsertionPoint = document.querySelector('meta[name="emotion-insertion-point"]');
|
|
11
13
|
insertionPoint = emotionInsertionPoint != null ? emotionInsertionPoint : undefined;
|
|
12
14
|
}
|
|
13
|
-
|
|
15
|
+
var _ref = options != null ? options : {},
|
|
16
|
+
enableCssLayer = _ref.enableCssLayer,
|
|
17
|
+
rest = _objectWithoutProperties(_ref, ["enableCssLayer"]);
|
|
18
|
+
var emotionCache = createCache(_extends({
|
|
14
19
|
key: 'mui',
|
|
15
20
|
insertionPoint: insertionPoint
|
|
16
|
-
});
|
|
21
|
+
}, rest));
|
|
22
|
+
if (enableCssLayer) {
|
|
23
|
+
var prevInsert = emotionCache.insert;
|
|
24
|
+
emotionCache.insert = function () {
|
|
25
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
26
|
+
args[_key] = arguments[_key];
|
|
27
|
+
}
|
|
28
|
+
// ignore styles that contain layer order (`@layer ...` without `{`)
|
|
29
|
+
if (!args[1].styles.match(/^@layer\s+[^{]*$/)) {
|
|
30
|
+
args[1].styles = "@layer mui {".concat(args[1].styles, "}");
|
|
31
|
+
}
|
|
32
|
+
return prevInsert.apply(void 0, args);
|
|
33
|
+
};
|
|
34
|
+
}
|
|
35
|
+
return emotionCache;
|
|
17
36
|
}
|
|
@@ -134,12 +134,19 @@ function _documentGetInitialProps() {
|
|
|
134
134
|
_extractCriticalToChu = extractCriticalToChunks(initialProps.html), styles = _extractCriticalToChu.styles;
|
|
135
135
|
return _context3.abrupt("return", _extends({}, initialProps, {
|
|
136
136
|
emotionStyleTags: styles.map(function (style) {
|
|
137
|
+
if (!style.css.trim()) {
|
|
138
|
+
return null;
|
|
139
|
+
}
|
|
140
|
+
var isLayerOrderRule = style.css.startsWith('@layer') && !style.css.match(/\{.*\}/);
|
|
137
141
|
return /*#__PURE__*/_jsx("style", {
|
|
138
|
-
|
|
142
|
+
// If the style is a layer order rule, prefix with the cache key to let Emotion hydrate this node.
|
|
143
|
+
// Otherwise, Emotion will hydrate only the non-global styles and they will override the layer order rule.
|
|
144
|
+
"data-emotion": "".concat(isLayerOrderRule ? "".concat(cache.key, " ") : '').concat(style.key, " ").concat(style.ids.join(' ')),
|
|
139
145
|
// eslint-disable-next-line react/no-danger
|
|
140
146
|
dangerouslySetInnerHTML: {
|
|
141
147
|
__html: style.css
|
|
142
|
-
}
|
|
148
|
+
},
|
|
149
|
+
nonce: cache.nonce
|
|
143
150
|
}, style.key);
|
|
144
151
|
})
|
|
145
152
|
}));
|
|
@@ -27,7 +27,7 @@ export default function AppRouterCacheProvider(props) {
|
|
|
27
27
|
let inserted = [];
|
|
28
28
|
// Override the insert method to support streaming SSR with flush().
|
|
29
29
|
cache.insert = (...args) => {
|
|
30
|
-
if (options?.enableCssLayer) {
|
|
30
|
+
if (options?.enableCssLayer && !args[1].styles.match(/^@layer\s+[^{]*$/)) {
|
|
31
31
|
args[1].styles = `@layer mui {${args[1].styles}}`;
|
|
32
32
|
}
|
|
33
33
|
const [selector, serialized] = args;
|
|
@@ -1,17 +1,36 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
+
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
|
+
const _excluded = ["enableCssLayer"];
|
|
1
4
|
import createCache from '@emotion/cache';
|
|
2
5
|
const isBrowser = typeof document !== 'undefined';
|
|
3
6
|
|
|
4
7
|
// On the client side, Create a meta tag at the top of the <head> and set it as insertionPoint.
|
|
5
8
|
// This assures that MUI styles are loaded first.
|
|
6
9
|
// It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
|
|
7
|
-
export default function createEmotionCache() {
|
|
10
|
+
export default function createEmotionCache(options) {
|
|
8
11
|
let insertionPoint;
|
|
9
12
|
if (isBrowser) {
|
|
10
13
|
const emotionInsertionPoint = document.querySelector('meta[name="emotion-insertion-point"]');
|
|
11
14
|
insertionPoint = emotionInsertionPoint ?? undefined;
|
|
12
15
|
}
|
|
13
|
-
|
|
16
|
+
const _ref = options ?? {},
|
|
17
|
+
{
|
|
18
|
+
enableCssLayer
|
|
19
|
+
} = _ref,
|
|
20
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
21
|
+
const emotionCache = createCache(_extends({
|
|
14
22
|
key: 'mui',
|
|
15
23
|
insertionPoint
|
|
16
|
-
});
|
|
24
|
+
}, rest));
|
|
25
|
+
if (enableCssLayer) {
|
|
26
|
+
const prevInsert = emotionCache.insert;
|
|
27
|
+
emotionCache.insert = (...args) => {
|
|
28
|
+
// ignore styles that contain layer order (`@layer ...` without `{`)
|
|
29
|
+
if (!args[1].styles.match(/^@layer\s+[^{]*$/)) {
|
|
30
|
+
args[1].styles = `@layer mui {${args[1].styles}}`;
|
|
31
|
+
}
|
|
32
|
+
return prevInsert(...args);
|
|
33
|
+
};
|
|
34
|
+
}
|
|
35
|
+
return emotionCache;
|
|
17
36
|
}
|
|
@@ -73,13 +73,22 @@ export async function documentGetInitialProps(ctx, options) {
|
|
|
73
73
|
styles
|
|
74
74
|
} = extractCriticalToChunks(initialProps.html);
|
|
75
75
|
return _extends({}, initialProps, {
|
|
76
|
-
emotionStyleTags: styles.map(style =>
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
dangerouslySetInnerHTML: {
|
|
80
|
-
__html: style.css
|
|
76
|
+
emotionStyleTags: styles.map(style => {
|
|
77
|
+
if (!style.css.trim()) {
|
|
78
|
+
return null;
|
|
81
79
|
}
|
|
82
|
-
|
|
80
|
+
const isLayerOrderRule = style.css.startsWith('@layer') && !style.css.match(/\{.*\}/);
|
|
81
|
+
return /*#__PURE__*/_jsx("style", {
|
|
82
|
+
// If the style is a layer order rule, prefix with the cache key to let Emotion hydrate this node.
|
|
83
|
+
// Otherwise, Emotion will hydrate only the non-global styles and they will override the layer order rule.
|
|
84
|
+
"data-emotion": `${isLayerOrderRule ? `${cache.key} ` : ''}${style.key} ${style.ids.join(' ')}`,
|
|
85
|
+
// eslint-disable-next-line react/no-danger
|
|
86
|
+
dangerouslySetInnerHTML: {
|
|
87
|
+
__html: style.css
|
|
88
|
+
},
|
|
89
|
+
nonce: cache.nonce
|
|
90
|
+
}, style.key);
|
|
91
|
+
})
|
|
83
92
|
});
|
|
84
93
|
}
|
|
85
94
|
}, ...(options?.plugins ?? [])])(ctx);
|
|
@@ -35,7 +35,7 @@ function AppRouterCacheProvider(props) {
|
|
|
35
35
|
let inserted = [];
|
|
36
36
|
// Override the insert method to support streaming SSR with flush().
|
|
37
37
|
cache.insert = (...args) => {
|
|
38
|
-
if (options != null && options.enableCssLayer) {
|
|
38
|
+
if (options != null && options.enableCssLayer && !args[1].styles.match(/^@layer\s+[^{]*$/)) {
|
|
39
39
|
args[1].styles = `@layer mui {${args[1].styles}}`;
|
|
40
40
|
}
|
|
41
41
|
const [selector, serialized] = args;
|
|
@@ -5,20 +5,39 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
7
|
exports.default = createEmotionCache;
|
|
8
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
+
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
|
|
8
10
|
var _cache = _interopRequireDefault(require("@emotion/cache"));
|
|
11
|
+
const _excluded = ["enableCssLayer"];
|
|
9
12
|
const isBrowser = typeof document !== 'undefined';
|
|
10
13
|
|
|
11
14
|
// On the client side, Create a meta tag at the top of the <head> and set it as insertionPoint.
|
|
12
15
|
// This assures that MUI styles are loaded first.
|
|
13
16
|
// It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
|
|
14
|
-
function createEmotionCache() {
|
|
17
|
+
function createEmotionCache(options) {
|
|
15
18
|
let insertionPoint;
|
|
16
19
|
if (isBrowser) {
|
|
17
20
|
const emotionInsertionPoint = document.querySelector('meta[name="emotion-insertion-point"]');
|
|
18
21
|
insertionPoint = emotionInsertionPoint != null ? emotionInsertionPoint : undefined;
|
|
19
22
|
}
|
|
20
|
-
|
|
23
|
+
const _ref = options != null ? options : {},
|
|
24
|
+
{
|
|
25
|
+
enableCssLayer
|
|
26
|
+
} = _ref,
|
|
27
|
+
rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
|
|
28
|
+
const emotionCache = (0, _cache.default)((0, _extends2.default)({
|
|
21
29
|
key: 'mui',
|
|
22
30
|
insertionPoint
|
|
23
|
-
});
|
|
31
|
+
}, rest));
|
|
32
|
+
if (enableCssLayer) {
|
|
33
|
+
const prevInsert = emotionCache.insert;
|
|
34
|
+
emotionCache.insert = (...args) => {
|
|
35
|
+
// ignore styles that contain layer order (`@layer ...` without `{`)
|
|
36
|
+
if (!args[1].styles.match(/^@layer\s+[^{]*$/)) {
|
|
37
|
+
args[1].styles = `@layer mui {${args[1].styles}}`;
|
|
38
|
+
}
|
|
39
|
+
return prevInsert(...args);
|
|
40
|
+
};
|
|
41
|
+
}
|
|
42
|
+
return emotionCache;
|
|
24
43
|
}
|
|
@@ -1,11 +1,22 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
3
4
|
Object.defineProperty(exports, "__esModule", {
|
|
4
5
|
value: true
|
|
5
6
|
});
|
|
7
|
+
var _exportNames = {
|
|
8
|
+
createEmotionCache: true
|
|
9
|
+
};
|
|
10
|
+
Object.defineProperty(exports, "createEmotionCache", {
|
|
11
|
+
enumerable: true,
|
|
12
|
+
get: function () {
|
|
13
|
+
return _createCache.default;
|
|
14
|
+
}
|
|
15
|
+
});
|
|
6
16
|
var _pagesRouterV13Document = require("./pagesRouterV13Document");
|
|
7
17
|
Object.keys(_pagesRouterV13Document).forEach(function (key) {
|
|
8
18
|
if (key === "default" || key === "__esModule") return;
|
|
19
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
9
20
|
if (key in exports && exports[key] === _pagesRouterV13Document[key]) return;
|
|
10
21
|
Object.defineProperty(exports, key, {
|
|
11
22
|
enumerable: true,
|
|
@@ -17,6 +28,7 @@ Object.keys(_pagesRouterV13Document).forEach(function (key) {
|
|
|
17
28
|
var _pagesRouterV13App = require("./pagesRouterV13App");
|
|
18
29
|
Object.keys(_pagesRouterV13App).forEach(function (key) {
|
|
19
30
|
if (key === "default" || key === "__esModule") return;
|
|
31
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
20
32
|
if (key in exports && exports[key] === _pagesRouterV13App[key]) return;
|
|
21
33
|
Object.defineProperty(exports, key, {
|
|
22
34
|
enumerable: true,
|
|
@@ -24,4 +36,5 @@ Object.keys(_pagesRouterV13App).forEach(function (key) {
|
|
|
24
36
|
return _pagesRouterV13App[key];
|
|
25
37
|
}
|
|
26
38
|
});
|
|
27
|
-
});
|
|
39
|
+
});
|
|
40
|
+
var _createCache = _interopRequireDefault(require("./createCache"));
|
|
@@ -84,13 +84,22 @@ async function documentGetInitialProps(ctx, options) {
|
|
|
84
84
|
styles
|
|
85
85
|
} = extractCriticalToChunks(initialProps.html);
|
|
86
86
|
return (0, _extends2.default)({}, initialProps, {
|
|
87
|
-
emotionStyleTags: styles.map(style =>
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
dangerouslySetInnerHTML: {
|
|
91
|
-
__html: style.css
|
|
87
|
+
emotionStyleTags: styles.map(style => {
|
|
88
|
+
if (!style.css.trim()) {
|
|
89
|
+
return null;
|
|
92
90
|
}
|
|
93
|
-
|
|
91
|
+
const isLayerOrderRule = style.css.startsWith('@layer') && !style.css.match(/\{.*\}/);
|
|
92
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("style", {
|
|
93
|
+
// If the style is a layer order rule, prefix with the cache key to let Emotion hydrate this node.
|
|
94
|
+
// Otherwise, Emotion will hydrate only the non-global styles and they will override the layer order rule.
|
|
95
|
+
"data-emotion": `${isLayerOrderRule ? `${cache.key} ` : ''}${style.key} ${style.ids.join(' ')}`,
|
|
96
|
+
// eslint-disable-next-line react/no-danger
|
|
97
|
+
dangerouslySetInnerHTML: {
|
|
98
|
+
__html: style.css
|
|
99
|
+
},
|
|
100
|
+
nonce: cache.nonce
|
|
101
|
+
}, style.key);
|
|
102
|
+
})
|
|
94
103
|
});
|
|
95
104
|
}
|
|
96
105
|
}, ...((_options$plugins = options == null ? void 0 : options.plugins) != null ? _options$plugins : [])])(ctx);
|
package/package.json
CHANGED
|
@@ -28,7 +28,7 @@ export default function AppRouterCacheProvider(props) {
|
|
|
28
28
|
let inserted = [];
|
|
29
29
|
// Override the insert method to support streaming SSR with flush().
|
|
30
30
|
cache.insert = (...args) => {
|
|
31
|
-
if (options != null && options.enableCssLayer) {
|
|
31
|
+
if (options != null && options.enableCssLayer && !args[1].styles.match(/^@layer\s+[^{]*$/)) {
|
|
32
32
|
args[1].styles = `@layer mui {${args[1].styles}}`;
|
|
33
33
|
}
|
|
34
34
|
const [selector, serialized] = args;
|
|
@@ -1 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
import createCache from '@emotion/cache';
|
|
2
|
+
export default function createEmotionCache(options?: {
|
|
3
|
+
enableCssLayer?: boolean;
|
|
4
|
+
} & Parameters<typeof createCache>[0]): import("@emotion/cache").EmotionCache;
|
|
@@ -1,17 +1,36 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
+
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
|
+
const _excluded = ["enableCssLayer"];
|
|
1
4
|
import createCache from '@emotion/cache';
|
|
2
5
|
const isBrowser = typeof document !== 'undefined';
|
|
3
6
|
|
|
4
7
|
// On the client side, Create a meta tag at the top of the <head> and set it as insertionPoint.
|
|
5
8
|
// This assures that MUI styles are loaded first.
|
|
6
9
|
// It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
|
|
7
|
-
export default function createEmotionCache() {
|
|
10
|
+
export default function createEmotionCache(options) {
|
|
8
11
|
let insertionPoint;
|
|
9
12
|
if (isBrowser) {
|
|
10
13
|
const emotionInsertionPoint = document.querySelector('meta[name="emotion-insertion-point"]');
|
|
11
14
|
insertionPoint = emotionInsertionPoint != null ? emotionInsertionPoint : undefined;
|
|
12
15
|
}
|
|
13
|
-
|
|
16
|
+
const _ref = options != null ? options : {},
|
|
17
|
+
{
|
|
18
|
+
enableCssLayer
|
|
19
|
+
} = _ref,
|
|
20
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
21
|
+
const emotionCache = createCache(_extends({
|
|
14
22
|
key: 'mui',
|
|
15
23
|
insertionPoint
|
|
16
|
-
});
|
|
24
|
+
}, rest));
|
|
25
|
+
if (enableCssLayer) {
|
|
26
|
+
const prevInsert = emotionCache.insert;
|
|
27
|
+
emotionCache.insert = (...args) => {
|
|
28
|
+
// ignore styles that contain layer order (`@layer ...` without `{`)
|
|
29
|
+
if (!args[1].styles.match(/^@layer\s+[^{]*$/)) {
|
|
30
|
+
args[1].styles = `@layer mui {${args[1].styles}}`;
|
|
31
|
+
}
|
|
32
|
+
return prevInsert(...args);
|
|
33
|
+
};
|
|
34
|
+
}
|
|
35
|
+
return emotionCache;
|
|
17
36
|
}
|
package/v13-pagesRouter/index.js
CHANGED
|
@@ -74,13 +74,22 @@ export async function documentGetInitialProps(ctx, options) {
|
|
|
74
74
|
styles
|
|
75
75
|
} = extractCriticalToChunks(initialProps.html);
|
|
76
76
|
return _extends({}, initialProps, {
|
|
77
|
-
emotionStyleTags: styles.map(style =>
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
dangerouslySetInnerHTML: {
|
|
81
|
-
__html: style.css
|
|
77
|
+
emotionStyleTags: styles.map(style => {
|
|
78
|
+
if (!style.css.trim()) {
|
|
79
|
+
return null;
|
|
82
80
|
}
|
|
83
|
-
|
|
81
|
+
const isLayerOrderRule = style.css.startsWith('@layer') && !style.css.match(/\{.*\}/);
|
|
82
|
+
return /*#__PURE__*/_jsx("style", {
|
|
83
|
+
// If the style is a layer order rule, prefix with the cache key to let Emotion hydrate this node.
|
|
84
|
+
// Otherwise, Emotion will hydrate only the non-global styles and they will override the layer order rule.
|
|
85
|
+
"data-emotion": `${isLayerOrderRule ? `${cache.key} ` : ''}${style.key} ${style.ids.join(' ')}`,
|
|
86
|
+
// eslint-disable-next-line react/no-danger
|
|
87
|
+
dangerouslySetInnerHTML: {
|
|
88
|
+
__html: style.css
|
|
89
|
+
},
|
|
90
|
+
nonce: cache.nonce
|
|
91
|
+
}, style.key);
|
|
92
|
+
})
|
|
84
93
|
});
|
|
85
94
|
}
|
|
86
95
|
}, ...((_options$plugins = options == null ? void 0 : options.plugins) != null ? _options$plugins : [])])(ctx);
|