From 5944226eb49d3b787f630a5a40318d2d0f543f59 Mon Sep 17 00:00:00 2001
From: Apurva Ojas <6194485+apurvaojas@users.noreply.github.com>
Date: Tue, 29 Dec 2020 19:17:57 +0530
Subject: [PATCH] fix(v2): fix svg loader for CSS files (#3965)

* bug(v2): fix svg loader for styles re #3964

* ensure we only use SVGR loader in source code that can use React (ie not in CSS files)

* fix test

Co-authored-by: slorber <lorber.sebastien@gmail.com>
---
 .../src/webpack/__tests__/utils.test.ts       |  4 +--
 packages/docusaurus/src/webpack/utils.ts      | 32 +++++++++++++------
 2 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/packages/docusaurus/src/webpack/__tests__/utils.test.ts b/packages/docusaurus/src/webpack/__tests__/utils.test.ts
index f4922e6ada..16385d022a 100644
--- a/packages/docusaurus/src/webpack/__tests__/utils.test.ts
+++ b/packages/docusaurus/src/webpack/__tests__/utils.test.ts
@@ -135,8 +135,8 @@ describe('extending generated webpack config', () => {
 
 describe('getFileLoaderUtils()', () => {
   test('plugin svgo/removeViewBox should be disabled', () => {
-    const {use} = getFileLoaderUtils().rules.svg();
-    expect(use).toContainEqual(
+    const {oneOf} = getFileLoaderUtils().rules.svg();
+    expect(oneOf[0].use).toContainEqual(
       expect.objectContaining({
         loader: '@svgr/webpack',
         options: expect.objectContaining({
diff --git a/packages/docusaurus/src/webpack/utils.ts b/packages/docusaurus/src/webpack/utils.ts
index fbd1fe852c..d55a3084be 100644
--- a/packages/docusaurus/src/webpack/utils.ts
+++ b/packages/docusaurus/src/webpack/utils.ts
@@ -300,21 +300,33 @@ export function getFileLoaderUtils(): Record<string, any> {
 
     svg: (): RuleSetRule => {
       return {
-        use: [
+        test: /\.svg?$/,
+        oneOf: [
           {
-            loader: '@svgr/webpack',
-            options: {
-              prettier: false,
-              svgo: true,
-              svgoConfig: {
-                plugins: [{removeViewBox: false}],
+            use: [
+              {
+                loader: '@svgr/webpack',
+                options: {
+                  prettier: false,
+                  svgo: true,
+                  svgoConfig: {
+                    plugins: [{removeViewBox: false}],
+                  },
+                  titleProp: true,
+                  ref: ![path],
+                },
               },
-              titleProp: true,
-              ref: ![path],
+            ],
+            // 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: {
+              test: /\.(ts|tsx|js|jsx|md|mdx)$/,
             },
           },
+          {
+            use: [loaders.url({folder: 'images'})],
+          },
         ],
-        test: /\.svg$/,
       };
     },