Merge pull request #1851 from SUI-Components/sui-bundler-creat-chunks-css-flag

Create --chunks-css flag

Author: carlosvillu

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.
 
+#### 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.

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
 

packages/sui-bundler/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]
+    }
   }
 }