@s-ui/bundler 7.36.0-beta.0 → 8.0.0-beta.1

package/README.md

@@ -1,4 +1,4 @@
-# sui-bunder
+# sui-bundler
 
 > Config-free bundler for ES6 React apps.
 
@@ -186,8 +186,7 @@ This tool works with zero configuration out the box but you could use some confi
       },
       "optimizations": {
         "splitFrameworkOnChunk": true,
-        "useExperimentalMinifier": true,
-        "useExperimentalSCSSLoader": true
+        "useExperimentalMinifier": true
       }
     }
   }
@@ -323,10 +322,12 @@ You could tweak the performance of your bundle generation by using some flags pr
 
 `useExperimentalMinifier` (default: `false`): Use `esbuild-loader` to minify JavaScript and CSS instead using `terser` and `css-minimizer-webpack-plugin` in order to boost build time and memory usage.
 
-`useExperimentalSCSSLoader` (default: `false`): Use [fast-sass-loader](https://github.com/yibn2008/fast-sass-loader) (currently a fork of it [super-sass-loader](https://github.com/andresz1/super-sass-loader)) instead of `sass-loader` (available in development only)
-
 ## Migrations
 
+### Migrate from v7 to v8
+
+`useExperimentalSCSSLoader` is not used anymore and it will be ignored.
+
 ### Migrate from v6 to v7
 
 - In order to keep same config object across all `sui` tools, `sui-bundler` config has been moved from package.json root to the `config` property.

package/bin/sui-bundler-build.js

@@ -66,13 +66,14 @@ webpack(nextConfig).run(async (error, stats) => {
 
   if (stats.hasErrors()) {
     const jsonStats = stats.toJson('errors-only')
-    return jsonStats.errors.map(log.error)
+    return jsonStats.errors.map(({message}) => log.error(message))
   }
 
   if (stats.hasWarnings()) {
     const jsonStats = stats.toJson('errors-warnings')
     log.warn('Webpack generated the following warnings: ')
-    jsonStats.warnings.map(log.warn)
+    log.warn(jsonStats.warnings)
+    jsonStats.warnings.map(({message}) => log.warn(message))
   }
 
   console.log(`Webpack stats: ${stats}`)

package/loaders/linkLoaderConfigBuilder.js

@@ -6,9 +6,6 @@ const log = require('../shared/log')
 const {defaultAlias} = require('../shared/resolve-alias')
 const createSassLinkImporter = require('./sassLinkImporter.js')
 
-const useExperimentalSCSSLoader =
-  config.optimizations && config.optimizations.useExperimentalSCSSLoader
-
 const diccFromAbsolutePaths = (paths, init = {}) =>
   paths.reduce((acc, pkg) => {
     const packagePath = path.resolve(pkg)
@@ -64,14 +61,12 @@ module.exports = ({config, packagesToLink, linkAll}) => {
   }
 
   /**
-   * Create a sass-loader config for scss files that
+   * Create a @s-ui/sass-loader config for scss files that
    * are handled by Sass. These are nested modules imported
    * and thus is sass binary which needs a special config for them.
    */
   const sassLoaderWithLinkImporter = {
-    loader: useExperimentalSCSSLoader
-      ? require.resolve('super-sass-loader')
-      : require.resolve('sass-loader'),
+    loader: require.resolve('@s-ui/sass-loader'),
     options: {
       sassOptions: {
         importer: createSassLinkImporter(entryPoints)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@s-ui/bundler",
-  "version": "7.36.0-beta.0",
+  "version": "8.0.0-beta.1",
   "description": "Config-free bundler for ES6 React apps.",
   "bin": {
     "sui-bundler": "./bin/sui-bundler.js"
@@ -23,24 +23,24 @@
   "dependencies": {
     "@babel/core": "7.16.0",
     "@s-ui/helpers": "1",
+    "@s-ui/sass-loader": "1",
     "autoprefixer": "10.4.0",
     "babel-loader": "8.2.3",
     "babel-preset-sui": "3",
     "commander": "6.2.1",
-    "css-loader": "6.5.0",
+    "css-loader": "6.5.1",
     "css-minimizer-webpack-plugin": "3.1.1",
     "esbuild-loader": "2.16.0",
     "fast-glob": "3.2.7",
     "html-webpack-plugin": "5.5.0",
-    "mini-css-extract-plugin": "2.4.3",
+    "mini-css-extract-plugin": "2.4.4",
     "null-loader": "4.0.1",
+    "process": "0.11.10",
     "postcss": "8.3.11",
     "postcss-loader": "6.2.0",
     "react-dev-utils": "11.0.4",
     "rimraf": "3.0.2",
     "sass": "1.43.4",
-    "sass-loader": "12.3.0",
-    "super-sass-loader": "0.1",
     "speed-measure-webpack-plugin": "1.5.0",
     "style-loader": "3.3.1",
     "terser-webpack-plugin": "5.2.4",

package/shared/config.js

@@ -10,4 +10,4 @@ exports.config = config
 exports.useExperimentalMinifier =
   config.optimizations && config.optimizations.useExperimentalMinifier
 exports.extractComments = extractComments || false
-exports.sourceMap = (sourcemaps && sourcemaps.prod) || 'none'
+exports.sourceMap = (sourcemaps && sourcemaps.prod) || false

package/webpack.config.dev.js

@@ -4,6 +4,7 @@ const path = require('path')
 const webpack = require('webpack')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')
+
 const definePlugin = require('./shared/define')
 const manifestLoaderRules = require('./shared/module-rules-manifest-loader')
 const {aliasFromConfig, defaultAlias} = require('./shared/resolve-alias')
@@ -11,10 +12,11 @@ const {envVars, MAIN_ENTRY_POINT, config, cleanList, when} = require('./shared')
 const {resolveLoader} = require('./shared/resolve-loader')
 
 const EXCLUDED_FOLDERS_REGEXP = new RegExp(
-  `node_modules(?!${path.sep}@s-ui(${path.sep}svg|${path.sep}studio)(${path.sep}workbench)?${path.sep}src)`
+  `node_modules(?!${path.sep}@s-ui(${path.sep}studio)(${path.sep}workbench)?${path.sep}src)`
 )
-const useExperimentalSCSSLoader =
-  config.optimizations && config.optimizations.useExperimentalSCSSLoader
+const outputPath = path.join(process.cwd(), 'dist')
+
+process.env.NODE_ENV = 'development'
 
 const smp = new SpeedMeasurePlugin()
 
@@ -29,8 +31,11 @@ const webpackConfig = {
       ...defaultAlias,
       ...aliasFromConfig
     },
-    extensions: ['.js', '.json'],
-    modules: ['node_modules', path.resolve(process.cwd())]
+    fallback: {
+      fs: false
+    },
+    modules: ['node_modules', path.resolve(process.cwd())],
+    extensions: ['.js', '.json']
   },
   stats: 'errors-only',
   entry: cleanList([
@@ -38,19 +43,22 @@ const webpackConfig = {
     MAIN_ENTRY_POINT
   ]),
   target: 'web',
-  node: {fs: 'empty'},
   optimization: {
-    noEmitOnErrors: true,
+    emitOnErrors: false,
     removeAvailableModules: false,
     removeEmptyChunks: false,
     runtimeChunk: true,
     splitChunks: false
   },
   output: {
+    path: outputPath,
     pathinfo: false,
     publicPath: '/'
   },
   plugins: [
+    new webpack.ProvidePlugin({
+      process: 'process/browser'
+    }),
     new webpack.EnvironmentPlugin(envVars(config.env)),
     definePlugin({__DEV__: true}),
     new HtmlWebpackPlugin({
@@ -99,9 +107,7 @@ const webpackConfig = {
               }
             }
           },
-          useExperimentalSCSSLoader
-            ? require.resolve('super-sass-loader')
-            : require.resolve('sass-loader')
+          require.resolve('@s-ui/sass-loader')
         ])
       },
       when(config['externals-manifest'], () =>
@@ -109,8 +115,9 @@ const webpackConfig = {
       )
     ])
   },
+  watch: true,
   devtool:
-    config.sourcemaps && config.sourcemaps.dev ? config.sourcemaps.dev : 'none'
+    config.sourcemaps && config.sourcemaps.dev ? config.sourcemaps.dev : false
 }
 
 module.exports = config.measure ? smp.wrap(webpackConfig) : webpackConfig

package/webpack.config.prod.js

@@ -53,13 +53,7 @@ const webpackConfig = {
     extensions: ['.js', '.json'],
     modules: ['node_modules', path.resolve(process.cwd())]
   },
-  entry: config.vendor
-    ? {
-        app: MAIN_ENTRY_POINT,
-        vendor: config.vendor
-      }
-    : MAIN_ENTRY_POINT,
-  target: 'web',
+  entry: MAIN_ENTRY_POINT,
   output: {
     chunkFilename: filename,
     filename,
@@ -75,7 +69,7 @@ const webpackConfig = {
     runtimeChunk: true
   },
   plugins: cleanList([
-    new webpack.HashedModuleIdsPlugin(),
+    new webpack.ids.HashedModuleIdsPlugin(),
     new webpack.EnvironmentPlugin(envVars(config.env)),
     definePlugin(),
     new MiniCssExtractPlugin({
@@ -127,7 +121,7 @@ const webpackConfig = {
               }
             }
           },
-          require.resolve('sass-loader')
+          require.resolve('@s-ui/sass-loader')
         ])
       },
       when(config['externals-manifest'], () =>
@@ -135,12 +129,7 @@ const webpackConfig = {
       )
     ])
   },
-  resolveLoader,
-  node: {
-    fs: 'empty',
-    net: 'empty',
-    tls: 'empty'
-  }
+  resolveLoader
 }
 
 module.exports = config.measure ? smp.wrap(webpackConfig) : webpackConfig