feat(v2): add support for RTL direction (#4140)

* feat(v2): add support for RTL

* Move to i18n config

* Move direction to localeConfigs

* Create RTL styles for Docusaurus styles (via new hook)

* update infima to alpha 19

* fix minor type error

* Fix build

* Cleanup

* polish RTL support

* polish RTL support

* revert english rtl dir

* minor RTL fix

* minor doc updates

Co-authored-by: slorber <lorber.sebastien@gmail.com>

packages/docusaurus-theme-classic/src/index.ts

@@ -9,6 +9,8 @@ import {Plugin} from '@docusaurus/types';
 import {getTranslationFiles, translateThemeConfig} from './translations';
 import path from 'path';
 import Module from 'module';
+import postcss from 'postcss';
+import rtlcss from 'rtlcss';
 
 const createRequire = Module.createRequire || Module.createRequireFromPath;
 const requireFromDocusaurusCore = createRequire(
@@ -59,15 +61,23 @@ const noFlashColorMode = ({defaultMode, respectPrefersColorScheme}) => {
 })();`;
 };
 
+function getInfimaCSSFile(direction) {
+  return `infima/dist/css/default/default${
+    direction === 'rtl' ? '-rtl' : ''
+  }.css`;
+}
+
 export default function docusaurusThemeClassic(
   context,
   options,
 ): Plugin<null, unknown> {
   const {
     siteConfig: {themeConfig},
+    i18n: {currentLocale, localeConfigs},
   } = context;
   const {colorMode, prism: {additionalLanguages = []} = {}} = themeConfig || {};
   const {customCss} = options || {};
+  const {direction} = localeConfigs[currentLocale];
 
   return {
     name: 'docusaurus-theme-classic',
@@ -95,7 +105,7 @@ export default function docusaurusThemeClassic(
 
     getClientModules() {
       const modules = [
-        require.resolve('infima/dist/css/default/default.css'),
+        require.resolve(getInfimaCSSFile(direction)),
         path.resolve(__dirname, './prism-include-languages'),
       ];
 
@@ -135,6 +145,37 @@ export default function docusaurusThemeClassic(
       };
     },
 
+    configurePostCss(postCssOptions) {
+      if (direction === 'rtl') {
+        postCssOptions.plugins.push(
+          postcss.plugin('RtlCssPlugin', () => {
+            function isInfimaCSSFile(file) {
+              return (
+                file.endsWith(getInfimaCSSFile(direction)) ||
+                // special case for our own monorepo using symlinks!
+                file.endsWith(
+                  'infima/packages/core/dist/css/default/default-rtl.css',
+                )
+              );
+            }
+
+            return function (root: any) {
+              const file = root?.source.input.file;
+
+              // Skip Infima as we are using the its RTL version.
+              if (isInfimaCSSFile(file)) {
+                return;
+              }
+
+              rtlcss.process(root);
+            };
+          }),
+        );
+      }
+
+      return postCssOptions;
+    },
+
     injectHtmlTags() {
       return {
         preBodyTags: [