[system] Use a custom sheet to set prepend for GlobalStyles (#43632)

siriwatknp · web-flow · commit da163f02d8ca · 2024-09-11T08:01:41.000Z
diff --git a/packages/mui-styled-engine/package.json b/packages/mui-styled-engine/package.json
@@ -39,6 +39,7 @@
   "dependencies": {
     "@babel/runtime": "^7.25.6",
     "@emotion/cache": "^11.13.1",
+    "@emotion/sheet": "^1.4.0",
     "csstype": "^3.1.3",
     "prop-types": "^15.8.1"
   },
diff --git a/packages/mui-styled-engine/src/StyledEngineProvider/StyledEngineProvider.js b/packages/mui-styled-engine/src/StyledEngineProvider/StyledEngineProvider.js
@@ -3,12 +3,43 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
+import { StyleSheet } from '@emotion/sheet';
+
+// We might be able to remove this when this issue is fixed:
+// https://github.com/emotion-js/emotion/issues/2790
+const createEmotionCache = (options) => {
+  const cache = createCache(options);
+
+  /**
+   * This is for client-side apps only.
+   * A custom sheet is required to make the GlobalStyles API work with `prepend: true`.
+   * 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 {
+    constructor(args) {
+      super(args);
+      this.prepend = cache.sheet.prepend;
+    }
+  }
+
+  // Do the same as https://github.com/emotion-js/emotion/blob/main/packages/cache/src/index.js#L238-L245
+  cache.sheet = new MyStyleSheet({
+    key: cache.key,
+    nonce: cache.sheet.nonce,
+    container: cache.sheet.container,
+    speedy: cache.sheet.isSpeedy,
+    prepend: cache.sheet.prepend,
+    insertionPoint: cache.sheet.insertionPoint,
+  });
+
+  return cache;
+};
 
 // prepend: true moves MUI styles to the top of the <head> so they're loaded first.
 // It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
 let cache;
 if (typeof document === 'object') {
-  cache = createCache({ key: 'css', prepend: true });
+  cache = createEmotionCache({ key: 'css', prepend: true });
 }
 
 export default function StyledEngineProvider(props) {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
