From cef717ea4df1e44dcdcaddd79e48e3e81d62ba62 Mon Sep 17 00:00:00 2001 From: sebastienlorber Date: Fri, 24 Jun 2022 15:53:45 +0200 Subject: [PATCH 1/2] theme prevent relative imports --- .eslintrc.js | 44 ++++++++++++------- .../src/theme/BlogTagsListPage/index.tsx | 2 +- 2 files changed, 30 insertions(+), 16 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 42e5e054f282..5cfbd42f5eb9 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,27 @@ 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( + // Also prevents relative imports between React theme components + ['../**', './**', '!./*.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(); From c26c3cf7528a975f41960871373f3d5ed3101102 Mon Sep 17 00:00:00 2001 From: sebastienlorber Date: Fri, 24 Jun 2022 16:09:30 +0200 Subject: [PATCH 2/2] ensure consistent ./styles.module.css import --- .eslintrc.js | 9 ++++++-- .../src/theme/Layout/index.tsx | 9 ++++++-- .../Layout/{styles.css => styles.module.css} | 22 +++++++++---------- 3 files changed, 24 insertions(+), 16 deletions(-) rename packages/docusaurus-theme-classic/src/theme/Layout/{styles.css => styles.module.css} (70%) diff --git a/.eslintrc.js b/.eslintrc.js index 5cfbd42f5eb9..91c98e113543 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -401,8 +401,13 @@ module.exports = { 'error', { patterns: ClientRestrictedImportPatterns.concat( - // Also prevents relative imports between React theme components - ['../**', './**', '!./*.css'], + // 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/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 { -
+
}> {children} 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; +}