@s-ui/bundler 9.27.0 → 9.30.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@s-ui/bundler",
-  "version": "9.27.0",
+  "version": "9.30.0",
   "description": "Config-free bundler for ES6 React apps.",
   "bin": {
     "sui-bundler": "./bin/sui-bundler.js"
@@ -21,7 +21,7 @@
   },
   "homepage": "https://github.com/SUI-Components/sui/tree/master/packages/sui-bundler#readme",
   "dependencies": {
-    "@babel/core": "7.18.2",
+    "@babel/core": "7.18.5",
     "@s-ui/helpers": "1",
     "@s-ui/sass-loader": "1",
     "address": "1.2.0",
@@ -32,13 +32,13 @@
     "commander": "8.3.0",
     "css-loader": "6.7.1",
     "css-minimizer-webpack-plugin": "4.0.0",
-    "esbuild": "0.14.43",
+    "esbuild": "0.14.46",
     "escape-string-regexp": "4.0.0",
     "fast-glob": "3.2.11",
     "find-free-ports": "3.0.0",
     "html-webpack-plugin": "5.5.0",
     "https-browserify": "1.0.0",
-    "mini-css-extract-plugin": "2.6.0",
+    "mini-css-extract-plugin": "2.6.1",
     "postcss": "8.4.14",
     "postcss-loader": "7.0.0",
     "process": "0.11.10",

package/shared/module-rules-sass.js

@@ -0,0 +1,30 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+
+const {cleanList, config, when} = require('./index')
+
+module.exports = {
+  test: /(\.css|\.scss)$/,
+  use: cleanList([
+    MiniCssExtractPlugin.loader,
+    require.resolve('css-loader'),
+    when(config['externals-manifest'], () => ({
+      loader: 'externals-manifest-loader',
+      options: {
+        manifestURL: config['externals-manifest']
+      }
+    })),
+    {
+      loader: require.resolve('postcss-loader'),
+      options: {
+        postcssOptions: {
+          plugins: [
+            require('autoprefixer')({
+              overrideBrowserslist: config.targets
+            })
+          ]
+        }
+      }
+    },
+    require.resolve('@s-ui/sass-loader')
+  ])
+}

package/utils/webpackHotDevClient.js

@@ -94,7 +94,7 @@ function handleWarnings(warnings) {
   function printWarnings() {
     // Print warnings to the console.
     const formatted = formatWebpackMessages({
-      warnings: warnings,
+      warnings,
       errors: []
     })
 
@@ -129,7 +129,7 @@ function handleErrors(errors) {
 
   // "Massage" webpack messages.
   const formatted = formatWebpackMessages({
-    errors: errors,
+    errors,
     warnings: []
   })
 

package/webpack.config.lib.js

@@ -1,4 +1,5 @@
 const webpack = require('webpack')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const {
   cleanList,
   envVars,
@@ -9,9 +10,12 @@ const path = require('path')
 const minifyJs = require('./shared/minify-js.js')
 const definePlugin = require('./shared/define.js')
 const babelRules = require('./shared/module-rules-babel.js')
+const sassRules = require('./shared/module-rules-sass.js')
 const {extractComments, sourceMap} = require('./shared/config.js')
 const {aliasFromConfig} = require('./shared/resolve-alias.js')
 
+const cssFileName = 'styles.css'
+
 module.exports = {
   mode: 'production',
   resolve: {
@@ -48,6 +52,10 @@ module.exports = {
     new webpack.ProvidePlugin({
       process: 'process/browser'
     }),
+    new MiniCssExtractPlugin({
+      filename: cssFileName,
+      chunkFilename: cssFileName
+    }),
     new webpack.optimize.LimitChunkCountPlugin({
       maxChunks: 1
     }),
@@ -55,6 +63,6 @@ module.exports = {
     definePlugin()
   ]),
   module: {
-    rules: [babelRules]
+    rules: [babelRules, sassRules]
   }
 }

package/webpack.config.prod.js

@@ -24,6 +24,7 @@ const {
 } = require('./shared/config.js')
 const {resolveLoader} = require('./shared/resolve-loader.js')
 const babelRules = require('./shared/module-rules-babel.js')
+const sassRules = require('./shared/module-rules-sass.js')
 const definePlugin = require('./shared/define.js')
 const manifestLoaderRules = require('./shared/module-rules-manifest-loader.js')
 const minifyCss = require('./shared/minify-css.js')
@@ -109,32 +110,7 @@ const webpackConfig = {
   module: {
     rules: cleanList([
       babelRules,
-      {
-        test: /(\.css|\.scss)$/,
-        use: cleanList([
-          MiniCssExtractPlugin.loader,
-          require.resolve('css-loader'),
-          when(config['externals-manifest'], () => ({
-            loader: 'externals-manifest-loader',
-            options: {
-              manifestURL: config['externals-manifest']
-            }
-          })),
-          {
-            loader: require.resolve('postcss-loader'),
-            options: {
-              postcssOptions: {
-                plugins: [
-                  require('autoprefixer')({
-                    overrideBrowserslist: config.targets
-                  })
-                ]
-              }
-            }
-          },
-          require.resolve('@s-ui/sass-loader')
-        ])
-      },
+      sassRules,
       when(config['externals-manifest'], () =>
         manifestLoaderRules(config['externals-manifest'])
       )