@docusaurus/plugin-svgr 3.7.0 → 3.8.0

package/lib/index.js

@@ -13,11 +13,7 @@ function pluginSVGR(_context, options) {
     return {
         name: 'docusaurus-plugin-svgr',
         configureWebpack: (config, isServer) => {
-            return {
-                module: {
-                    rules: [(0, svgrLoader_1.createLoader)({ isServer, svgrConfig: options.svgrConfig })],
-                },
-            };
+            (0, svgrLoader_1.enhanceConfig)(config, { isServer, svgrConfig: options.svgrConfig });
         },
     };
 }

package/lib/svgrLoader.d.ts

@@ -5,10 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 import type { SVGRConfig } from './options';
-import type { RuleSetRule } from 'webpack';
+import type { Configuration } from 'webpack';
 type Params = {
     isServer: boolean;
     svgrConfig: SVGRConfig;
 };
-export declare function createLoader(params: Params): RuleSetRule;
+export declare function enhanceConfig(config: Configuration, params: Params): void;
 export {};

package/lib/svgrLoader.js

@@ -6,7 +6,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createLoader = createLoader;
+exports.enhanceConfig = enhanceConfig;
 const utils_1 = require("@docusaurus/utils");
 // TODO Docusaurus v4: change these defaults?
 //  see https://github.com/facebook/docusaurus/issues/8297
@@ -31,7 +31,7 @@ const DefaultSVGRConfig = {
     svgoConfig: DefaultSVGOConfig,
     titleProp: true,
 };
-function createSVGRLoader(params) {
+function createSVGRRule(params) {
     const options = {
         ...DefaultSVGRConfig,
         ...params.svgrConfig,
@@ -41,22 +41,34 @@ function createSVGRLoader(params) {
         options,
     };
 }
-function createLoader(params) {
+function enhanceConfig(config, params) {
     const utils = (0, utils_1.getFileLoaderUtils)(params.isServer);
-    return {
+    const rules = config?.module?.rules;
+    const existingSvgRule = (() => {
+        const rule = rules.find((r) => String(r.test) === String(utils.rules.svgs().test));
+        if (!rule) {
+            throw new Error("Docusaurus built-in SVG rule couldn't be found. The SVGR plugin can't enhance it.");
+        }
+        return rule;
+    })();
+    const newSvgRule = {
         test: /\.svg$/i,
         oneOf: [
             {
-                use: [createSVGRLoader(params)],
+                use: [createSVGRRule(params)],
                 // We don't want to use SVGR loader for non-React source code
                 // ie we don't want to use SVGR for CSS files...
                 issuer: {
                     and: [/\.(?:tsx?|jsx?|mdx?)$/i],
                 },
             },
-            {
-                use: [utils.loaders.url({ folder: 'images' })],
-            },
+            existingSvgRule,
         ],
     };
+    // This is annoying, but we have to "wrap" the existing SVG rule
+    // Adding another extra SVG rule (first or last) will not "override"
+    // the default: both rules will be applied (from last to bottom) leading to
+    // conflicting behavior.
+    const index = rules.indexOf(existingSvgRule);
+    rules[index] = newSvgRule;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/plugin-svgr",
-  "version": "3.7.0",
+  "version": "3.8.0",
   "description": "SVGR plugin for Docusaurus.",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -18,10 +18,10 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@docusaurus/core": "3.7.0",
-    "@docusaurus/types": "3.7.0",
-    "@docusaurus/utils": "3.7.0",
-    "@docusaurus/utils-validation": "3.7.0",
+    "@docusaurus/core": "3.8.0",
+    "@docusaurus/types": "3.8.0",
+    "@docusaurus/utils": "3.8.0",
+    "@docusaurus/utils-validation": "3.8.0",
     "@svgr/core": "8.1.0",
     "@svgr/webpack": "^8.1.0",
     "tslib": "^2.6.0",
@@ -34,5 +34,5 @@
   "engines": {
     "node": ">=18.0"
   },
-  "gitHead": "dd59750c16fe6908a26f18806a54d4c3dbe6db43"
+  "gitHead": "948d63c42fad0ba24b7b531a9deb6167e64dc845"
 }

package/src/index.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {createLoader} from './svgrLoader';
+import {enhanceConfig} from './svgrLoader';
 import type {LoadContext, Plugin} from '@docusaurus/types';
 import type {PluginOptions, Options} from './options';
 
@@ -16,11 +16,7 @@ export default function pluginSVGR(
   return {
     name: 'docusaurus-plugin-svgr',
     configureWebpack: (config, isServer) => {
-      return {
-        module: {
-          rules: [createLoader({isServer, svgrConfig: options.svgrConfig})],
-        },
-      };
+      enhanceConfig(config, {isServer, svgrConfig: options.svgrConfig});
     },
   };
 }

package/src/svgrLoader.ts

@@ -8,7 +8,7 @@
 import {getFileLoaderUtils} from '@docusaurus/utils';
 
 import type {SVGRConfig, SVGOConfig} from './options';
-import type {RuleSetRule} from 'webpack';
+import type {Configuration, RuleSetRule} from 'webpack';
 
 // TODO Docusaurus v4: change these defaults?
 //  see https://github.com/facebook/docusaurus/issues/8297
@@ -37,7 +37,7 @@ const DefaultSVGRConfig: SVGRConfig = {
 
 type Params = {isServer: boolean; svgrConfig: SVGRConfig};
 
-function createSVGRLoader(params: Params): RuleSetRule {
+function createSVGRRule(params: Params): RuleSetRule {
   const options: SVGRConfig = {
     ...DefaultSVGRConfig,
     ...params.svgrConfig,
@@ -48,22 +48,42 @@ function createSVGRLoader(params: Params): RuleSetRule {
   };
 }
 
-export function createLoader(params: Params): RuleSetRule {
+export function enhanceConfig(config: Configuration, params: Params): void {
   const utils = getFileLoaderUtils(params.isServer);
-  return {
+
+  const rules = config?.module?.rules as RuleSetRule[];
+
+  const existingSvgRule: RuleSetRule = (() => {
+    const rule = rules.find(
+      (r) => String(r.test) === String(utils.rules.svgs().test),
+    );
+    if (!rule) {
+      throw new Error(
+        "Docusaurus built-in SVG rule couldn't be found. The SVGR plugin can't enhance it.",
+      );
+    }
+    return rule;
+  })();
+
+  const newSvgRule: RuleSetRule = {
     test: /\.svg$/i,
     oneOf: [
       {
-        use: [createSVGRLoader(params)],
+        use: [createSVGRRule(params)],
         // We don't want to use SVGR loader for non-React source code
         // ie we don't want to use SVGR for CSS files...
         issuer: {
           and: [/\.(?:tsx?|jsx?|mdx?)$/i],
         },
       },
-      {
-        use: [utils.loaders.url({folder: 'images'})],
-      },
+      existingSvgRule,
     ],
   };
+
+  // This is annoying, but we have to "wrap" the existing SVG rule
+  // Adding another extra SVG rule (first or last) will not "override"
+  // the default: both rules will be applied (from last to bottom) leading to
+  // conflicting behavior.
+  const index = rules.indexOf(existingSvgRule);
+  rules[index] = newSvgRule;
 }