@mui/styled-engine 7.0.0-beta.3 → 7.0.0-beta.4

package/CHANGELOG.md

@@ -1,5 +1,65 @@
 # [Versions](https://mui.com/versions/)
 
+## 7.0.0-beta.4
+
+<!-- generated comparing v7.0.0-beta.3..master -->
+
+_Mar 13, 2025_
+
+A big thanks to the 10 contributors who made this release possible.
+This release contains bug fixes 🐛 and improvements to the new package layout 🏗️.
+
+### `@mui/material@7.0.0-beta.4`
+
+- [Accordion] Add missing `root` slot (#45532) @sai6855
+- [AccordionSummary] Add slots and slotProps (#45559) @sai6855
+- [ListItemText] Add missing `root` slot (#45540) @sai6855
+- [SpeedDial] Add missing `root` slot (#45541) @sai6855
+- [Tooltip] Allow auto placement on tooltip (#45399) @Jtaks
+- [useScrollTrigger] Do nothing if target is null (#45441) @vipierozan99
+- [TextareaAutosize] Fix ResizeObserver causing infinite `selectionchange` loop (#45351) @mj12albert
+- Fix negative input for CSS variables spacing array (#45550) @siriwatknp
+- Add missing deprecations in deprecations-all file (#45505) @sai6855
+- Rename some `@mui/material/styles/createTypography` exports (#45558) @Janpot
+
+### `@mui/icons-material@7.0.0-beta.4`
+
+- Remove unused icon names from the download script (#45453) @yermartee
+
+### `@mui/system@7.0.0-beta.4`
+
+- Prevent nested non-vars theme inheritance (#45545) @siriwatknp
+- Disable theme recalculation as default behavior (#45405) @siriwatknp
+- Fix package layout inconsistencies (#45491) @DiegoAndai
+
+### `@mui/styled-engine@7.0.0-beta.4`
+
+- Add `enableCssLayer` prop to StyledEngineProvider (#45428) @siriwatknp
+
+### `@mui/types@7.3.0`
+
+- [code-infra] Fix type resolution for @mui/types (#45513) @Janpot
+
+### `@mui/utils@7.0.0-beta.4`
+
+- Fix package layout inconsistencies (#45491) @DiegoAndai
+- Use correct iri-reference homepage format (#45472) @dahiro
+
+### Docs
+
+- [Backdrop] Fix component name in migration guide (#45506) @sai6855
+- [TextField] Add HTML input section to TextField page (#45439) @siriwatknp
+
+### Core
+
+- [code-infra] Convert a few docs modules to ts (#45548) @Janpot
+- [code-infra] Remove more CJS modules from the docs (#45557) @Janpot
+- [code-infra] Remove nested imports from theme augmentation (#45514) @Janpot
+- [docs-infra] Add @ts-ignore to avoid type checking for MUI X (#45555) @siriwatknp
+- [blog] Fix author end-of-year updates (#45533) @oliviertassinari
+
+All contributors of this release in alphabetical order: @dahiro, @DiegoAndai, @Janpot, @Jtaks, @mj12albert, @oliviertassinari, @sai6855, @siriwatknp, @vipierozan99, @yermartee
+
 ## 7.0.0-beta.3
 
 <!-- generated comparing v7.0.0-beta.2..master -->

package/StyledEngineProvider/StyledEngineProvider.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 export interface StyledEngineProviderProps {
   children?: React.ReactNode;
+  enableCssLayer?: boolean;
   injectFirst?: boolean;
 }
 export default function StyledEngineProvider(props: StyledEngineProviderProps): React.JSX.Element;

package/StyledEngineProvider/StyledEngineProvider.js

@@ -6,6 +6,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.TEST_INTERNALS_DO_NOT_USE = void 0;
 exports.default = StyledEngineProvider;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -13,6 +14,23 @@ var _react2 = require("@emotion/react");
 var _cache = _interopRequireDefault(require("@emotion/cache"));
 var _sheet = require("@emotion/sheet");
 var _jsxRuntime = require("react/jsx-runtime");
+// 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.
+const TEST_INTERNALS_DO_NOT_USE = exports.TEST_INTERNALS_DO_NOT_USE = {
+  /**
+   * to intercept the generated CSS before inserting to the style tag, so that we can check the generated CSS.
+   *
+   * let rule;
+   * TEST_INTERNALS_DO_NOT_USE.insert = (...args) => {
+   *    rule = args[0];
+   * };
+   *
+   * expect(rule).to.equal(...);
+   */
+  insert: undefined
+};
+
 // We might be able to remove this when this issue is fixed:
 // https://github.com/emotion-js/emotion/issues/2790
 const createEmotionCache = (options, CustomSheet) => {
@@ -29,11 +47,11 @@ const createEmotionCache = (options, CustomSheet) => {
   });
   return cache;
 };
-let cache;
+let insertionPoint;
 if (typeof document === 'object') {
   // Use `insertionPoint` over `prepend`(deprecated) because it can be controlled for GlobalStyles injection order
   // For more information, see https://github.com/mui/material-ui/issues/44597
-  let insertionPoint = document.querySelector('[name="emotion-insertion-point"]');
+  insertionPoint = document.querySelector('[name="emotion-insertion-point"]');
   if (!insertionPoint) {
     insertionPoint = document.createElement('meta');
     insertionPoint.setAttribute('name', 'emotion-insertion-point');
@@ -43,30 +61,51 @@ if (typeof document === 'object') {
       head.prepend(insertionPoint);
     }
   }
-  /**
-   * This is for client-side apps only.
-   * A custom sheet is required to make the GlobalStyles API injected above the insertion point.
-   * 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.
-   */
-  class MyStyleSheet extends _sheet.StyleSheet {
-    insert(rule, options) {
-      if (this.key && this.key.endsWith('global')) {
-        this.before = insertionPoint;
+}
+function getCache(injectFirst, enableCssLayer) {
+  if (injectFirst || enableCssLayer) {
+    /**
+     * This is for client-side apps only.
+     * A custom sheet is required to make the GlobalStyles API injected above the insertion point.
+     * 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.
+     */
+    class MyStyleSheet extends _sheet.StyleSheet {
+      insert(rule, options) {
+        if (TEST_INTERNALS_DO_NOT_USE.insert) {
+          return TEST_INTERNALS_DO_NOT_USE.insert(rule, options);
+        }
+        if (this.key && this.key.endsWith('global')) {
+          this.before = insertionPoint;
+        }
+        return super.insert(rule, options);
       }
-      return super.insert(rule, options);
     }
+    const emotionCache = createEmotionCache({
+      key: 'css',
+      insertionPoint: injectFirst ? insertionPoint : undefined
+    }, MyStyleSheet);
+    if (enableCssLayer) {
+      const prevInsert = emotionCache.insert;
+      emotionCache.insert = (...args) => {
+        if (!args[1].styles.startsWith('@layer')) {
+          // avoid nested @layer
+          args[1].styles = `@layer mui {${args[1].styles}}`;
+        }
+        return prevInsert(...args);
+      };
+    }
+    return emotionCache;
   }
-  cache = createEmotionCache({
-    key: 'css',
-    insertionPoint
-  }, MyStyleSheet);
+  return undefined;
 }
 function StyledEngineProvider(props) {
   const {
     injectFirst,
+    enableCssLayer,
     children
   } = props;
-  return injectFirst && cache ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.CacheProvider, {
+  const cache = React.useMemo(() => getCache(injectFirst, enableCssLayer), [injectFirst, enableCssLayer]);
+  return cache ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.CacheProvider, {
     value: cache,
     children: children
   }) : children;
@@ -76,6 +115,11 @@ process.env.NODE_ENV !== "production" ? StyledEngineProvider.propTypes = {
    * Your component tree.
    */
   children: _propTypes.default.node,
+  /**
+   * If `true`, the styles are wrapped in `@layer mui`.
+   * Learn more about [Cascade layers](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers).
+   */
+  enableCssLayer: _propTypes.default.bool,
   /**
    * By default, the styles are injected last in the <head> element of the page.
    * As a result, they gain more specificity than any other style sheet.

package/esm/StyledEngineProvider/StyledEngineProvider.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 export interface StyledEngineProviderProps {
   children?: React.ReactNode;
+  enableCssLayer?: boolean;
   injectFirst?: boolean;
 }
 export default function StyledEngineProvider(props: StyledEngineProviderProps): React.JSX.Element;

package/esm/StyledEngineProvider/StyledEngineProvider.js

@@ -6,9 +6,26 @@ import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
 import { StyleSheet } from '@emotion/sheet';
 
+// 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.
+   *
+   * let rule;
+   * TEST_INTERNALS_DO_NOT_USE.insert = (...args) => {
+   *    rule = args[0];
+   * };
+   *
+   * expect(rule).to.equal(...);
+   */
+  insert: undefined
+};
+
 // We might be able to remove this when this issue is fixed:
 // https://github.com/emotion-js/emotion/issues/2790
-import { jsx as _jsx } from "react/jsx-runtime";
 const createEmotionCache = (options, CustomSheet) => {
   const cache = createCache(options);
 
@@ -23,11 +40,11 @@ const createEmotionCache = (options, CustomSheet) => {
   });
   return cache;
 };
-let cache;
+let insertionPoint;
 if (typeof document === 'object') {
   // Use `insertionPoint` over `prepend`(deprecated) because it can be controlled for GlobalStyles injection order
   // For more information, see https://github.com/mui/material-ui/issues/44597
-  let insertionPoint = document.querySelector('[name="emotion-insertion-point"]');
+  insertionPoint = document.querySelector('[name="emotion-insertion-point"]');
   if (!insertionPoint) {
     insertionPoint = document.createElement('meta');
     insertionPoint.setAttribute('name', 'emotion-insertion-point');
@@ -37,30 +54,51 @@ if (typeof document === 'object') {
       head.prepend(insertionPoint);
     }
   }
-  /**
-   * This is for client-side apps only.
-   * A custom sheet is required to make the GlobalStyles API injected above the insertion point.
-   * 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.
-   */
-  class MyStyleSheet extends StyleSheet {
-    insert(rule, options) {
-      if (this.key && this.key.endsWith('global')) {
-        this.before = insertionPoint;
+}
+function getCache(injectFirst, enableCssLayer) {
+  if (injectFirst || enableCssLayer) {
+    /**
+     * This is for client-side apps only.
+     * A custom sheet is required to make the GlobalStyles API injected above the insertion point.
+     * 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.
+     */
+    class MyStyleSheet extends StyleSheet {
+      insert(rule, options) {
+        if (TEST_INTERNALS_DO_NOT_USE.insert) {
+          return TEST_INTERNALS_DO_NOT_USE.insert(rule, options);
+        }
+        if (this.key && this.key.endsWith('global')) {
+          this.before = insertionPoint;
+        }
+        return super.insert(rule, options);
       }
-      return super.insert(rule, options);
     }
+    const emotionCache = createEmotionCache({
+      key: 'css',
+      insertionPoint: injectFirst ? insertionPoint : undefined
+    }, MyStyleSheet);
+    if (enableCssLayer) {
+      const prevInsert = emotionCache.insert;
+      emotionCache.insert = (...args) => {
+        if (!args[1].styles.startsWith('@layer')) {
+          // avoid nested @layer
+          args[1].styles = `@layer mui {${args[1].styles}}`;
+        }
+        return prevInsert(...args);
+      };
+    }
+    return emotionCache;
   }
-  cache = createEmotionCache({
-    key: 'css',
-    insertionPoint
-  }, MyStyleSheet);
+  return undefined;
 }
 export default function StyledEngineProvider(props) {
   const {
     injectFirst,
+    enableCssLayer,
     children
   } = props;
-  return injectFirst && cache ? /*#__PURE__*/_jsx(CacheProvider, {
+  const cache = React.useMemo(() => getCache(injectFirst, enableCssLayer), [injectFirst, enableCssLayer]);
+  return cache ? /*#__PURE__*/_jsx(CacheProvider, {
     value: cache,
     children: children
   }) : children;
@@ -70,6 +108,11 @@ process.env.NODE_ENV !== "production" ? StyledEngineProvider.propTypes = {
    * Your component tree.
    */
   children: PropTypes.node,
+  /**
+   * If `true`, the styles are wrapped in `@layer mui`.
+   * Learn more about [Cascade layers](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers).
+   */
+  enableCssLayer: PropTypes.bool,
   /**
    * By default, the styles are injected last in the <head> element of the page.
    * As a result, they gain more specificity than any other style sheet.

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/styled-engine v7.0.0-beta.3
+ * @mui/styled-engine v7.0.0-beta.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/styled-engine v7.0.0-beta.3
+ * @mui/styled-engine v7.0.0-beta.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/StyledEngineProvider/StyledEngineProvider.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 export interface StyledEngineProviderProps {
   children?: React.ReactNode;
+  enableCssLayer?: boolean;
   injectFirst?: boolean;
 }
 export default function StyledEngineProvider(props: StyledEngineProviderProps): React.JSX.Element;

package/modern/StyledEngineProvider/StyledEngineProvider.js

@@ -6,9 +6,26 @@ import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
 import { StyleSheet } from '@emotion/sheet';
 
+// 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.
+   *
+   * let rule;
+   * TEST_INTERNALS_DO_NOT_USE.insert = (...args) => {
+   *    rule = args[0];
+   * };
+   *
+   * expect(rule).to.equal(...);
+   */
+  insert: undefined
+};
+
 // We might be able to remove this when this issue is fixed:
 // https://github.com/emotion-js/emotion/issues/2790
-import { jsx as _jsx } from "react/jsx-runtime";
 const createEmotionCache = (options, CustomSheet) => {
   const cache = createCache(options);
 
@@ -23,11 +40,11 @@ const createEmotionCache = (options, CustomSheet) => {
   });
   return cache;
 };
-let cache;
+let insertionPoint;
 if (typeof document === 'object') {
   // Use `insertionPoint` over `prepend`(deprecated) because it can be controlled for GlobalStyles injection order
   // For more information, see https://github.com/mui/material-ui/issues/44597
-  let insertionPoint = document.querySelector('[name="emotion-insertion-point"]');
+  insertionPoint = document.querySelector('[name="emotion-insertion-point"]');
   if (!insertionPoint) {
     insertionPoint = document.createElement('meta');
     insertionPoint.setAttribute('name', 'emotion-insertion-point');
@@ -37,30 +54,51 @@ if (typeof document === 'object') {
       head.prepend(insertionPoint);
     }
   }
-  /**
-   * This is for client-side apps only.
-   * A custom sheet is required to make the GlobalStyles API injected above the insertion point.
-   * 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.
-   */
-  class MyStyleSheet extends StyleSheet {
-    insert(rule, options) {
-      if (this.key && this.key.endsWith('global')) {
-        this.before = insertionPoint;
+}
+function getCache(injectFirst, enableCssLayer) {
+  if (injectFirst || enableCssLayer) {
+    /**
+     * This is for client-side apps only.
+     * A custom sheet is required to make the GlobalStyles API injected above the insertion point.
+     * 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.
+     */
+    class MyStyleSheet extends StyleSheet {
+      insert(rule, options) {
+        if (TEST_INTERNALS_DO_NOT_USE.insert) {
+          return TEST_INTERNALS_DO_NOT_USE.insert(rule, options);
+        }
+        if (this.key && this.key.endsWith('global')) {
+          this.before = insertionPoint;
+        }
+        return super.insert(rule, options);
       }
-      return super.insert(rule, options);
     }
+    const emotionCache = createEmotionCache({
+      key: 'css',
+      insertionPoint: injectFirst ? insertionPoint : undefined
+    }, MyStyleSheet);
+    if (enableCssLayer) {
+      const prevInsert = emotionCache.insert;
+      emotionCache.insert = (...args) => {
+        if (!args[1].styles.startsWith('@layer')) {
+          // avoid nested @layer
+          args[1].styles = `@layer mui {${args[1].styles}}`;
+        }
+        return prevInsert(...args);
+      };
+    }
+    return emotionCache;
   }
-  cache = createEmotionCache({
-    key: 'css',
-    insertionPoint
-  }, MyStyleSheet);
+  return undefined;
 }
 export default function StyledEngineProvider(props) {
   const {
     injectFirst,
+    enableCssLayer,
     children
   } = props;
-  return injectFirst && cache ? /*#__PURE__*/_jsx(CacheProvider, {
+  const cache = React.useMemo(() => getCache(injectFirst, enableCssLayer), [injectFirst, enableCssLayer]);
+  return cache ? /*#__PURE__*/_jsx(CacheProvider, {
     value: cache,
     children: children
   }) : children;
@@ -70,6 +108,11 @@ process.env.NODE_ENV !== "production" ? StyledEngineProvider.propTypes = {
    * Your component tree.
    */
   children: PropTypes.node,
+  /**
+   * If `true`, the styles are wrapped in `@layer mui`.
+   * Learn more about [Cascade layers](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers).
+   */
+  enableCssLayer: PropTypes.bool,
   /**
    * By default, the styles are injected last in the <head> element of the page.
    * As a result, they gain more specificity than any other style sheet.

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/styled-engine v7.0.0-beta.3
+ * @mui/styled-engine v7.0.0-beta.4
  *
  * @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": "7.0.0-beta.3",
+  "version": "7.0.0-beta.4",
   "private": false,
   "author": "MUI Team",
   "description": "styled() API wrapper package for emotion.",