feat: 🎸 Added support for svgs

seznam · Sep 5, 2021 · 97c18d4 · 97c18d4
1 parent 7553bc3
commit 97c18d4
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 7 deletions.
diff --git a/packages/cli/sync.sh → packages/cli/copy.sh b/packages/cli/sync.sh → packages/cli/copy.sh
diff --git a/packages/cli/package-lock.json b/packages/cli/package-lock.json
diff --git 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
@@ -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
     })
   };
 };