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>
facebook · Dec 29, 2020 · 5944226 · 5944226
1 parent e5610a4
commit 5944226
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 12 deletions.
diff --git 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
@@ -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$/,
       };
     },