[docs-infra] Fix RTL dark mode (mui#41803)

samuelsycamore · Dec 4, 2024 · e2ba426 · e2ba426
1 parent c328fe4
commit e2ba426
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 18 deletions.
diff --git a/docs/src/createEmotionCache.ts b/docs/src/createEmotionCache.ts
@@ -1,21 +1,6 @@
-/* eslint-disable default-case */
 import createCache from '@emotion/cache';
-import { prefixer, Element, RULESET } from 'stylis';
-
-// A workaround to https://github.com/emotion-js/emotion/issues/2836
-// to be able to use `:where` selector for styling.
-function globalSelector(element: Element) {
-  switch (element.type) {
-    case RULESET:
-      element.props = (element.props as string[]).map((value: any) => {
-        if (value.match(/(:where|:is)\(/)) {
-          value = value.replace(/\.[^:]+(:where|:is)/, '$1');
-          return value;
-        }
-        return value;
-      });
-  }
-}
+import { prefixer } from 'stylis';
+import globalSelector from './modules/utils/globalSelector';
 
 export default function createEmotionCache() {
   // TODO remove prepend: true once JSS is out

diff --git a/docs/src/modules/utils/StyledEngineProvider.js b/docs/src/modules/utils/StyledEngineProvider.js
@@ -6,12 +6,13 @@ import createCache from '@emotion/cache';
 import { prefixer } from 'stylis';
 import rtlPlugin from 'stylis-plugin-rtl';
 import { useTheme } from '@mui/material/styles';
+import globalSelector from './globalSelector';
 
 // Cache for the rtl version of the styles
 const cacheRtl = createCache({
   key: 'rtl',
   prepend: true,
-  stylisPlugins: [prefixer, rtlPlugin],
+  stylisPlugins: [prefixer, rtlPlugin, globalSelector],
 });
 
 export default function StyledEngineProvider(props) {

diff --git a/docs/src/modules/utils/globalSelector.ts b/docs/src/modules/utils/globalSelector.ts
@@ -0,0 +1,17 @@
+/* eslint-disable default-case */
+import { Element, RULESET } from 'stylis';
+
+// A workaround to https://github.com/emotion-js/emotion/issues/2836
+// to be able to use `:where` selector for styling.
+export default function globalSelector(element: Element) {
+  switch (element.type) {
+    case RULESET:
+      element.props = (element.props as string[]).map((value: any) => {
+        if (value.match(/(:where|:is)\(/)) {
+          value = value.replace(/\.[^:]+(:where|:is)/, '$1');
+          return value;
+        }
+        return value;
+      });
+  }
+}