balm-core 4.5.4 → 4.5.5

package/index.d.ts

@@ -98,6 +98,7 @@ export interface BalmScripts {
   plugins: object[];
   injectHtml: boolean;
   htmlPluginOptions: object;
+  extractCss: boolean;
   sourceMap: string | boolean;
   target: string | string[] | false;
   externals: string | string[] | object | Function | RegExp;

package/lib/bootstrap/check_config.js

@@ -39,7 +39,6 @@ function checkConfig() {
 
   upgradeDeprecated('4.5.0', 'scripts', 'excludeUrlResource');
   upgradeDeprecated('4.5.0', 'scripts', 'urlLoaderOptions');
-  upgradeDeprecated('4.5.0', 'scripts', 'extractCss');
 }
 
 export default checkConfig;

package/lib/bundler/webpack/config/common.js

@@ -50,7 +50,7 @@ function getSplitChunks() {
     // All vendors
     const vendorsFilename = scripts.useCache ? `${scripts.vendorName}.${CHUNK.hash}.js` : `${scripts.vendorName}.js`;
     cacheGroups = {
-      defaultVendors: {
+      allVendors: {
         name: 'vendors',
         chunks: 'all',
         test: /[\\/](node_modules|bower_components)[\\/]/,
@@ -63,11 +63,11 @@ function getSplitChunks() {
     cacheGroups = {};
 
     for (const vendor of BalmJS.vendors) {
-      const cacheGroupKey = vendor.key;
+      const name = vendor.key;
       const cacheGroupModules = vendor.value.join('|');
-      const vendorFilename = scripts.useCache ? `${cacheGroupKey}.${CHUNK.hash}.js` : `${cacheGroupKey}.js`;
-      cacheGroups[cacheGroupKey] = {
-        name: cacheGroupKey,
+      const vendorFilename = scripts.useCache ? `${name}.${CHUNK.hash}.js` : `${name}.js`;
+      cacheGroups[`${name}Scripts`] = {
+        name,
         chunks: 'initial',
         test: new RegExp(`[\\\\/](${cacheGroupModules})[\\\\/].*(?<!\\.css)$`),
         filename: BalmJS.file.assetsPath(`${jsFolder}/${scripts.vendorName}/${vendorFilename}`),
@@ -75,19 +75,20 @@ function getSplitChunks() {
         enforce: true
       };
     }
-  } // if (BalmJS.config.env.isProd && BalmJS.config.scripts.extractCss) {
-  //   // Custom styles in scripts
-  //   for (const entry of BalmJS.entries) {
-  //     const name = entry.key;
-  //     cacheGroups[`${name}Styles`] = {
-  //       type: 'css/mini-extract',
-  //       name,
-  //       chunks: (chunk: { name: string }) => chunk.name === name,
-  //       enforce: true
-  //     };
-  //   }
-  // }
+  }
 
+  if (BalmJS.config.env.isProd && BalmJS.config.scripts.extractCss) {
+    // Custom styles in scripts
+    for (const entry of BalmJS.entries) {
+      const name = entry.key;
+      cacheGroups[`${name}Styles`] = {
+        type: 'css/mini-extract',
+        name,
+        chunks: chunk => chunk.name === name,
+        enforce: true
+      };
+    }
+  }
 
   return Object.keys(cacheGroups).length ? {
     cacheGroups

package/lib/bundler/webpack/config/prod.js

@@ -1,15 +1,17 @@
 import TerserPlugin from 'terser-webpack-plugin';
-// import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import webpackBundleAnalyzer from 'webpack-bundle-analyzer';
 import { merge } from 'webpack-merge';
-import getCommonConfig from './common.js'; // import { CHUNK } from '../../../config/constants.js';
-
+import getCommonConfig from './common.js';
+import { CHUNK } from '../../../config/constants.js';
 // Run the build command with an extra argument to
 // View the bundle analyzer report after build finishes:
 // `npm run prod --report`
 // Set to `true` or `false` to always turn it on or off
-const bundleAnalyzerReport = process.env.npm_config_report || false; // const getCssFilename = (): string =>
-//   `${BalmJS.config.paths.target.css}/${CHUNK.dir}/[name].${CHUNK.hash}.css`;
+const bundleAnalyzerReport = process.env.npm_config_report || false;
+
+const getCssFilename = () => `${BalmJS.config.paths.target.css}/${CHUNK.dir}/[name].${CHUNK.hash}.css`;
 
 function getProdConfig(webpack, scripts) {
   const shouldUseSourceMap = scripts.sourceMap;
@@ -25,21 +27,15 @@ function getProdConfig(webpack, scripts) {
       minimizer: [new TerserPlugin({
         terserOptions,
         extractComments: false
-      }) // new CssMinimizerPlugin()
-      ]
+      }), new CssMinimizerPlugin()]
     },
     plugins: [new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production')
     }), // Extract css into its own file
-    // ...(scripts.extractCss
-    //   ? [
-    //       new MiniCssExtractPlugin({
-    //         filename: BalmJS.file.assetsPath(getCssFilename()),
-    //         chunkFilename: BalmJS.file.assetsPath(getCssFilename())
-    //       })
-    //     ]
-    //   : []),
-    // View the bundle analyzer report
+    ...(scripts.extractCss ? [new MiniCssExtractPlugin({
+      filename: BalmJS.file.assetsPath(getCssFilename()),
+      chunkFilename: BalmJS.file.assetsPath(getCssFilename())
+    })] : []), // View the bundle analyzer report
     ...(bundleAnalyzerReport ? [new webpackBundleAnalyzer.BundleAnalyzerPlugin()] : [])],
     devtool: shouldUseSourceMap ? 'source-map' : false
   });

package/lib/bundler/webpack/rules/css.js

@@ -1,4 +1,4 @@
-// import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import { cssRegex, cssModuleRegex, sassRegex, sassModuleRegex } from '../config/regex.js';
 
 // common function to get style loaders
@@ -6,15 +6,12 @@ function getStyleLoaders(styleLoader, cssOptions, preProcessor = '', sassOptions
   const {
     sourceMap
   } = cssOptions;
-  const loaders = [// BalmJS.config.env.isProd && BalmJS.config.scripts.extractCss
-  //   ? {
-  //       loader: MiniCssExtractPlugin.loader,
-  //       options: {
-  //         esModule: BalmJS.config.scripts.useEsModule
-  //       }
-  //     }
-  //   : styleLoader,
-  styleLoader, {
+  const loaders = [BalmJS.config.env.isProd && BalmJS.config.scripts.extractCss ? {
+    loader: MiniCssExtractPlugin.loader,
+    options: {
+      esModule: BalmJS.config.scripts.useEsModule
+    }
+  } : styleLoader, {
     loader: requireModule.resolve('css-loader'),
     options: cssOptions
   }, {

package/lib/config/globals.js

@@ -6,7 +6,7 @@ import through2 from 'through2';
 import PluginError from 'plugin-error'; // Set env var for ORIGINAL cwd before anything touches it
 
 process.env.BALM_CWD = process.env.INIT_CWD || process.cwd();
-const gulpModule = path.join(process.env.BALM || process.env.BALM_CWD, 'node_modules', 'gulp', 'index.js');
+const gulpModule = path.join(process.env.BALM_ROOT || process.env.BALM_CWD, 'node_modules', 'gulp', 'index.js');
 
 if (fs.existsSync(gulpModule)) {
   // Chdir before requiring balm config to make sure

package/lib/config/scripts.js

@@ -80,8 +80,8 @@ const alias = {}; // Plugins
 
 const plugins = [];
 const injectHtml = false;
-const htmlPluginOptions = {}; // const extractCss = false;
-// Devtool
+const htmlPluginOptions = {};
+const extractCss = false; // Devtool
 
 const sourceMap = false; // Target
 
@@ -152,7 +152,7 @@ export default {
   plugins,
   injectHtml,
   htmlPluginOptions,
-  // extractCss,
+  extractCss,
   sourceMap,
   target,
   externals,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "balm-core",
-  "version": "4.5.4",
+  "version": "4.5.5",
   "description": "BalmJS compiler core",
   "keywords": [
     "balm",
@@ -69,6 +69,7 @@
     "imagemin": "^8.0.1",
     "istextorbinary": "^6.0.0",
     "less": "^4.1.2",
+    "mini-css-extract-plugin": "2.5.2",
     "modernizr": "^3.12.0",
     "parents": "^1.0.1",
     "plugin-error": "^1.0.1",
@@ -117,5 +118,5 @@
   "engines": {
     "node": ">=12.13.0"
   },
-  "gitHead": "d2febf04626afb74e03159a62d279ac6bd630461"
+  "gitHead": "182ee55022c6194293195631a91a14bd22cacace"
 }

package/tslib/bootstrap/check_config.js

@@ -30,6 +30,5 @@ function checkConfig() {
     upgradeDeprecated('3.19.0', 'scripts', 'useCache');
     upgradeDeprecated('4.5.0', 'scripts', 'excludeUrlResource');
     upgradeDeprecated('4.5.0', 'scripts', 'urlLoaderOptions');
-    upgradeDeprecated('4.5.0', 'scripts', 'extractCss');
 }
 export default checkConfig;

package/tslib/bundler/webpack/config/common.js

@@ -41,7 +41,7 @@ function getSplitChunks() {
             ? `${scripts.vendorName}.${CHUNK.hash}.js`
             : `${scripts.vendorName}.js`;
         cacheGroups = {
-            defaultVendors: {
+            allVendors: {
                 name: 'vendors',
                 chunks: 'all',
                 test: /[\\/](node_modules|bower_components)[\\/]/,
@@ -52,13 +52,13 @@ function getSplitChunks() {
     else if (BalmJS.vendors.length) {
         cacheGroups = {};
         for (const vendor of BalmJS.vendors) {
-            const cacheGroupKey = vendor.key;
+            const name = vendor.key;
             const cacheGroupModules = vendor.value.join('|');
             const vendorFilename = scripts.useCache
-                ? `${cacheGroupKey}.${CHUNK.hash}.js`
-                : `${cacheGroupKey}.js`;
-            cacheGroups[cacheGroupKey] = {
-                name: cacheGroupKey,
+                ? `${name}.${CHUNK.hash}.js`
+                : `${name}.js`;
+            cacheGroups[`${name}Scripts`] = {
+                name,
                 chunks: 'initial',
                 test: new RegExp(`[\\\\/](${cacheGroupModules})[\\\\/].*(?<!\\.css)$`),
                 filename: BalmJS.file.assetsPath(`${jsFolder}/${scripts.vendorName}/${vendorFilename}`),
@@ -66,6 +66,17 @@ function getSplitChunks() {
             };
         }
     }
+    if (BalmJS.config.env.isProd && BalmJS.config.scripts.extractCss) {
+        for (const entry of BalmJS.entries) {
+            const name = entry.key;
+            cacheGroups[`${name}Styles`] = {
+                type: 'css/mini-extract',
+                name,
+                chunks: (chunk) => chunk.name === name,
+                enforce: true
+            };
+        }
+    }
     return Object.keys(cacheGroups).length ? { cacheGroups } : false;
 }
 function getCommonConfig(webpack, scripts) {

package/tslib/bundler/webpack/config/prod.js

@@ -1,8 +1,12 @@
 import TerserPlugin from 'terser-webpack-plugin';
+import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import webpackBundleAnalyzer from 'webpack-bundle-analyzer';
 import { merge } from 'webpack-merge';
 import getCommonConfig from './common.js';
+import { CHUNK } from '../../../config/constants.js';
 const bundleAnalyzerReport = process.env.npm_config_report || false;
+const getCssFilename = () => `${BalmJS.config.paths.target.css}/${CHUNK.dir}/[name].${CHUNK.hash}.css`;
 function getProdConfig(webpack, scripts) {
     const shouldUseSourceMap = scripts.sourceMap;
     const terserOptions = scripts.minifyOptions;
@@ -16,13 +20,22 @@ function getProdConfig(webpack, scripts) {
                 new TerserPlugin({
                     terserOptions,
                     extractComments: false
-                })
+                }),
+                new CssMinimizerPlugin()
             ]
         },
         plugins: [
             new webpack.DefinePlugin({
                 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production')
             }),
+            ...(scripts.extractCss
+                ? [
+                    new MiniCssExtractPlugin({
+                        filename: BalmJS.file.assetsPath(getCssFilename()),
+                        chunkFilename: BalmJS.file.assetsPath(getCssFilename())
+                    })
+                ]
+                : []),
             ...(bundleAnalyzerReport
                 ? [new webpackBundleAnalyzer.BundleAnalyzerPlugin()]
                 : [])

package/tslib/bundler/webpack/rules/css.js

@@ -1,8 +1,16 @@
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import { cssRegex, cssModuleRegex, sassRegex, sassModuleRegex } from '../config/regex.js';
 function getStyleLoaders(styleLoader, cssOptions, preProcessor = '', sassOptions = {}) {
     const { sourceMap } = cssOptions;
     const loaders = [
-        styleLoader,
+        BalmJS.config.env.isProd && BalmJS.config.scripts.extractCss
+            ? {
+                loader: MiniCssExtractPlugin.loader,
+                options: {
+                    esModule: BalmJS.config.scripts.useEsModule
+                }
+            }
+            : styleLoader,
         {
             loader: requireModule.resolve('css-loader'),
             options: cssOptions

package/tslib/config/globals.js

@@ -5,7 +5,7 @@ import { create } from 'browser-sync';
 import through2 from 'through2';
 import PluginError from 'plugin-error';
 process.env.BALM_CWD = process.env.INIT_CWD || process.cwd();
-const gulpModule = path.join(process.env.BALM || process.env.BALM_CWD, 'node_modules', 'gulp', 'index.js');
+const gulpModule = path.join(process.env.BALM_ROOT || process.env.BALM_CWD, 'node_modules', 'gulp', 'index.js');
 if (fs.existsSync(gulpModule)) {
     if (process.cwd() !== process.env.BALM_CWD) {
         process.chdir(process.env.BALM_CWD);

package/tslib/config/scripts.js

@@ -32,6 +32,7 @@ const alias = {};
 const plugins = [];
 const injectHtml = false;
 const htmlPluginOptions = {};
+const extractCss = false;
 const sourceMap = false;
 const target = ['web', 'es5'];
 const externals = '';
@@ -72,6 +73,7 @@ export default {
     plugins,
     injectHtml,
     htmlPluginOptions,
+    extractCss,
     sourceMap,
     target,
     externals,