chore: prevent importing theme components with relative paths (facebook#7674)

Author: slorber

.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',
+              ],
+            ),
           },
         ],
       },

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();

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>

packages/docusaurus-theme-classic/src/theme/Layout/styles.css renamed to 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;
+}