chore: load or create svgo.config.js

packages/docusaurus-plugin-content-docs/src/sidebars/index.ts

@@ -88,7 +88,7 @@ async function loadSidebarsFileUnsafe(
   }
 
   // We don't want sidebars to be cached because of hot reloading.
-  const module = await loadFreshModule(sidebarFilePath);
+  const module = loadFreshModule(sidebarFilePath);
 
   // TODO unsafe, need to refactor and improve validation
   return module as SidebarsConfig;

packages/docusaurus-utils/src/__tests__/moduleUtils.test.ts

@@ -131,7 +131,7 @@ describe('loadFreshModule', () => {
       );
 
       // Should be able to read the initial module graph
-      await expect(entryFile.load()).resolves.toEqual({
+      expect(entryFile.load()).toEqual({
         someEntryValue: 'entryVal',
         dependency1: {
           dep1Export: 'dep1 val1',
@@ -141,11 +141,11 @@ describe('loadFreshModule', () => {
           dep2Val: 'dep2 val',
         },
       });
-      await expect(dependency1.load()).resolves.toEqual({
+      expect(dependency1.load()).toEqual({
         dep1Export: 'dep1 val1',
         dep1Val: 'dep1 val2',
       });
-      await expect(dependency2.load()).resolves.toEqual({
+      expect(dependency2.load()).toEqual({
         dep2Val: 'dep2 val',
       });
 
@@ -158,7 +158,7 @@ describe('loadFreshModule', () => {
           export default {dep1Val: "dep1 val2 updated"}
         `,
       );
-      await expect(entryFile.load()).resolves.toEqual({
+      expect(entryFile.load()).toEqual({
         someEntryValue: 'entryVal',
         dependency1: {
           dep1Export: 'dep1 val1 updated',
@@ -168,11 +168,11 @@ describe('loadFreshModule', () => {
           dep2Val: 'dep2 val',
         },
       });
-      await expect(dependency1.load()).resolves.toEqual({
+      expect(dependency1.load()).toEqual({
         dep1Export: 'dep1 val1 updated',
         dep1Val: 'dep1 val2 updated',
       });
-      await expect(dependency2.load()).resolves.toEqual({
+      expect(dependency2.load()).toEqual({
         dep2Val: 'dep2 val',
       });
 
@@ -183,7 +183,7 @@ describe('loadFreshModule', () => {
           export default {dep2Val: "dep2 val updated"} satisfies {dep2Val: string}
         `,
       );
-      await expect(entryFile.load()).resolves.toEqual({
+      expect(entryFile.load()).toEqual({
         someEntryValue: 'entryVal',
         dependency1: {
           dep1Export: 'dep1 val1 updated',
@@ -193,11 +193,11 @@ describe('loadFreshModule', () => {
           dep2Val: 'dep2 val updated',
         },
       });
-      await expect(dependency1.load()).resolves.toEqual({
+      expect(dependency1.load()).toEqual({
         dep1Export: 'dep1 val1 updated',
         dep1Val: 'dep1 val2 updated',
       });
-      await expect(dependency2.load()).resolves.toEqual({
+      expect(dependency2.load()).toEqual({
         dep2Val: 'dep2 val updated',
       });
 
@@ -216,7 +216,7 @@ describe('loadFreshModule', () => {
         }
         `,
       );
-      await expect(entryFile.load()).resolves.toEqual({
+      expect(entryFile.load()).toEqual({
         someEntryValue: 'entryVal updated',
         newAttribute: 'is there',
         dependency1: {
@@ -227,60 +227,60 @@ describe('loadFreshModule', () => {
           dep2Val: 'dep2 val updated',
         },
       });
-      await expect(dependency1.load()).resolves.toEqual({
+      expect(dependency1.load()).toEqual({
         dep1Export: 'dep1 val1 updated',
         dep1Val: 'dep1 val2 updated',
       });
-      await expect(dependency2.load()).resolves.toEqual({
+      expect(dependency2.load()).toEqual({
         dep2Val: 'dep2 val updated',
       });
     });
   });
 
   describe('invalid module path param', () => {
     it('throws if module path does not exist', async () => {
-      await expect(() => loadFreshModule('/some/unknown/module/path.js'))
-        .rejects.toThrowErrorMatchingInlineSnapshot(`
+      expect(() => loadFreshModule('/some/unknown/module/path.js'))
+        .toThrowErrorMatchingInlineSnapshot(`
         "Docusaurus could not load module at path "/some/unknown/module/path.js"
         Cause: Cannot find module '/some/unknown/module/path.js' from 'packages/docusaurus-utils/src/moduleUtils.ts'"
       `);
     });
 
     it('throws if module path is undefined', async () => {
-      await expect(() =>
+      expect(() =>
         // @ts-expect-error: undefined is invalid
         loadFreshModule(undefined),
-      ).rejects.toThrowErrorMatchingInlineSnapshot(`
+      ).toThrowErrorMatchingInlineSnapshot(`
               "Docusaurus could not load module at path "undefined"
               Cause: Invalid module path of type undefined"
           `);
     });
 
     it('throws if module path is null', async () => {
-      await expect(() =>
+      expect(() =>
         // @ts-expect-error: null is invalid
         loadFreshModule(null),
-      ).rejects.toThrowErrorMatchingInlineSnapshot(`
+      ).toThrowErrorMatchingInlineSnapshot(`
               "Docusaurus could not load module at path "null"
               Cause: Invalid module path of type null"
           `);
     });
 
     it('throws if module path is number', async () => {
-      await expect(() =>
+      expect(() =>
         // @ts-expect-error: number is invalid
         loadFreshModule(42),
-      ).rejects.toThrowErrorMatchingInlineSnapshot(`
+      ).toThrowErrorMatchingInlineSnapshot(`
               "Docusaurus could not load module at path "42"
               Cause: Invalid module path of type 42"
           `);
     });
 
     it('throws if module path is object', async () => {
-      await expect(() =>
+      expect(() =>
         // @ts-expect-error: object is invalid
         loadFreshModule({}),
-      ).rejects.toThrowErrorMatchingInlineSnapshot(`
+      ).toThrowErrorMatchingInlineSnapshot(`
               "Docusaurus could not load module at path "[object Object]"
               Cause: Invalid module path of type [object Object]"
           `);

packages/docusaurus-utils/src/constants.ts

@@ -98,3 +98,27 @@ export const DEFAULT_PLUGIN_ID = 'default';
  */
 export const WEBPACK_URL_LOADER_LIMIT =
   process.env.WEBPACK_URL_LOADER_LIMIT ?? 10000;
+
+/**
+ * SVGO config file to tweak settings.
+ *
+ * @see https://github.com/svg/svgo?tab=readme-ov-file#configuration
+ */
+export const SVGO_CONFIG_FILE_NAME = 'svgo.config.js';
+
+/**
+ * Default SVGO config to use if not configured otherwise.
+ */
+export const SVGO_DEFAULT_CONFIG = {
+  plugins: [
+    {
+      name: 'preset-default',
+      params: {
+        overrides: {
+          removeTitle: false,
+          removeViewBox: false,
+        },
+      },
+    },
+  ],
+};

packages/docusaurus-utils/src/index.ts

@@ -22,6 +22,8 @@ export {
   DEFAULT_PORT,
   DEFAULT_PLUGIN_ID,
   WEBPACK_URL_LOADER_LIMIT,
+  SVGO_CONFIG_FILE_NAME,
+  SVGO_DEFAULT_CONFIG,
 } from './constants';
 export {generate, readOutputHTMLFile} from './emitUtils';
 export {

packages/docusaurus-utils/src/moduleUtils.ts

@@ -11,7 +11,7 @@ import logger from '@docusaurus/logger';
 /*
 jiti is able to load ESM, CJS, JSON, TS modules
  */
-export async function loadFreshModule(modulePath: string): Promise<unknown> {
+export function loadFreshModule(modulePath: string): unknown {
   try {
     if (typeof modulePath !== 'string') {
       throw new Error(

packages/docusaurus-utils/src/webpackUtils.ts

@@ -6,11 +6,16 @@
  */
 
 import path from 'path';
+import logger from '@docusaurus/logger';
 import {escapePath} from './pathUtils';
 import {
+  GENERATED_FILES_DIR_NAME,
   WEBPACK_URL_LOADER_LIMIT,
   OUTPUT_STATIC_ASSETS_DIR_NAME,
+  SVGO_CONFIG_FILE_NAME,
+  SVGO_DEFAULT_CONFIG,
 } from './constants';
+import {loadFreshModule} from './moduleUtils';
 import type {RuleSetRule, LoaderContext} from 'webpack';
 
 export type WebpackCompilerName = 'server' | 'client';
@@ -60,6 +65,18 @@ export function getFileLoaderUtils(): FileLoaderUtils {
   // the html
   const urlLoaderLimit = WEBPACK_URL_LOADER_LIMIT;
 
+  const svgoConfigPath = path.resolve(
+    GENERATED_FILES_DIR_NAME,
+    SVGO_CONFIG_FILE_NAME,
+  );
+  let svgoConfig;
+  try {
+    svgoConfig = loadFreshModule(svgoConfigPath);
+  } catch {
+    logger.interpolate`Docusaurus could not load SVGO config at path path=${svgoConfigPath}\nUsing default configuration`;
+    svgoConfig = SVGO_DEFAULT_CONFIG;
+  }
+
   const fileLoaderFileName = (folder: AssetFolder) =>
     path.posix.join(
       OUTPUT_STATIC_ASSETS_DIR_NAME,
@@ -135,19 +152,7 @@ export function getFileLoaderUtils(): FileLoaderUtils {
               options: {
                 prettier: false,
                 svgo: true,
-                svgoConfig: {
-                  plugins: [
-                    {
-                      name: 'preset-default',
-                      params: {
-                        overrides: {
-                          removeTitle: false,
-                          removeViewBox: false,
-                        },
-                      },
-                    },
-                  ],
-                },
+                svgoConfig,
                 titleProp: true,
                 ref: ![path],
               },

packages/docusaurus/src/server/codegen/codegen.ts

@@ -5,10 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import fs from 'fs-extra';
 import {
   generate,
   escapePath,
   DEFAULT_CONFIG_FILE_NAME,
+  SVGO_CONFIG_FILE_NAME,
+  SVGO_DEFAULT_CONFIG,
 } from '@docusaurus/utils';
 import {generateRouteFiles} from './codegenRoutes';
 import type {
@@ -146,6 +149,24 @@ function genSiteStorage({
   );
 }
 
+async function getSvgoConfig({generatedFilesDir}: {generatedFilesDir: string}) {
+  let svgoConfig;
+
+  if (await fs.pathExists(SVGO_CONFIG_FILE_NAME)) {
+    svgoConfig = await fs.readFile(SVGO_CONFIG_FILE_NAME, 'utf-8');
+  } else {
+    svgoConfig = `export default ${JSON.stringify(
+      {
+        SVGO_DEFAULT_CONFIG,
+      },
+      null,
+      2,
+    )}`;
+  }
+
+  return generate(generatedFilesDir, SVGO_CONFIG_FILE_NAME, svgoConfig);
+}
+
 type CodegenParams = {
   generatedFilesDir: string;
   siteConfig: DocusaurusConfig;
@@ -170,5 +191,6 @@ export async function generateSiteFiles(params: CodegenParams): Promise<void> {
     genSiteStorage(params),
     genI18n(params),
     genCodeTranslations(params),
+    getSvgoConfig(params),
   ]);
 }

packages/docusaurus/src/server/config.ts

@@ -49,7 +49,7 @@ export async function loadSiteConfig({
     throw new Error(`Config file at "${siteConfigPath}" not found.`);
   }
 
-  const importedConfig = await loadFreshModule(siteConfigPath);
+  const importedConfig = loadFreshModule(siteConfigPath);
 
   const loadedConfig: unknown =
     typeof importedConfig === 'function'

packages/docusaurus/src/server/plugins/configs.ts

@@ -61,9 +61,7 @@ async function normalizePluginConfig(
   if (typeof pluginConfig === 'string') {
     const pluginModuleImport = pluginConfig;
     const pluginPath = pluginRequire.resolve(pluginModuleImport);
-    const pluginModule = (await loadFreshModule(
-      pluginPath,
-    )) as ImportedPluginModule;
+    const pluginModule = loadFreshModule(pluginPath) as ImportedPluginModule;
     return {
       plugin: pluginModule.default ?? pluginModule,
       options: {},
@@ -90,9 +88,7 @@ async function normalizePluginConfig(
   if (typeof pluginConfig[0] === 'string') {
     const pluginModuleImport = pluginConfig[0];
     const pluginPath = pluginRequire.resolve(pluginModuleImport);
-    const pluginModule = (await loadFreshModule(
-      pluginPath,
-    )) as ImportedPluginModule;
+    const pluginModule = loadFreshModule(pluginPath) as ImportedPluginModule;
     return {
       plugin: pluginModule.default ?? pluginModule,
       options: pluginConfig[1],

packages/docusaurus/src/server/plugins/presets.ts

@@ -48,9 +48,7 @@ export async function loadPresets(
     );
 
     const presetPath = presetRequire.resolve(presetName);
-    const presetModule = (await loadFreshModule(
-      presetPath,
-    )) as ImportedPresetModule;
+    const presetModule = loadFreshModule(presetPath) as ImportedPresetModule;
 
     const presetFunction = presetModule.default ?? presetModule;
 

website/_dogfooding/_docs tests/tests/svgs.mdx

@@ -0,0 +1,15 @@
+import Logo from './vectors/logo.svg';
+import Hacker from './vectors/hacker.svg';
+import Integrations from './vectors/integrations.svg';
+import OpenSource from './vectors/open-source.svg';
+import Mascot from './vectors/mascot.svg';
+
+# Many inline SVGs
+
+Have a bunch of SVGs, they're written to intentionally override each others styled when inlined on the same page.
+
+<Logo height="20rem" />
+<Hacker height="20rem" />
+<Integrations height="20rem" />
+<OpenSource height="20rem" />
+<Mascot height="20rem" />