From 90a8ca387e6a0cd7352f8aab58c36ee43850dfbb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Lorber?= <slorber@users.noreply.github.com>
Date: Fri, 24 Jun 2022 17:22:44 +0200
Subject: [PATCH] chore: prevent importing theme components with relative paths
 (#7674)

---
 .eslintrc.js                                  | 49 +++++++++++++------
 .../src/theme/BlogTagsListPage/index.tsx      |  2 +-
 .../src/theme/Layout/index.tsx                |  9 +++-
 .../Layout/{styles.css => styles.module.css}  | 22 ++++-----
 4 files changed, 52 insertions(+), 30 deletions(-)
 rename packages/docusaurus-theme-classic/src/theme/Layout/{styles.css => styles.module.css} (70%)

diff --git a/.eslintrc.js b/.eslintrc.js
index 42e5e054f282..91c98e113543 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -9,6 +9,18 @@ const OFF = 0;
 const WARNING = 1;
 const ERROR = 2;
 
+const ClientRestrictedImportPatterns = [
+  // Prevent importing lodash in client bundle for bundle size
+  'lodash',
+  'lodash.**',
+  'lodash/**',
+  // Prevent importing server code in client bundle
+  '**/../babel/**',
+  '**/../server/**',
+  '**/../commands/**',
+  '**/../webpack/**',
+];
+
 module.exports = {
   root: true,
   env: {
@@ -371,25 +383,32 @@ module.exports = {
   },
   overrides: [
     {
-      files: [
-        'packages/docusaurus-*/src/theme/**/*.{js,ts,tsx}',
-        'packages/docusaurus/src/client/**/*.{js,ts,tsx}',
-      ],
+      files: ['packages/docusaurus/src/client/**/*.{js,ts,tsx}'],
+      rules: {
+        'no-restricted-imports': [
+          'error',
+          {
+            patterns: ClientRestrictedImportPatterns,
+          },
+        ],
+      },
+    },
+    {
+      files: ['packages/docusaurus-*/src/theme/**/*.{js,ts,tsx}'],
+      excludedFiles: '*.test.{js,ts,tsx}',
       rules: {
         'no-restricted-imports': [
           'error',
           {
-            patterns: [
-              // Prevent importing lodash in client bundle for bundle size
-              'lodash',
-              'lodash.**',
-              'lodash/**',
-              // Prevent importing server code in client bundle
-              '**/../babel/**',
-              '**/../server/**',
-              '**/../commands/**',
-              '**/../webpack/**',
-            ],
+            patterns: ClientRestrictedImportPatterns.concat(
+              // Prevents relative imports between React theme components
+              [
+                '../**',
+                './**',
+                // Allows relative styles module import with consistent filename
+                '!./styles.module.css',
+              ],
+            ),
           },
         ],
       },
diff --git a/packages/docusaurus-theme-classic/src/theme/BlogTagsListPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogTagsListPage/index.tsx
index 017329d478b1..46af5b4ef61d 100644
--- a/packages/docusaurus-theme-classic/src/theme/BlogTagsListPage/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/BlogTagsListPage/index.tsx
@@ -16,7 +16,7 @@ import {
 import BlogLayout from '@theme/BlogLayout';
 import TagsListByLetter from '@theme/TagsListByLetter';
 import type {Props} from '@theme/BlogTagsListPage';
-import SearchMetadata from '../SearchMetadata';
+import SearchMetadata from '@theme/SearchMetadata';
 
 export default function BlogTagsListPage({tags, sidebar}: Props): JSX.Element {
   const title = translateTagsPageTitle();
diff --git a/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx b/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx
index 47253c1a4c2d..262edf2c14f9 100644
--- a/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx
@@ -16,8 +16,8 @@ import Navbar from '@theme/Navbar';
 import Footer from '@theme/Footer';
 import LayoutProviders from '@theme/LayoutProviders';
 import ErrorPageContent from '@theme/ErrorPageContent';
-import './styles.css';
 import type {Props} from '@theme/Layout';
+import styles from './styles.module.css';
 
 export default function Layout(props: Props): JSX.Element {
   const {
@@ -41,7 +41,12 @@ export default function Layout(props: Props): JSX.Element {
 
       <Navbar />
 
-      <div className={clsx(ThemeClassNames.wrapper.main, wrapperClassName)}>
+      <div
+        className={clsx(
+          ThemeClassNames.wrapper.main,
+          styles.mainWrapper,
+          wrapperClassName,
+        )}>
         <ErrorBoundary fallback={(params) => <ErrorPageContent {...params} />}>
           {children}
         </ErrorBoundary>
diff --git a/packages/docusaurus-theme-classic/src/theme/Layout/styles.css b/packages/docusaurus-theme-classic/src/theme/Layout/styles.module.css
similarity index 70%
rename from packages/docusaurus-theme-classic/src/theme/Layout/styles.css
rename to packages/docusaurus-theme-classic/src/theme/Layout/styles.module.css
index aebd82668616..9f310a54e673 100644
--- a/packages/docusaurus-theme-classic/src/theme/Layout/styles.css
+++ b/packages/docusaurus-theme-classic/src/theme/Layout/styles.module.css
@@ -5,23 +5,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-html,
-body {
+:global(html, body) {
   height: 100%;
 }
 
-#__docusaurus {
-  min-height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.main-wrapper {
+.mainWrapper {
   flex: 1 0 auto;
 }
 
-/* Docusaurus-specific utility classes */
-
-.docusaurus-mt-lg {
+/* Docusaurus-specific utility class */
+:global(.docusaurus-mt-lg) {
   margin-top: 3rem;
 }
+
+:global(#__docusaurus) {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+}