Merge pull request #1849 from SUI-Components/feat/experimental-spritemaps

feat(packages/sui-bundler): add experimental spritemaps

Author: andresz1

package-lock.json

@@ -82,4 +82,4 @@
   "stylelint": {
     "extends": "./node_modules/@s-ui/lint/stylelint.config.js"
   }
-}
+}

package.json

@@ -227,6 +227,51 @@ There are two ways to activate the statics cache option:
 
 > Statics will be cached but no offline page will be activated
 
+### SVG Spritemaps
+
+Generate SVG spritemaps by using [svg-spritemap-webpack-plugin](https://github.com/cascornelissen/svg-spritemap-webpack-plugin) as follows:
+
+```json
+{
+  "sui-bundler": {
+    "spritemaps": [
+      {
+        "path": ["icons/src/fotocasa/**/*.svg"],
+        "options": {
+          "output": {
+            "filename": "fotocasa.[contenthash].svg",
+            "chunk": {
+              "name": "fotocasa"
+            }
+          },
+          "sprite": {
+            "generate": {
+              "title": false
+            }
+          }
+        }
+      },
+      {
+        "path": ["icons/src/habitaclia/**/*.svg"],
+        "options": {
+          "output": {
+            "filename": "habitaclia.[contenthash].svg",
+            "chunk": {
+              "name": "habitaclia"
+            }
+          },
+          "sprite": {
+            "generate": {
+              "title": false
+            }
+          }
+        }
+      }
+    ]
+  }
+}
+```
+
 ## Externals Manifest
 
 If your are using an external CDN to store statics assets that are now managed by Webpack, like SVG or IMGs, you can create a manifest.json file in the root of your CDN (likehttps://spa-mock-statics.surge.sh/manifest.json`).

packages/sui-bundler/README.md

@@ -45,20 +45,21 @@
     "html-webpack-plugin": "5.5.0",
     "https-browserify": "1.0.0",
     "mini-css-extract-plugin": "2.7.7",
-    "postcss-loader": "7.3.4",
     "postcss": "8.4.31",
+    "postcss-loader": "7.3.4",
     "process": "0.11.10",
     "react-refresh": "0.14.0",
     "sass": "1.54.5",
     "stream-http": "3.2.0",
     "strip-ansi": "6.0.1",
     "style-loader": "3.3.4",
+    "svg-spritemap-webpack-plugin": "4.6.0",
     "swc-loader": "0.2.6",
     "tailwindcss": "3.4.14",
     "url": "0.11.0",
+    "webpack": "5.82.1",
     "webpack-dev-server": "5.0.4",
     "webpack-manifest-plugin": "5.0.0",
-    "webpack-node-externals": "3.0.0",
-    "webpack": "5.82.1"
+    "webpack-node-externals": "3.0.0"
   }
 }

packages/sui-bundler/package.json

@@ -0,0 +1,12 @@
+const SVGSpritemapPlugin = require('svg-spritemap-webpack-plugin')
+const {config} = require('./config.js')
+
+const createSVGSpritemapPlugin = () => {
+  const {spritemaps = []} = config
+
+  return spritemaps.map(({path, options = {}}) => {
+    return new SVGSpritemapPlugin(path, options)
+  })
+}
+
+module.exports = createSVGSpritemapPlugin

packages/sui-bundler/shared/svg-spritemap.js

@@ -12,6 +12,7 @@ const {withHydrationOverlayWebpack} = require('@builder.io/react-hydration-overl
 const {envVars, MAIN_ENTRY_POINT, config, cleanList, when, isTailwindEnabled} = require('./shared/index.js')
 const definePlugin = require('./shared/define.js')
 const manifestLoaderRules = require('./shared/module-rules-manifest-loader.js')
+const createSVGSpritemapPlugin = require('./shared/svg-spritemap')
 const {aliasFromConfig, defaultAlias} = require('./shared/resolve-alias.js')
 const {supportLegacyBrowsers, cacheDirectory} = require('./shared/config.js')
 
@@ -88,7 +89,8 @@ const webpackConfig = {
     new ReactRefreshWebpackPlugin({overlay: false}),
     new HtmlWebpackInjectAttributesPlugin({
       crossorigin: 'anonymous'
-    })
+    }),
+    ...createSVGSpritemapPlugin()
   ],
   resolveLoader,
   module: {

packages/sui-bundler/webpack.config.client.dev.js

@@ -15,6 +15,7 @@ const {extractComments, sourceMap, supportLegacyBrowsers, cacheDirectory} = requ
 const {resolveLoader} = require('./shared/resolve-loader.js')
 const createCompilerRules = require('./shared/module-rules-compiler.js')
 const sassRules = require('./shared/module-rules-sass.js')
+const createSVGSpritemapPlugin = require('./shared/svg-spritemap')
 const definePlugin = require('./shared/define.js')
 const manifestLoaderRules = require('./shared/module-rules-manifest-loader.js')
 const minifyCss = require('./shared/minify-css.js')
@@ -100,7 +101,8 @@ const webpackConfig = {
       template: './index.html'
     }),
     new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime/]),
-    new WebpackManifestPlugin({fileName: 'asset-manifest.json'})
+    new WebpackManifestPlugin({fileName: 'asset-manifest.json'}),
+    ...createSVGSpritemapPlugin()
   ]),
   module: {
     rules: cleanList([