@s-ui/bundler 9.66.0 → 9.68.0

package/README.md

@@ -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`).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@s-ui/bundler",
-  "version": "9.66.0",
+  "version": "9.68.0",
   "description": "Config-free bundler for ES6 React apps.",
   "bin": {
     "sui-bundler": "./bin/sui-bundler.js"
@@ -45,19 +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"
   }
 }

package/shared/index.js

@@ -1,3 +1,4 @@
+const fs = require('fs')
 const {config} = require('./config.js')
 
 exports.MAIN_ENTRY_POINT = './app'
@@ -7,6 +8,8 @@ exports.cleanList = list => list.filter(Boolean)
 
 exports.when = (check, getValue) => (check ? getValue() : false)
 
+exports.isTailwindEnabled = () => fs.existsSync(`${process.cwd()}/tailwind.config.js`)
+
 exports.envVars = (env = []) =>
   env.reduce(
     (acc, variable) => {

package/shared/module-rules-sass.js

@@ -1,6 +1,6 @@
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 
-const {cleanList, config, when} = require('./index')
+const {cleanList, config, when, isTailwindEnabled} = require('./index')
 
 module.exports = {
   test: /(\.css|\.scss)$/,
@@ -18,6 +18,7 @@ module.exports = {
       options: {
         postcssOptions: {
           plugins: [
+            ...(isTailwindEnabled() ? [require('tailwindcss')()] : []),
             require('autoprefixer')({
               overrideBrowserslist: config.targets
             })

package/shared/svg-spritemap.js

@@ -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

package/webpack.config.client.dev.js

@@ -9,9 +9,10 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const HtmlWebpackInjectAttributesPlugin = require('html-webpack-inject-attributes-plugin')
 const {withHydrationOverlayWebpack} = require('@builder.io/react-hydration-overlay/webpack')
 
-const {envVars, MAIN_ENTRY_POINT, config, cleanList, when} = require('./shared/index.js')
+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: {
@@ -110,6 +112,7 @@ const webpackConfig = {
             options: {
               postcssOptions: {
                 plugins: [
+                  ...(isTailwindEnabled() ? [require('tailwindcss')()] : []),
                   require('autoprefixer')({
                     overrideBrowserslist: config.targets
                   })

package/webpack.config.dev.js

@@ -5,7 +5,7 @@ const webpack = require('webpack')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
 
-const {envVars, MAIN_ENTRY_POINT, config, cleanList, when} = require('./shared/index.js')
+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 {aliasFromConfig, defaultAlias} = require('./shared/resolve-alias.js')
@@ -104,6 +104,7 @@ const webpackConfig = {
             options: {
               postcssOptions: {
                 plugins: [
+                  ...(isTailwindEnabled() ? [require('tailwindcss')()] : []),
                   require('autoprefixer')({
                     overrideBrowserslist: config.targets
                   })

package/webpack.config.prod.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([