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 {