@s-ui/bundler 9.79.0-beta.1 → 9.79.0-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@s-ui/bundler",
-  "version": "9.79.0-beta.1",
+  "version": "9.79.0-beta.3",
   "description": "Config-free bundler for ES6 React apps.",
   "bin": {
     "sui-bundler": "./bin/sui-bundler.js"

package/shared/plain-css-split-chunks.js

@@ -1,25 +1,49 @@
 const {config} = require('./index')
 
-const plainCssPackages = config.plainCssPackages || []
+const cssInAppStyles = config.cssInAppStyles || []
 
 exports.plainCssSplitChunks = () => {
-  if (!plainCssPackages.length) return {}
-
-  const testRegex = new RegExp(
-    `[\\\\/]node_modules[\\\\/](${plainCssPackages.map(p => p.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|')})[\\\\/]`
-  )
+  if (!cssInAppStyles.length) return {}
 
   return {
-    splitChunks: {
-      cacheGroups: {
-        plainCssInEntry: {
-          type: 'css/mini-extract',
-          test: testRegex,
-          name: 'AppStyles',
-          chunks: 'all',
-          enforce: true
+    plugins: [
+      {
+        apply(compiler) {
+          const pkgPattern = cssInAppStyles.map(p => p.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|')
+          const pkgRegex = new RegExp(`[\\\\/]node_modules[\\\\/](${pkgPattern})[\\\\/]`)
+
+          compiler.hooks.thisCompilation.tap('CssInAppStyles', compilation => {
+            compilation.hooks.afterOptimizeChunks.tap('CssInAppStyles', chunks => {
+              let appStylesChunk = null
+              for (const chunk of chunks) {
+                if (chunk.name === 'AppStyles') {
+                  appStylesChunk = chunk
+                  break
+                }
+              }
+              if (!appStylesChunk) return
+
+              for (const chunk of chunks) {
+                if (chunk === appStylesChunk) continue
+                const modulesToMove = []
+                for (const module of compilation.chunkGraph.getChunkModulesIterable(chunk)) {
+                  if (module.type !== 'css/mini-extract') continue
+                  const name = module.nameForCondition && module.nameForCondition()
+                  if (name && pkgRegex.test(name)) {
+                    modulesToMove.push(module)
+                  }
+                }
+                for (const module of modulesToMove) {
+                  compilation.chunkGraph.disconnectChunkAndModule(chunk, module)
+                  if (!compilation.chunkGraph.isModuleInChunk(module, appStylesChunk)) {
+                    compilation.chunkGraph.connectChunkAndModule(appStylesChunk, module)
+                  }
+                }
+              }
+            })
+          })
         }
       }
-    }
+    ]
   }
 }

package/webpack.config.prod.js

@@ -66,8 +66,7 @@ const webpackConfig = {
     checkWasmTypes: false,
     minimize: true,
     minimizer: [minifyJs({extractComments, sourceMap}), minifyCss()].filter(Boolean),
-    runtimeChunk: true,
-    ...plainCssSplitChunks()
+    runtimeChunk: true
   },
   cache: {
     type: 'filesystem',
@@ -75,6 +74,7 @@ const webpackConfig = {
     compression: false
   },
   plugins: cleanList([
+    ...plainCssSplitChunks().plugins || [],
     new webpack.ProvidePlugin({
       process: 'process/browser.js'
     }),