From c18ca58092cca64e4eff22c53ccfd4fef07af9b0 Mon Sep 17 00:00:00 2001 From: "david.nieto" Date: Thu, 14 Mar 2024 16:05:06 +0100 Subject: [PATCH 1/5] feat(packages/sui-bundler): add flag for creating libs with css chunks --- packages/sui-bundler/bin/sui-bundler-lib.js | 5 +- packages/sui-bundler/webpack.config.lib.js | 110 +++++++++++--------- 2 files changed, 65 insertions(+), 50 deletions(-) diff --git a/packages/sui-bundler/bin/sui-bundler-lib.js b/packages/sui-bundler/bin/sui-bundler-lib.js index a0a9f8ae9..773133df9 100755 --- a/packages/sui-bundler/bin/sui-bundler-lib.js +++ b/packages/sui-bundler/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 diff --git a/packages/sui-bundler/webpack.config.lib.js b/packages/sui-bundler/webpack.config.lib.js index e8d8d846c..322d21140 100644 --- a/packages/sui-bundler/webpack.config.lib.js +++ b/packages/sui-bundler/webpack.config.lib.js @@ -1,6 +1,11 @@ const webpack = require('webpack') const MiniCssExtractPlugin = require('mini-css-extract-plugin') -const {cleanList, envVars, MAIN_ENTRY_POINT, config} = require('./shared/index.js') +const { + cleanList, + envVars, + MAIN_ENTRY_POINT, + config +} = require('./shared/index.js') const path = require('path') const minifyJs = require('./shared/minify-js.js') const definePlugin = require('./shared/define.js') @@ -9,55 +14,64 @@ 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' +const CWD = process.cwd() +const PUBLIC_PATH = process.env.CDN || config.cdn || '/' +const PWD = process.env.PWD ?? '' -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', + context: path.resolve(CWD, 'src'), + resolve: { + alias: { + ...aliasFromConfig + }, + fallback: { + assert: false, + fs: false, + http: require.resolve('stream-http'), + https: require.resolve('https-browserify'), + path: false + }, + extensions: ['.js', '.json'], + modules: ['node_modules', path.resolve(process.cwd())] }, - fallback: { - assert: false, - fs: false, - http: require.resolve('stream-http'), - https: require.resolve('https-browserify'), - path: false - }, - extensions: ['.js', '.json'], - modules: ['node_modules', path.resolve(process.cwd())] - }, - entry: config.vendor - ? { + 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' - }), - new MiniCssExtractPlugin({ - filename: cssFileName, - chunkFilename: cssFileName - }), - new webpack.optimize.LimitChunkCountPlugin({ - maxChunks: 1 - }), - new webpack.EnvironmentPlugin(envVars(config.env)), - definePlugin() - ]), - module: { - rules: [createBabelRules({supportLegacyBrowsers}), sassRules] + } : + 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' + }), + new MiniCssExtractPlugin({ + filename: cssFileName, + chunkFilename: cssFileName + }), + !chunkCss && new webpack.optimize.LimitChunkCountPlugin({ + maxChunks: 1 + }), + new webpack.EnvironmentPlugin(envVars(config.env)), + definePlugin() + ]), + module: { + rules: [createBabelRules({supportLegacyBrowsers}), sassRules] + } } -} +} \ No newline at end of file From bf11deeee5862cf534c38d69e99a5cc1331a474b Mon Sep 17 00:00:00 2001 From: "david.nieto" Date: Thu, 14 Mar 2024 17:17:55 +0100 Subject: [PATCH 2/5] refactor(packages/sui-bundler): lint --- packages/sui-bundler/webpack.config.lib.js | 48 +++++++++++----------- 1 file changed, 25 insertions(+), 23 deletions(-) diff --git a/packages/sui-bundler/webpack.config.lib.js b/packages/sui-bundler/webpack.config.lib.js index 322d21140..5c519e4c5 100644 --- a/packages/sui-bundler/webpack.config.lib.js +++ b/packages/sui-bundler/webpack.config.lib.js @@ -1,11 +1,6 @@ const webpack = require('webpack') const MiniCssExtractPlugin = require('mini-css-extract-plugin') -const { - cleanList, - envVars, - MAIN_ENTRY_POINT, - config -} = require('./shared/index.js') +const {cleanList, envVars, MAIN_ENTRY_POINT, config} = require('./shared/index.js') const path = require('path') const minifyJs = require('./shared/minify-js.js') const definePlugin = require('./shared/define.js') @@ -15,12 +10,8 @@ const {extractComments, sourceMap, supportLegacyBrowsers} = require('./shared/co const {aliasFromConfig} = require('./shared/resolve-alias.js') const CWD = process.cwd() -const PUBLIC_PATH = process.env.CDN || config.cdn || '/' -const PWD = process.env.PWD ?? '' -module.exports = ({ - chunkCss -} = {}) => { +module.exports = ({chunkCss} = {}) => { const chunkCssName = config.onlyHash ? '[contenthash:8].css' : '[name].[contenthash:8].css' const cssFileName = chunkCss ? chunkCssName : 'styles.css' return { @@ -40,12 +31,12 @@ module.exports = ({ extensions: ['.js', '.json'], modules: ['node_modules', path.resolve(process.cwd())] }, - entry: config.vendor ? - { - app: MAIN_ENTRY_POINT, - vendor: config.vendor - } : - MAIN_ENTRY_POINT, + entry: config.vendor + ? { + app: MAIN_ENTRY_POINT, + vendor: config.vendor + } + : MAIN_ENTRY_POINT, target: 'web', output: { filename: 'index.js' @@ -54,7 +45,12 @@ module.exports = ({ // avoid looping over all the modules after the compilation checkWasmTypes: false, minimize: true, - minimizer: [minifyJs({extractComments, sourceMap})] + minimizer: [ + minifyJs({ + extractComments, + sourceMap + }) + ] }, plugins: cleanList([ new webpack.ProvidePlugin({ @@ -64,14 +60,20 @@ module.exports = ({ filename: cssFileName, chunkFilename: cssFileName }), - !chunkCss && new webpack.optimize.LimitChunkCountPlugin({ - maxChunks: 1 - }), + !chunkCss && + new webpack.optimize.LimitChunkCountPlugin({ + maxChunks: 1 + }), new webpack.EnvironmentPlugin(envVars(config.env)), definePlugin() ]), module: { - rules: [createBabelRules({supportLegacyBrowsers}), sassRules] + rules: [ + createBabelRules({ + supportLegacyBrowsers + }), + sassRules + ] } } -} \ No newline at end of file +} From 55a0749d10186ffb1b1c9f954710a596f32f14db Mon Sep 17 00:00:00 2001 From: "david.nieto" Date: Thu, 14 Mar 2024 17:35:03 +0100 Subject: [PATCH 3/5] feat(packages/sui-bundler): remove context --- packages/sui-bundler/webpack.config.lib.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/sui-bundler/webpack.config.lib.js b/packages/sui-bundler/webpack.config.lib.js index 5c519e4c5..df15681ce 100644 --- a/packages/sui-bundler/webpack.config.lib.js +++ b/packages/sui-bundler/webpack.config.lib.js @@ -9,14 +9,11 @@ const sassRules = require('./shared/module-rules-sass.js') const {extractComments, sourceMap, supportLegacyBrowsers} = require('./shared/config.js') const {aliasFromConfig} = require('./shared/resolve-alias.js') -const CWD = process.cwd() - module.exports = ({chunkCss} = {}) => { const chunkCssName = config.onlyHash ? '[contenthash:8].css' : '[name].[contenthash:8].css' const cssFileName = chunkCss ? chunkCssName : 'styles.css' return { mode: 'production', - context: path.resolve(CWD, 'src'), resolve: { alias: { ...aliasFromConfig From 28e1a788a380dc7029aad4d07fc33dfe5d58b0f8 Mon Sep 17 00:00:00 2001 From: "david.nieto" Date: Thu, 14 Mar 2024 17:40:30 +0100 Subject: [PATCH 4/5] docs(packages/sui-bundler): add chunk css readme --- packages/sui-bundler/README.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/sui-bundler/README.md b/packages/sui-bundler/README.md index d32bf8c9d..225e9270a 100644 --- a/packages/sui-bundler/README.md +++ b/packages/sui-bundler/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. +#### Split css files with + +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. From dc87bfc55611e622587a891444da2c237086f329 Mon Sep 17 00:00:00 2001 From: "david.nieto" Date: Fri, 15 Mar 2024 09:27:04 +0100 Subject: [PATCH 5/5] feat(packages/sui-bundler): update readme --- packages/sui-bundler/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/sui-bundler/README.md b/packages/sui-bundler/README.md index 225e9270a..27f6fc05b 100644 --- a/packages/sui-bundler/README.md +++ b/packages/sui-bundler/README.md @@ -151,7 +151,7 @@ $ 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. -#### Split css files with +#### Use css chunks You can use `--chunk-css` option for creating different chunks for each css file