@s-ui/bundler 9.67.0 → 9.69.0

package/README.md

@@ -151,6 +151,14 @@ $ sui-bundler lib src/index.js -o umd/fancy -p http://my-cdn.com/fancy --umd="My
 
 Then you can find your library directly in the provided namespace variable: `window.MyFancyLibraryNamespace` or `window.MyFancyLibraryNamespace.default` for ES6 exports.
 
+#### Use css chunks
+
+You can use `--chunk-css` option for creating different chunks for each css file
+
+```
+$ sui-bundler lib src/index.js -o umd/fancy -p http://my-cdn.com/fancy --chunk-css
+```
+
 ## Configuration
 
 This tool works with zero configuration out the box but you could use some configuration in order to optimize or adapt the output to your needs. For that, you need to add a property `sui-bundler` inside a `config` property in the package.json of your project.
@@ -227,6 +235,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/bin/sui-bundler-lib.js

@@ -17,6 +17,7 @@ program
   .option('-u, --umd [libraryName]', 'Whether to output library as umb')
   .option('-r, --root', 'Create build in root dir instead of version subdir')
   .option('-p, --path [path]', 'Absolute public path where files will be located.')
+  .option('--chunk-css', 'Bundle css in chunks')
   .on('--help', () =>
     console.log(`Examples:
       $ sui-bundler lib src/index.js -o umd/my-lib -p http://my-cdn.com/my-lib -C'
@@ -27,7 +28,7 @@ program
 
 const [entry] = program.args
 const options = program.opts()
-const {clean = false, output, umd = false, root = false} = options
+const {clean = false, output, umd = false, root = false, chunkCss = false} = options
 const publicPath = options.path
 
 if (!output) {
@@ -46,7 +47,7 @@ process.env.NODE_ENV = process.env.NODE_ENV || 'production'
 
 const version = getPackageJson(process.cwd()).version
 const outputFolder = path.join(process.cwd(), output, path.sep, root ? '' : version)
-const webpackConfig = {...config, entry: path.resolve(process.cwd(), entry)}
+const webpackConfig = {...config({chunkCss}), entry: path.resolve(process.cwd(), entry)}
 webpackConfig.output.publicPath = publicPath + (root ? '' : version + '/')
 webpackConfig.output.path = outputFolder
 

package/package.json

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

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

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

package/webpack.config.lib.js

@@ -9,55 +9,58 @@ const sassRules = require('./shared/module-rules-sass.js')
 const {extractComments, sourceMap, supportLegacyBrowsers} = require('./shared/config.js')
 const {aliasFromConfig} = require('./shared/resolve-alias.js')
 
-const cssFileName = 'styles.css'
-
-module.exports = {
-  mode: 'production',
-  resolve: {
-    alias: {
-      ...aliasFromConfig
+module.exports = ({chunkCss} = {}) => {
+  const chunkCssName = config.onlyHash ? '[contenthash:8].css' : '[name].[contenthash:8].css'
+  const cssFileName = chunkCss ? chunkCssName : 'styles.css'
+  return {
+    mode: 'production',
+    resolve: {
+      alias: {
+        ...aliasFromConfig
+      },
+      fallback: {
+        assert: false,
+        fs: false,
+        http: require.resolve('stream-http'),
+        https: require.resolve('https-browserify'),
+        path: false
+      },
+      extensions: ['.js', '.tsx', '.ts', '.json'],
+      modules: ['node_modules', path.resolve(process.cwd())]
+    },
+    entry: config.vendor
+      ? {
+          app: MAIN_ENTRY_POINT,
+          vendor: config.vendor
+        }
+      : MAIN_ENTRY_POINT,
+    target: 'web',
+    output: {
+      filename: 'index.js'
     },
-    fallback: {
-      assert: false,
-      fs: false,
-      http: require.resolve('stream-http'),
-      https: require.resolve('https-browserify'),
-      path: false
+    optimization: {
+      // avoid looping over all the modules after the compilation
+      checkWasmTypes: false,
+      minimize: true,
+      minimizer: [minifyJs({extractComments, sourceMap})]
     },
-    extensions: ['.js', '.tsx', '.ts', '.json'],
-    modules: ['node_modules', path.resolve(process.cwd())]
-  },
-  entry: config.vendor
-    ? {
-        app: MAIN_ENTRY_POINT,
-        vendor: config.vendor
-      }
-    : MAIN_ENTRY_POINT,
-  target: 'web',
-  output: {
-    filename: 'index.js'
-  },
-  optimization: {
-    // avoid looping over all the modules after the compilation
-    checkWasmTypes: false,
-    minimize: true,
-    minimizer: [minifyJs({extractComments, sourceMap})]
-  },
-  plugins: cleanList([
-    new webpack.ProvidePlugin({
-      process: 'process/browser.js'
-    }),
-    new MiniCssExtractPlugin({
-      filename: cssFileName,
-      chunkFilename: cssFileName
-    }),
-    new webpack.optimize.LimitChunkCountPlugin({
-      maxChunks: 1
-    }),
-    new webpack.EnvironmentPlugin(envVars(config.env)),
-    definePlugin()
-  ]),
-  module: {
-    rules: [createCompilerRules({supportLegacyBrowsers}), sassRules]
+    plugins: cleanList([
+      new webpack.ProvidePlugin({
+        process: 'process/browser.js'
+      }),
+      new MiniCssExtractPlugin({
+        filename: cssFileName,
+        chunkFilename: cssFileName
+      }),
+      !chunkCss &&
+        new webpack.optimize.LimitChunkCountPlugin({
+          maxChunks: 1
+        }),
+      new webpack.EnvironmentPlugin(envVars(config.env)),
+      definePlugin()
+    ]),
+    module: {
+      rules: [createCompilerRules({supportLegacyBrowsers}), sassRules]
+    }
   }
 }

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([