@mui/styled-engine 6.2.1 → 6.3.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 (8) hide show
  1. package/CHANGELOG.md +41 -0
  2. package/StyledEngineProvider/StyledEngineProvider.js +29 -19
  3. package/index.js +1 -1
  4. package/modern/StyledEngineProvider/StyledEngineProvider.js +29 -19
  5. package/modern/index.js +1 -1
  6. package/node/StyledEngineProvider/StyledEngineProvider.js +29 -19
  7. package/node/index.js +1 -1
  8. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,46 @@
1
1
  # [Versions](https://mui.com/versions/)
2
2
 
3
+ ## 6.3.0
4
+
5
+ <!-- generated comparing v6.2.1..master -->
6
+
7
+ _Dec 23, 2024_
8
+
9
+ A big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
10
+
11
+ - Fix invalid HTML structure in the Accordion component (#44408) @ZeeshanTamboli
12
+ The HTML elements of the Accordion summary have been updated:
13
+ - the root element is now button (previously div).
14
+ - summary content and the icon wrapper are now span (previously div).
15
+ This will only impact you if you used the HTML element as selectors in your styles.
16
+
17
+ ### `@mui/material@6.3.0`
18
+
19
+ - [Accordion] Fix invalid HTML inside heading (#44408) @ZeeshanTamboli
20
+ - [useAutocomplete] Improve TS typing of `groupedOptions` prop (#44657) @lewxdev
21
+ - Prevent `ownerState` propagation for transition slots (#44401) @ZeeshanTamboli
22
+ - [StepContent] Add slots and slotProps (#44742) @sai6855
23
+ - [TablePagination] Add the rest of `slots` and `slotProps`. (#44570) @siriwatknp
24
+
25
+ ### `@mui/system@6.3.0`
26
+
27
+ - Set `before` directly without using prepend for global styles (#44648) @siriwatknp
28
+
29
+ ### Docs
30
+
31
+ - [material-ui] Improve `theme.applyStyles()` docs (#44658) @DiegoAndai
32
+ - [material-ui] Update MD callout (#43958) @aarongarciah
33
+
34
+ ### Core
35
+
36
+ - Remove unnecessary conditional around `.muiName =` (#44071) @Janpot
37
+ - [blog] Material UI: 2024 EOY updates blog post (#44722) @alelthomas
38
+ - Fix quickstart command in pigment docs (#44806) @yash49
39
+ - [docs-infra] Remove Next.js production profiler (#44823) @romgrk
40
+ - [docs-infra] Remove no longer support `optimizeFonts` Next.js option (#44802) @LukasTy
41
+
42
+ All contributors of this release in alphabetical order: @aarongarciah, @alelthomas, @DiegoAndai, @Janpot, @lewxdev, @LukasTy, @romgrk, @sai6855, @siriwatknp, @yash49, @ZeeshanTamboli
43
+
3
44
  ## 6.2.1
4
45
 
5
46
  <!-- generated comparing v6.2.0..master -->
package/StyledEngineProvider/StyledEngineProvider.js CHANGED
@@ -9,23 +9,11 @@ import { StyleSheet } from '@emotion/sheet';
9
9
  // We might be able to remove this when this issue is fixed:
10
10
  // https://github.com/emotion-js/emotion/issues/2790
11
11
  import { jsx as _jsx } from "react/jsx-runtime";
12
- const createEmotionCache = options => {
12
+ const createEmotionCache = (options, CustomSheet) => {
13
13
  const cache = createCache(options);
14
14
 
15
- /**
16
- * This is for client-side apps only.
17
- * A custom sheet is required to make the GlobalStyles API work with `prepend: true`.
18
- * This is because the [sheet](https://github.com/emotion-js/emotion/blob/main/packages/react/src/global.js#L94-L99) does not consume the options.
19
- */
20
- class MyStyleSheet extends StyleSheet {
21
- constructor(args) {
22
- super(args);
23
- this.prepend = cache.sheet.prepend;
24
- }
25
- }
26
-
27
15
  // Do the same as https://github.com/emotion-js/emotion/blob/main/packages/cache/src/index.js#L238-L245
28
- cache.sheet = new MyStyleSheet({
16
+ cache.sheet = new CustomSheet({
29
17
  key: cache.key,
30
18
  nonce: cache.sheet.nonce,
31
19
  container: cache.sheet.container,
@@ -35,15 +23,37 @@ const createEmotionCache = options => {
35
23
  });
36
24
  return cache;
37
25
  };
38
-
39
- // prepend: true moves MUI styles to the top of the <head> so they're loaded first.
40
- // It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
41
26
  let cache;
42
27
  if (typeof document === 'object') {
28
+ // Use `insertionPoint` over `prepend`(deprecated) because it can be controlled for GlobalStyles injection order
29
+ // For more information, see https://github.com/mui/material-ui/issues/44597
30
+ let insertionPoint = document.querySelector('[name="emotion-insertion-point"]');
31
+ if (!insertionPoint) {
32
+ insertionPoint = document.createElement('meta');
33
+ insertionPoint.setAttribute('name', 'emotion-insertion-point');
34
+ insertionPoint.setAttribute('content', '');
35
+ const head = document.querySelector('head');
36
+ if (head) {
37
+ head.prepend(insertionPoint);
38
+ }
39
+ }
40
+ /**
41
+ * This is for client-side apps only.
42
+ * A custom sheet is required to make the GlobalStyles API injected above the insertion point.
43
+ * This is because the [sheet](https://github.com/emotion-js/emotion/blob/main/packages/react/src/global.js#L94-L99) does not consume the options.
44
+ */
45
+ class MyStyleSheet extends StyleSheet {
46
+ insert(rule, options) {
47
+ if (this.key && this.key.endsWith('global')) {
48
+ this.before = insertionPoint;
49
+ }
50
+ return super.insert(rule, options);
51
+ }
52
+ }
43
53
  cache = createEmotionCache({
44
54
  key: 'css',
45
- prepend: true
46
- });
55
+ insertionPoint
56
+ }, MyStyleSheet);
47
57
  }
48
58
  export default function StyledEngineProvider(props) {
49
59
  const {
package/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/styled-engine v6.2.1
2
+ * @mui/styled-engine v6.3.0
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
package/modern/StyledEngineProvider/StyledEngineProvider.js CHANGED
@@ -9,23 +9,11 @@ import { StyleSheet } from '@emotion/sheet';
9
9
  // We might be able to remove this when this issue is fixed:
10
10
  // https://github.com/emotion-js/emotion/issues/2790
11
11
  import { jsx as _jsx } from "react/jsx-runtime";
12
- const createEmotionCache = options => {
12
+ const createEmotionCache = (options, CustomSheet) => {
13
13
  const cache = createCache(options);
14
14
 
15
- /**
16
- * This is for client-side apps only.
17
- * A custom sheet is required to make the GlobalStyles API work with `prepend: true`.
18
- * This is because the [sheet](https://github.com/emotion-js/emotion/blob/main/packages/react/src/global.js#L94-L99) does not consume the options.
19
- */
20
- class MyStyleSheet extends StyleSheet {
21
- constructor(args) {
22
- super(args);
23
- this.prepend = cache.sheet.prepend;
24
- }
25
- }
26
-
27
15
  // Do the same as https://github.com/emotion-js/emotion/blob/main/packages/cache/src/index.js#L238-L245
28
- cache.sheet = new MyStyleSheet({
16
+ cache.sheet = new CustomSheet({
29
17
  key: cache.key,
30
18
  nonce: cache.sheet.nonce,
31
19
  container: cache.sheet.container,
@@ -35,15 +23,37 @@ const createEmotionCache = options => {
35
23
  });
36
24
  return cache;
37
25
  };
38
-
39
- // prepend: true moves MUI styles to the top of the <head> so they're loaded first.
40
- // It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
41
26
  let cache;
42
27
  if (typeof document === 'object') {
28
+ // Use `insertionPoint` over `prepend`(deprecated) because it can be controlled for GlobalStyles injection order
29
+ // For more information, see https://github.com/mui/material-ui/issues/44597
30
+ let insertionPoint = document.querySelector('[name="emotion-insertion-point"]');
31
+ if (!insertionPoint) {
32
+ insertionPoint = document.createElement('meta');
33
+ insertionPoint.setAttribute('name', 'emotion-insertion-point');
34
+ insertionPoint.setAttribute('content', '');
35
+ const head = document.querySelector('head');
36
+ if (head) {
37
+ head.prepend(insertionPoint);
38
+ }
39
+ }
40
+ /**
41
+ * This is for client-side apps only.
42
+ * A custom sheet is required to make the GlobalStyles API injected above the insertion point.
43
+ * This is because the [sheet](https://github.com/emotion-js/emotion/blob/main/packages/react/src/global.js#L94-L99) does not consume the options.
44
+ */
45
+ class MyStyleSheet extends StyleSheet {
46
+ insert(rule, options) {
47
+ if (this.key && this.key.endsWith('global')) {
48
+ this.before = insertionPoint;
49
+ }
50
+ return super.insert(rule, options);
51
+ }
52
+ }
43
53
  cache = createEmotionCache({
44
54
  key: 'css',
45
- prepend: true
46
- });
55
+ insertionPoint
56
+ }, MyStyleSheet);
47
57
  }
48
58
  export default function StyledEngineProvider(props) {
49
59
  const {
package/modern/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/styled-engine v6.2.1
2
+ * @mui/styled-engine v6.3.0
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
package/node/StyledEngineProvider/StyledEngineProvider.js CHANGED
@@ -15,23 +15,11 @@ var _sheet = require("@emotion/sheet");
15
15
  var _jsxRuntime = require("react/jsx-runtime");
16
16
  // We might be able to remove this when this issue is fixed:
17
17
  // https://github.com/emotion-js/emotion/issues/2790
18
- const createEmotionCache = options => {
18
+ const createEmotionCache = (options, CustomSheet) => {
19
19
  const cache = (0, _cache.default)(options);
20
20
 
21
- /**
22
- * This is for client-side apps only.
23
- * A custom sheet is required to make the GlobalStyles API work with `prepend: true`.
24
- * This is because the [sheet](https://github.com/emotion-js/emotion/blob/main/packages/react/src/global.js#L94-L99) does not consume the options.
25
- */
26
- class MyStyleSheet extends _sheet.StyleSheet {
27
- constructor(args) {
28
- super(args);
29
- this.prepend = cache.sheet.prepend;
30
- }
31
- }
32
-
33
21
  // Do the same as https://github.com/emotion-js/emotion/blob/main/packages/cache/src/index.js#L238-L245
34
- cache.sheet = new MyStyleSheet({
22
+ cache.sheet = new CustomSheet({
35
23
  key: cache.key,
36
24
  nonce: cache.sheet.nonce,
37
25
  container: cache.sheet.container,
@@ -41,15 +29,37 @@ const createEmotionCache = options => {
41
29
  });
42
30
  return cache;
43
31
  };
44
-
45
- // prepend: true moves MUI styles to the top of the <head> so they're loaded first.
46
- // It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
47
32
  let cache;
48
33
  if (typeof document === 'object') {
34
+ // Use `insertionPoint` over `prepend`(deprecated) because it can be controlled for GlobalStyles injection order
35
+ // For more information, see https://github.com/mui/material-ui/issues/44597
36
+ let insertionPoint = document.querySelector('[name="emotion-insertion-point"]');
37
+ if (!insertionPoint) {
38
+ insertionPoint = document.createElement('meta');
39
+ insertionPoint.setAttribute('name', 'emotion-insertion-point');
40
+ insertionPoint.setAttribute('content', '');
41
+ const head = document.querySelector('head');
42
+ if (head) {
43
+ head.prepend(insertionPoint);
44
+ }
45
+ }
46
+ /**
47
+ * This is for client-side apps only.
48
+ * A custom sheet is required to make the GlobalStyles API injected above the insertion point.
49
+ * This is because the [sheet](https://github.com/emotion-js/emotion/blob/main/packages/react/src/global.js#L94-L99) does not consume the options.
50
+ */
51
+ class MyStyleSheet extends _sheet.StyleSheet {
52
+ insert(rule, options) {
53
+ if (this.key && this.key.endsWith('global')) {
54
+ this.before = insertionPoint;
55
+ }
56
+ return super.insert(rule, options);
57
+ }
58
+ }
49
59
  cache = createEmotionCache({
50
60
  key: 'css',
51
- prepend: true
52
- });
61
+ insertionPoint
62
+ }, MyStyleSheet);
53
63
  }
54
64
  function StyledEngineProvider(props) {
55
65
  const {
package/node/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/styled-engine v6.2.1
2
+ * @mui/styled-engine v6.3.0
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mui/styled-engine",
3
- "version": "6.2.1",
3
+ "version": "6.3.0",
4
4
  "private": false,
5
5
  "author": "MUI Team",
6
6
  "description": "styled() API wrapper package for emotion.",