From 97c18d423e590c2964ce4906502f6df1e4c22ce8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20=C5=A0ime=C4=8Dek?= <simecekjann@gmail.com>
Date: Sun, 5 Sep 2021 20:25:26 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Added=20support=20for=20?=
 =?UTF-8?q?svgs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/cli/{sync.sh => copy.sh} |  0
 packages/cli/package-lock.json    | 34 +++++++++++++++++++++++++++
 packages/cli/package.json         |  2 ++
 packages/cli/webpack/config.js    | 38 +++++++++++++++++++++++++------
 4 files changed, 67 insertions(+), 7 deletions(-)
 rename packages/cli/{sync.sh => copy.sh} (100%)

diff --git a/packages/cli/sync.sh b/packages/cli/copy.sh
similarity index 100%
rename from packages/cli/sync.sh
rename to packages/cli/copy.sh
diff --git a/packages/cli/package-lock.json b/packages/cli/package-lock.json
index 72228e68df..164d1b34a2 100644
--- a/packages/cli/package-lock.json
+++ b/packages/cli/package-lock.json
@@ -3906,6 +3906,11 @@
         }
       }
     },
+    "mini-svg-data-uri": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.3.3.tgz",
+      "integrity": "sha512-+fA2oRcR1dJI/7ITmeQJDrYWks0wodlOz0pAEhKYJ2IVc1z0AnwJUsKY2fzFmPAM3Jo9J0rBx8JAA9QQSJ5PuA=="
+    },
     "minimatch": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
@@ -9051,6 +9056,35 @@
         }
       }
     },
+    "svgo-loader": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/svgo-loader/-/svgo-loader-3.0.0.tgz",
+      "integrity": "sha512-gwyFuzTxZ8hEWYKQ9GodudSKRHzW8CUqgdfsdNpu1U5Keow5dPIgxT4DoHUEVXQRolefgSCeBtW3y12CyhIGxw==",
+      "requires": {
+        "loader-utils": "^1.0.3",
+        "svgo": "^2.2.0"
+      },
+      "dependencies": {
+        "json5": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "loader-utils": {
+          "version": "1.4.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
+          "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^1.0.1"
+          }
+        }
+      }
+    },
     "tapable": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.0.tgz",
diff --git a/packages/cli/package.json b/packages/cli/package.json
index edd90efd30..acd7ca628d 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -45,6 +45,7 @@
     "less": "^4.1.1",
     "less-loader": "^9.0.0",
     "mini-css-extract-plugin": "^1.6.0",
+    "mini-svg-data-uri": "^1.3.3",
     "npm": "^7.21.1",
     "null-loader": "^4.0.1",
     "postcss": "^8.3.4",
@@ -54,6 +55,7 @@
     "postcss-preset-env": "^6.7.0",
     "react-refresh": "^0.10.0",
     "source-map-loader": "^3.0.0",
+    "svgo-loader": "^3.0.0",
     "webpack": "^5.38.1",
     "webpack-dev-middleware": "^5.0.0",
     "webpack-hot-middleware": "^2.25.0",
diff --git a/packages/cli/webpack/config.js b/packages/cli/webpack/config.js
index 2cd5378abc..4b2974a16a 100644
--- a/packages/cli/webpack/config.js
+++ b/packages/cli/webpack/config.js
@@ -2,6 +2,7 @@ const path = require('path');
 const fs = require('fs');
 const webpack = require('webpack');
 const postcss = require('postcss');
+const miniSVGDataURI = require('mini-svg-data-uri');
 
 const CopyPlugin = require('copy-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
@@ -93,8 +94,7 @@ module.exports = async (args, imaConfig) => {
         // Handle node_modules packages that contain sourcemaps
         {
           enforce: 'pre',
-          exclude: /@babel(?:\/|\\{1,2})runtime/,
-          test: /\.(js|mjs|jsx|ts|tsx|css)$/,
+          test: /\.(js|mjs|jsx|ts|tsx|cjs|css)$/,
           use: 'source-map-loader'
         },
         {
@@ -130,8 +130,30 @@ module.exports = async (args, imaConfig) => {
                 }
               ]
             },
+            /**
+             * Uses svgo to optimize loaded svg files. Inline and external logic
+             * using the queryParam in import path applies here the same as with
+             * the image assets. Inline SVGs are converted to more efficient data URI.
+             * Defaults to external
+             */
+            {
+              test: /\.svg$/,
+              oneOf: [
+                {
+                  resourceQuery: /inline/, // foo.svg?inline
+                  type: 'asset/inline',
+                  generator: {
+                    dataUrl: content => miniSVGDataURI(content.toString())
+                  }
+                },
+                {
+                  type: 'asset/resource'
+                }
+              ],
+              use: 'svgo-loader'
+            },
             {
-              test: /\.[jt]sx?$/,
+              test: /\.(js|mjs|jsx|ts|tsx|cjs)$/,
               exclude: /node_modules/,
               use: [
                 // {
@@ -253,7 +275,12 @@ module.exports = async (args, imaConfig) => {
                   ]
             },
             {
-              exclude: [/^$/, /\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
+              exclude: [
+                /^$/,
+                /\.(js|mjs|jsx|ts|tsx|cjs)$/,
+                /\.html$/,
+                /\.json$/
+              ],
               type: 'asset/resource'
             }
           ]
@@ -343,9 +370,6 @@ module.exports = async (args, imaConfig) => {
       externalsPresets: {
         node: true
       }
-    }),
-    ...wif(isServer)({
-      node: false
     })
   };
 };