[docs] Support RTL with styled components (mui#25457)

mfal · Mar 21, 2021 · 54672ee · 54672ee
1 parent 7c02500
commit 54672ee
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 11 deletions.
diff --git a/docs/package.json b/docs/package.json
@@ -116,6 +116,7 @@
     "styled-components": "^5.0.0",
     "stylis": "^4.0.3",
     "stylis-plugin-rtl": "^2.0.1",
+    "stylis-plugin-rtl-sc": "npm:stylis-plugin-rtl@^1.1.0",
     "webfontloader": "^1.6.28",
     "webpack-bundle-analyzer": "^4.1.0"
   },

diff --git a/docs/src/modules/components/AppNavDrawerItem.js b/docs/src/modules/components/AppNavDrawerItem.js
@@ -99,7 +99,7 @@ export default function AppNavDrawerItem(props) {
   };
 
   const style = {
-    paddingLeft: 8 * (3 + 1.5 * depth),
+    paddingInlineStart: 8 * (3 + 1.5 * depth),
   };
 
   if (href) {

diff --git a/docs/src/modules/components/DemoSandboxed.js b/docs/src/modules/components/DemoSandboxed.js
@@ -3,8 +3,10 @@ import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import { create } from 'jss';
 import rtlPlugin from 'stylis-plugin-rtl';
+import rtlPluginSc from 'stylis-plugin-rtl-sc';
 import createCache from '@emotion/cache';
 import { CacheProvider } from '@emotion/react';
+import { StyleSheetManager } from 'styled-components';
 import { makeStyles, useTheme, jssPreset, StylesProvider } from '@material-ui/core/styles';
 import rtl from 'jss-rtl';
 import DemoErrorBoundary from 'docs/src/modules/components/DemoErrorBoundary';
@@ -43,11 +45,16 @@ function FramedDemo(props) {
 
   return (
     <StylesProvider jss={jss} sheetsManager={sheetsManager}>
-      <CacheProvider value={cache}>
-        {React.cloneElement(children, {
-          window: getWindow,
-        })}
-      </CacheProvider>
+      <StyleSheetManager
+        target={document.head}
+        stylisPlugins={theme.direction === 'rtl' ? [rtlPluginSc] : []}
+      >
+        <CacheProvider value={cache}>
+          {React.cloneElement(children, {
+            window: getWindow,
+          })}
+        </CacheProvider>
+      </StyleSheetManager>
     </StylesProvider>
   );
 }

diff --git a/docs/src/modules/utils/StyledEngineProvider.js b/docs/src/modules/utils/StyledEngineProvider.js
@@ -4,6 +4,7 @@ import { StyleSheetManager } from 'styled-components';
 import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
 import rtlPlugin from 'stylis-plugin-rtl';
+import rtlPluginSc from 'stylis-plugin-rtl-sc';
 import { useTheme } from '@material-ui/core/styles';
 
 // Cache for the ltr version of the styles
@@ -18,20 +19,18 @@ const cacheRtl = createCache({
 });
 cacheRtl.compat = true;
 
-const StyledEngineProvider = (props) => {
+export default function StyledEngineProvider(props) {
   const theme = useTheme();
 
   const rtl = theme.direction === 'rtl';
 
   return (
-    <StyleSheetManager stylisPlugins={rtl ? [rtlPlugin] : []}>
+    <StyleSheetManager stylisPlugins={rtl ? [rtlPluginSc] : []}>
       <CacheProvider value={rtl ? cacheRtl : cacheLtr}>{props.children}</CacheProvider>
     </StyleSheetManager>
   );
-};
+}
 
 StyledEngineProvider.propTypes = {
   children: PropTypes.node,
 };
-
-export default StyledEngineProvider;
diff --git a/yarn.lock b/yarn.lock
@@ -6133,6 +6133,11 @@ cssesc@^3.0.0:
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
+cssjanus@^1.3.0:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/cssjanus/-/cssjanus-1.3.2.tgz#7c23d39be92f63e1557a75c015f61d95009bd6b3"
+  integrity sha512-5pM/C1MIfoqhXa7k9PqSnrjj1SSZDakfyB1DZhdYyJoDUH+evGbsUg6/bpQapTJeSnYaj0rdzPUMeM33CvB0vw==
+
 cssjanus@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/cssjanus/-/cssjanus-2.0.1.tgz#e0fe6e805b3ad960245a5ab81295609480d040dd"
@@ -15400,6 +15405,13 @@ stylelint@^13.7.2:
     v8-compile-cache "^2.2.0"
     write-file-atomic "^3.0.3"
 
+"stylis-plugin-rtl-sc@npm:stylis-plugin-rtl@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/stylis-plugin-rtl/-/stylis-plugin-rtl-1.1.0.tgz#028d72419ccc47eeaaec684f3e192534f2c57ece"
+  integrity sha512-FPoSxP+gbBLJRUXDRDFNBhqy/eToquDLn7ZrjIVBRfXaZ9bunwNnDtDm2qW1EoU0c93krm1Dy+8iVmJpjRGsKw==
+  dependencies:
+    cssjanus "^1.3.0"
+
 stylis-plugin-rtl@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/stylis-plugin-rtl/-/stylis-plugin-rtl-2.0.2.tgz#d07fc6f3f9818ccc1de6b2d57d67e679b14116e5"