@s-ui/bundler 9.30.1-beta.0 → 9.32.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@s-ui/bundler",
-  "version": "9.30.1-beta.0",
+  "version": "9.32.0",
   "description": "Config-free bundler for ES6 React apps.",
   "bin": {
     "sui-bundler": "./bin/sui-bundler.js"
@@ -21,25 +21,26 @@
   },
   "homepage": "https://github.com/SUI-Components/sui/tree/master/packages/sui-bundler#readme",
   "dependencies": {
-    "@babel/core": "7.18.5",
-    "@parcel/css": "1.11.0",
+    "@babel/core": "7.18.9",
     "@s-ui/helpers": "1",
     "@s-ui/sass-loader": "1",
     "address": "1.2.0",
+    "autoprefixer": "10.4.7",
     "babel-loader": "8.2.5",
     "babel-preset-sui": "3",
     "buffer": "6.0.3",
     "commander": "8.3.0",
     "css-loader": "6.7.1",
     "css-minimizer-webpack-plugin": "4.0.0",
-    "esbuild": "0.14.46",
+    "esbuild": "0.14.49",
     "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.1",
-    "parcel-css-loader": "1.0.7",
+    "postcss": "8.4.14",
+    "postcss-loader": "7.0.1",
     "process": "0.11.10",
     "sass": "1.52.3",
     "stream-http": "3.2.0",
@@ -47,7 +48,7 @@
     "style-loader": "3.3.1",
     "url": "0.11.0",
     "webpack": "5.73.0",
-    "webpack-dev-server": "4.9.2",
+    "webpack-dev-server": "4.9.3",
     "webpack-manifest-plugin": "5.0.0",
     "webpack-node-externals": "3.0.0"
   }

package/shared/index.js

@@ -1,4 +1,4 @@
-const {config} = require('./config')
+const {config} = require('./config.js')
 
 exports.MAIN_ENTRY_POINT = './app.js'
 exports.config = config

package/shared/minify-css.js

@@ -1,5 +1,15 @@
-const {ParcelCssMinifyPlugin} = require('parcel-css-loader')
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
 
-const createCssMinimizerPlugin = () => new ParcelCssMinifyPlugin()
+const createCssMinimizerPlugin = () =>
+  new CssMinimizerPlugin({
+    minimizerOptions: {
+      preset: [
+        'default',
+        {
+          discardComments: {removeAll: true}
+        }
+      ]
+    }
+  })
 
 module.exports = () => createCssMinimizerPlugin()

package/shared/module-rules-babel.js

@@ -1,9 +1,13 @@
-const {sep} = require('path')
-const {config} = require('./')
+const path = require('path')
+const {config} = require('./index.js')
 
-module.exports = {
+const EXCLUDED_FOLDERS_REGEXP = new RegExp(
+  `node_modules(?!${path.sep}@s-ui(${path.sep}studio)(${path.sep}workbench)?${path.sep}src)`
+)
+
+module.exports = ({isServer = false, supportLegacyBrowsers = false} = {}) => ({
   test: /\.jsx?$/,
-  exclude: new RegExp(`node_modules(?!${sep}@s-ui${sep}studio${sep}src)`),
+  exclude: EXCLUDED_FOLDERS_REGEXP,
   use: [
     {
       loader: require.resolve('babel-loader'),
@@ -16,6 +20,8 @@ module.exports = {
           [
             require.resolve('babel-preset-sui'),
             {
+              isServer,
+              supportLegacyBrowsers,
               targets: config.targets
             }
           ]
@@ -23,4 +29,4 @@ module.exports = {
       }
     }
   ]
-}
+})

package/shared/module-rules-sass.js

@@ -1,7 +1,6 @@
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-const parcelCSS = require('@parcel/css')
 
-const {cleanList, config, when} = require('./index.js')
+const {cleanList, config, when} = require('./index')
 
 module.exports = {
   test: /(\.css|\.scss)$/,
@@ -14,7 +13,18 @@ module.exports = {
         manifestURL: config['externals-manifest']
       }
     })),
-    [require.resolve('parcel-css-loader'), {implementation: parcelCSS}],
+    {
+      loader: require.resolve('postcss-loader'),
+      options: {
+        postcssOptions: {
+          plugins: [
+            require('autoprefixer')({
+              overrideBrowserslist: config.targets
+            })
+          ]
+        }
+      }
+    },
     require.resolve('@s-ui/sass-loader')
   ])
 }

package/webpack.config.dev.js

@@ -3,7 +3,6 @@
 const path = require('path')
 const webpack = require('webpack')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
-const parcelCSS = require('@parcel/css')
 
 const {
   envVars,
@@ -17,10 +16,8 @@ const manifestLoaderRules = require('./shared/module-rules-manifest-loader.js')
 const {aliasFromConfig, defaultAlias} = require('./shared/resolve-alias.js')
 
 const {resolveLoader} = require('./shared/resolve-loader.js')
+const createBabelRules = require('./shared/module-rules-babel.js')
 
-const EXCLUDED_FOLDERS_REGEXP = new RegExp(
-  `node_modules(?!${path.sep}@s-ui(${path.sep}studio)(${path.sep}workbench)?${path.sep}src)`
-)
 const outputPath = path.join(process.cwd(), 'dist')
 
 const {CI = false, PWD = ''} = process.env
@@ -82,20 +79,7 @@ const webpackConfig = {
   resolveLoader,
   module: {
     rules: cleanList([
-      {
-        test: /\.jsx?$/,
-        exclude: EXCLUDED_FOLDERS_REGEXP,
-        use: [
-          {
-            loader: require.resolve('babel-loader'),
-            options: {
-              babelrc: false,
-              cacheDirectory: true,
-              presets: [require.resolve('babel-preset-sui')]
-            }
-          }
-        ]
-      },
+      createBabelRules(),
       {
         test: /(\.css|\.scss)$/,
         use: cleanList([
@@ -107,7 +91,18 @@ const webpackConfig = {
             }
           })),
           require.resolve('css-loader'),
-          [require.resolve('parcel-css-loader'), {implementation: parcelCSS}],
+          {
+            loader: require.resolve('postcss-loader'),
+            options: {
+              postcssOptions: {
+                plugins: [
+                  require('autoprefixer')({
+                    overrideBrowserslist: config.targets
+                  })
+                ]
+              }
+            }
+          },
           require.resolve('@s-ui/sass-loader')
         ])
       },

package/webpack.config.lib.js

@@ -9,7 +9,7 @@ const {
 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 createBabelRules = 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')
@@ -63,6 +63,6 @@ module.exports = {
     definePlugin()
   ]),
   module: {
-    rules: [babelRules, sassRules]
+    rules: [createBabelRules(), sassRules]
   }
 }

package/webpack.config.prod.js

@@ -23,14 +23,16 @@ const {
   supportLegacyBrowsers
 } = require('./shared/config.js')
 const {resolveLoader} = require('./shared/resolve-loader.js')
-const babelRules = require('./shared/module-rules-babel.js')
+const createBabelRules = 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')
 const minifyJs = require('./shared/minify-js.js')
 
+const CWD = process.cwd()
 const PUBLIC_PATH = process.env.CDN || config.cdn || '/'
+const PWD = process.env.PWD ?? ''
 
 const filename = config.onlyHash
   ? '[contenthash:8].js'
@@ -49,11 +51,11 @@ const webpackConfig = {
   devtool: sourceMap,
   mode: 'production',
   target,
-  context: path.resolve(process.cwd(), 'src'),
+  context: path.resolve(CWD, 'src'),
   resolve: {
     alias: {...aliasFromConfig},
     extensions: ['.js', '.json'],
-    modules: ['node_modules', path.resolve(process.cwd())],
+    modules: ['node_modules', path.resolve(CWD)],
     fallback: {
       assert: false,
       fs: false,
@@ -66,7 +68,7 @@ const webpackConfig = {
   output: {
     chunkFilename: filename,
     filename,
-    path: path.resolve(process.env.PWD, 'public'),
+    path: path.resolve(PWD, 'public'),
     publicPath: PUBLIC_PATH
   },
   optimization: {
@@ -109,7 +111,7 @@ const webpackConfig = {
   ]),
   module: {
     rules: cleanList([
-      babelRules,
+      createBabelRules({supportLegacyBrowsers}),
       sassRules,
       when(config['externals-manifest'], () =>
         manifestLoaderRules(config['externals-manifest'])

package/webpack.config.server.js

@@ -3,7 +3,7 @@ const webpackNodeExternals = require('webpack-node-externals')
 const path = require('path')
 
 const {config, when, cleanList} = require('./shared/index.js')
-const babelRules = require('./shared/module-rules-babel.js')
+const createBabelRules = require('./shared/module-rules-babel.js')
 const manifestLoaderRules = require('./shared/module-rules-manifest-loader.js')
 const {aliasFromConfig} = require('./shared/resolve-alias.js')
 const {resolveLoader} = require('./shared/resolve-loader.js')
@@ -39,7 +39,7 @@ const webpackConfig = {
   resolveLoader,
   module: {
     rules: cleanList([
-      babelRules,
+      createBabelRules({isServer: true}),
       {
         // ignore css/scss/svg require/imports files in the server
         test: /(\.svg|\.s?css)$/,