balm-core 4.4.3 → 4.5.2

package/index.d.ts

@@ -46,10 +46,10 @@ export type Configuration = import('webpack').Configuration;
 export type RuleSetRule = import('webpack').RuleSetRule;
 
 export interface BalmLoaders {
-  html: boolean;
-  css: boolean;
   js: boolean;
-  url: boolean;
+  css: boolean;
+  html: boolean;
+  asset: boolean;
 }
 export interface PostcssLoaderOptions {
   exec?: boolean;
@@ -89,9 +89,7 @@ export interface BalmScripts {
   loaders: RuleSetRule[];
   defaultLoaders: Partial<BalmLoaders>;
   includeJsResource: string[];
-  excludeUrlResource: string[];
   useEsModule: boolean;
-  urlLoaderOptions: object;
   babelLoaderOptions: object;
   postcssLoaderOptions: Partial<PostcssLoaderOptions>;
   htmlLoaderOptions: object;
@@ -108,7 +106,6 @@ export interface BalmScripts {
   optimization: object;
   extractAllVendors: boolean;
   vendorName: string;
-  extractCss: boolean;
   ie8: boolean;
   // rollup
   inputOptions: Omit<InputOptions, 'acorn'>; // incompatible

package/lib/balm.js

@@ -56,7 +56,7 @@ class Balm {
     if (BalmJS.utils.isFunction(recipe)) {
       registerTasks(recipe);
     } else {
-      BalmJS.logger.error('initialization', 'BalmJS API: `balm.go(function(mix) {});`');
+      BalmJS.logger.error('initialization', 'BalmJS API: `balm.go(mix => {});`');
     }
   }
 

package/lib/bootstrap/check_config.js

@@ -35,7 +35,11 @@ function checkConfig() {
   upgradeRenamed('3.9.0', 'scripts', 'options', 'minifyOptions');
   upgradeRenamed('3.16.0', 'scripts', 'inject', 'useCache');
   upgradeDeprecated('3.17.0', 'styles', 'darkSass');
-  upgradeDeprecated('3.19.0', 'scripts', 'useCache');
+  upgradeDeprecated('3.19.0', 'scripts', 'useCache'); // For v4
+
+  upgradeDeprecated('4.5.0', 'scripts', 'excludeUrlResource');
+  upgradeDeprecated('4.5.0', 'scripts', 'urlLoaderOptions');
+  upgradeDeprecated('4.5.0', 'scripts', 'extractCss');
 }
 
 export default checkConfig;

package/lib/bootstrap/index.js

@@ -1,5 +1,5 @@
 import checkConfig from './check_config.js';
-import { ASSETS_KEYS } from '../config/constants.js';
+import { ASSETS_TYPES } from '../config/constants.js';
 
 function createQuickPath(config, rootKey) {
   const result = {};
@@ -7,7 +7,7 @@ function createQuickPath(config, rootKey) {
 
   for (const pathKey of Object.keys(config.paths[rootKey])) {
     const pathValue = config.paths[rootKey][pathKey];
-    result[pathKey] = rootKey === 'target' && ASSETS_KEYS.includes(pathKey) ? node.path.join(rootValue, BalmJS.config.assets.virtualDir, BalmJS.file.assetsSuffixPath, pathValue) : node.path.join(rootValue, pathValue);
+    result[pathKey] = rootKey === 'target' && ASSETS_TYPES.includes(pathKey) ? node.path.join(rootValue, BalmJS.config.assets.virtualDir, BalmJS.file.assetsSuffixPath, pathValue) : node.path.join(rootValue, pathValue);
   }
 
   return rootKey === 'source' ? result : result;
@@ -21,8 +21,8 @@ function ready(config) {
 
   config.assets.static = node.path.join(config.assets.root, config.assets.mainDir, BalmJS.file.assetsSuffixPath);
 
-  for (const assetKey of ASSETS_KEYS) {
-    config.assets[assetKey] = node.path.join(config.assets.static, config.paths.target[assetKey]);
+  for (const assetType of ASSETS_TYPES) {
+    config.assets[assetType] = node.path.join(config.assets.static, config.paths.target[assetType]);
   } // Set HMR flag
 
 

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

@@ -1,6 +1,6 @@
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import getLoaders from '../loaders.js';
-import { HASH_NAME_PROD } from '../../../config/constants.js';
+import { CHUNK } from '../../../config/constants.js';
 
 function getDefaultPlugins(webpack, scripts) {
   const plugins = [// Moment.js is an extremely popular library that bundles large locale files
@@ -48,13 +48,13 @@ function getSplitChunks() {
 
   if (scripts.extractAllVendors) {
     // All vendors
-    const jsFilename = scripts.useCache ? `${scripts.vendorName}.${HASH_NAME_PROD}.js` : `${scripts.vendorName}.js`;
+    const vendorsFilename = scripts.useCache ? `${scripts.vendorName}.${CHUNK.hash}.js` : `${scripts.vendorName}.js`;
     cacheGroups = {
       defaultVendors: {
         name: 'vendors',
         chunks: 'all',
         test: /[\\/](node_modules|bower_components)[\\/]/,
-        filename: BalmJS.file.assetsPath(`${jsFolder}/${jsFilename}`) // Output: `js/vendors.js`
+        filename: BalmJS.file.assetsPath(`${jsFolder}/${vendorsFilename}`) // Output: `js/vendors.js`
 
       }
     };
@@ -65,27 +65,29 @@ function getSplitChunks() {
     for (const vendor of BalmJS.vendors) {
       const cacheGroupKey = vendor.key;
       const cacheGroupModules = vendor.value.join('|');
-      const jsFilename = scripts.useCache ? `${cacheGroupKey}.${HASH_NAME_PROD}.js` : `${cacheGroupKey}.js`;
+      const vendorFilename = scripts.useCache ? `${cacheGroupKey}.${CHUNK.hash}.js` : `${cacheGroupKey}.js`;
       cacheGroups[cacheGroupKey] = {
         name: cacheGroupKey,
         chunks: 'initial',
         test: new RegExp(`[\\\\/](${cacheGroupModules})[\\\\/].*(?<!\\.css)$`),
-        filename: BalmJS.file.assetsPath(`${jsFolder}/${scripts.vendorName}/${jsFilename}`),
+        filename: BalmJS.file.assetsPath(`${jsFolder}/${scripts.vendorName}/${vendorFilename}`),
         // Output: `js/vendor/customVendorName.js`
         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
-    cacheGroups.css = {
-      name: 'css',
-      chunks: 'all',
-      test: /\.css$/,
-      enforce: true
-    };
-  }
 
   return Object.keys(cacheGroups).length ? {
     cacheGroups

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

@@ -1,17 +1,15 @@
 import TerserPlugin from 'terser-webpack-plugin';
-import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
-import MiniCssExtractPlugin from 'mini-css-extract-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 { ASYNC_SCRIPTS, HASH_NAME_PROD } 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 = () => `${BalmJS.config.paths.target.css}/${ASYNC_SCRIPTS}/[name].${HASH_NAME_PROD}.css`;
+const bundleAnalyzerReport = process.env.npm_config_report || false; // const getCssFilename = (): string =>
+//   `${BalmJS.config.paths.target.css}/${CHUNK.dir}/[name].${CHUNK.hash}.css`;
 
 function getProdConfig(webpack, scripts) {
   const shouldUseSourceMap = scripts.sourceMap;
@@ -27,15 +25,21 @@ 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/loaders.js

@@ -3,10 +3,10 @@ import LOADERS from './rules/index.js';
 
 function getLoaders(customLoaders) {
   const enableDefaultLoaders = Object.assign({
-    html: true,
-    css: true,
     js: true,
-    url: true
+    css: true,
+    html: true,
+    asset: true
   }, BalmJS.config.scripts.defaultLoaders);
   const useDefaultLoaders = Object.values(enableDefaultLoaders).some(value => value);
   let defaultLoaders = [];

package/lib/bundler/webpack/output.js

@@ -1,28 +1,27 @@
-import { ASYNC_SCRIPTS, HASH_NAME_PROD, MP_ASSETS } from '../../config/constants.js';
+import { CHUNK, ASSET } from '../../config/constants.js';
 
-function getFilename(scripts, isChunk = false) {
+function getJsFilename(scripts, isChunk = false) {
   let filename;
 
   if (isChunk) {
-    filename = BalmJS.config.env.isProd ? `[name].${HASH_NAME_PROD}` : '[name]';
+    filename = BalmJS.config.env.isProd ? `[name].${CHUNK.hash}` : '[name]';
   } else {
-    filename = scripts.useCache ? `[name].${HASH_NAME_PROD}` : '[name]';
+    filename = scripts.useCache ? `[name].${CHUNK.hash}` : '[name]';
   }
 
   return `${filename}.js`;
 }
 
 function getOutput(output, scripts, isHook = false) {
-  const outputPath = output || BalmJS.config.dest.base; // Absolute path
-
+  const outputDirectory = output || BalmJS.config.dest.base;
   const jsFolder = BalmJS.config.paths.target.js;
-  const jsFilename = getFilename(scripts);
-  const jsChunkFilename = getFilename(scripts, true);
+  const bundleFilename = getJsFilename(scripts);
+  const chunkFilename = getJsFilename(scripts, true);
   const customLibraryConfig = scripts.library ? {
     library: scripts.library
   } : {};
   const miniprogramConfig = BalmJS.config.env.isMP ? {
-    path: BalmJS.file.absPath(node.path.join(BalmJS.config.dest.base, MP_ASSETS)),
+    path: BalmJS.file.absPath(node.path.join(BalmJS.config.dest.base, ASSET.mpDir)),
     library: {
       name: 'createApp',
       type: 'window',
@@ -31,12 +30,12 @@ function getOutput(output, scripts, isHook = false) {
   } : {};
   return Object.assign({
     // The build folder.
-    path: BalmJS.file.absPath(outputPath),
+    path: BalmJS.file.absPath(outputDirectory),
     // There will be one main bundle, and one file per asynchronous chunk.
     // In development, it does not produce real files.
-    filename: isHook ? jsFilename : BalmJS.file.assetsPath(`${jsFolder}/${jsFilename}`),
+    filename: isHook ? bundleFilename : BalmJS.file.assetsPath(`${jsFolder}/${bundleFilename}`),
     // There are also additional JS chunk files if you use code splitting.
-    chunkFilename: isHook ? jsChunkFilename : BalmJS.file.assetsPath(`${jsFolder}/${ASYNC_SCRIPTS}/${jsChunkFilename}`),
+    chunkFilename: isHook ? chunkFilename : BalmJS.file.assetsPath(`${jsFolder}/${CHUNK.dir}/${chunkFilename}`),
     // webpack uses `publicPath` to determine where the app is being served from.
     // It requires a trailing slash, or the file assets will get an incorrect path.
     // We inferred the "public path" (such as / or /my-project) from homepage.

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

@@ -0,0 +1,29 @@
+import { imgRegex, fontRegex, mediaRegex } from '../config/regex.js';
+import { ASSET } from '../../../config/constants.js';
+
+function assetLoader() {
+  return [// "url" loader works like "file" loader except that it embeds assets
+  // smaller than specified limit in bytes as data URLs to avoid requests.
+  // A missing `test` is equivalent to a match.
+  {
+    test: imgRegex,
+    type: 'asset/resource',
+    generator: {
+      filename: BalmJS.file.assetsPath(`${ASSET.dir}/${BalmJS.config.paths.target.img}/[name].${ASSET.hash}[ext]`)
+    }
+  }, {
+    test: fontRegex,
+    type: 'asset/resource',
+    generator: {
+      filename: BalmJS.file.assetsPath(`${ASSET.dir}/${BalmJS.config.paths.target.font}/[name].${ASSET.hash}[ext]`)
+    }
+  }, {
+    test: mediaRegex,
+    type: 'asset/resource',
+    generator: {
+      filename: BalmJS.file.assetsPath(`${ASSET.dir}/${BalmJS.config.paths.target.media}/[name].${ASSET.hash}[ext]`)
+    }
+  }];
+}
+
+export default assetLoader;

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

@@ -1,17 +1,20 @@
-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
-const getStyleLoaders = (styleLoader, cssOptions, preProcessor = '', sassOptions = {}) => {
+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, {
+  const loaders = [// BalmJS.config.env.isProd && BalmJS.config.scripts.extractCss
+  //   ? {
+  //       loader: MiniCssExtractPlugin.loader,
+  //       options: {
+  //         esModule: BalmJS.config.scripts.useEsModule
+  //       }
+  //     }
+  //   : styleLoader,
+  styleLoader, {
     loader: requireModule.resolve('css-loader'),
     options: cssOptions
   }, {
@@ -34,7 +37,7 @@ const getStyleLoaders = (styleLoader, cssOptions, preProcessor = '', sassOptions
   }
 
   return loaders;
-};
+}
 
 function cssLoader() {
   let styleLoader = {

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

@@ -1,10 +1,10 @@
-import htmlLoader from './html.js';
-import babelLoader from './babel.js';
+import jsLoader from './babel.js';
 import cssLoader from './css.js';
-import urlLoader from './url.js';
+import htmlLoader from './html.js';
+import assetLoader from './asset.js';
 export default {
-  htmlLoader,
-  babelLoader,
+  jsLoader,
   cssLoader,
-  urlLoader
+  htmlLoader,
+  assetLoader
 };

package/lib/config/constants.js

@@ -1,10 +1,14 @@
 const DOMAIN = 'https://balm.js.org';
-const PUBLIC_URL = '%PUBLIC_URL%';
-const ASSETS_KEYS = ['css', 'js', 'img', 'font', 'media'];
-const ASYNC_SCRIPTS = 'async';
-const STATIC_ASSETS = 'assets';
-const HASH_NAME_PROD = '[contenthash:8]';
-const HASH_NAME_DEV = '[hash:8]';
 const HMR_PATH = '/__balm_hmr';
-const MP_ASSETS = 'common';
-export { DOMAIN, PUBLIC_URL, ASSETS_KEYS, ASYNC_SCRIPTS, STATIC_ASSETS, HASH_NAME_PROD, HASH_NAME_DEV, HMR_PATH, MP_ASSETS };
+const PUBLIC_URL = '%PUBLIC_URL%';
+const ASSETS_TYPES = ['css', 'js', 'img', 'font', 'media'];
+const CHUNK = {
+  dir: 'chunk',
+  hash: '[contenthash:8]'
+};
+const ASSET = {
+  dir: 'asset',
+  hash: '[hash:8]',
+  mpDir: 'common'
+};
+export { DOMAIN, HMR_PATH, PUBLIC_URL, ASSETS_TYPES, CHUNK, ASSET };

package/lib/config/env.js

@@ -1,3 +1,5 @@
+const NODE_ENV = process.env.NODE_ENV;
+const argv = process.argv;
 const ENV = {
   // standard
   PROD: 'production',
@@ -8,11 +10,11 @@ const ENV = {
   MP: 'miniprogram',
   DESKTOP_APP: 'desktop-app'
 };
-const isProd = process.env.NODE_ENV === ENV.PROD || process.argv.includes(`--${ENV.PROD}`) || process.argv.includes('-p');
-const isTest = process.env.NODE_ENV === ENV.TEST || process.argv.includes(`--${ENV.TEST}`) || process.argv.includes('-t');
+const isProd = NODE_ENV === ENV.PROD || argv.includes(`--${ENV.PROD}`) || argv.includes('-p');
+const isTest = NODE_ENV === ENV.TEST || argv.includes(`--${ENV.TEST}`) || argv.includes('-t');
 const isDev = !isProd && !isTest;
 
-if (!process.env.NODE_ENV) {
+if (!NODE_ENV) {
   if (isProd) {
     process.env.NODE_ENV = ENV.PROD;
   } else if (isTest) {
@@ -22,9 +24,9 @@ if (!process.env.NODE_ENV) {
   }
 }
 
-const inSSR = process.env.NODE_ENV === ENV.SSR || process.argv.includes(`--${ENV.SSR}`) || process.argv.includes('-ssr');
-const isMP = process.env.NODE_ENV === ENV.MP || process.argv.includes(`--${ENV.MP}`) || process.argv.includes('-mp');
-const inDesktopApp = process.env.NODE_ENV === ENV.DESKTOP_APP || process.argv.includes(`--${ENV.DESKTOP_APP}`) || process.argv.includes('-electron');
+const inSSR = NODE_ENV === ENV.SSR || argv.includes(`--${ENV.SSR}`) || argv.includes('-ssr');
+const isMP = NODE_ENV === ENV.MP || argv.includes(`--${ENV.MP}`) || argv.includes('-mp');
+const inDesktopApp = NODE_ENV === ENV.DESKTOP_APP || argv.includes(`--${ENV.DESKTOP_APP}`) || argv.includes('-electron');
 export default {
   isProd,
   isTest,

package/lib/config/scripts.js

@@ -52,15 +52,7 @@ const library = ''; // Module
 const loaders = [];
 const defaultLoaders = {};
 const includeJsResource = [];
-const excludeUrlResource = [];
 const useEsModule = true;
-/**
- * Files: url-loader options
- *
- * @reference https://github.com/webpack-contrib/url-loader#options
- */
-
-const urlLoaderOptions = {};
 /**
  * Scripts: babel-loader options
  *
@@ -88,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
 
@@ -151,9 +143,7 @@ export default {
   loaders,
   defaultLoaders,
   includeJsResource,
-  excludeUrlResource,
   useEsModule,
-  urlLoaderOptions,
   babelLoaderOptions,
   postcssLoaderOptions,
   htmlLoaderOptions,
@@ -162,7 +152,7 @@ export default {
   plugins,
   injectHtml,
   htmlPluginOptions,
-  extractCss,
+  // extractCss,
   sourceMap,
   target,
   externals,

package/lib/plugins/postcss-plugins.js

@@ -1,12 +1,13 @@
-import postcssPresetEnv from 'postcss-preset-env';
 import atImport from 'postcss-import';
+import postcssFlexbugsFixes from 'postcss-flexbugs-fixes';
+import postcssPresetEnv from 'postcss-preset-env';
 import autoprefixer from 'autoprefixer';
 import cssnano from 'cssnano';
 
 function getDefaultPostcssPlugins(isPostCSS = false) {
-  const defaultPostcssPlugins = isPostCSS || BalmJS.config.styles.extname === 'css' ? [postcssPresetEnv(BalmJS.config.styles.postcssEnvOptions), atImport({
+  const defaultPostcssPlugins = isPostCSS || BalmJS.config.styles.extname === 'css' ? [atImport({
     path: BalmJS.file.stylePaths
-  })] : [];
+  }), postcssFlexbugsFixes(), postcssPresetEnv(BalmJS.config.styles.postcssEnvOptions)] : [];
   const cssnanoPlugin = BalmJS.config.env.isProd || BalmJS.config.styles.minify ? [cssnano(Object.assign(BalmJS.config.styles.options, {
     autoprefixer: false
   }))] : [];

package/lib/tasks/foundation/balm_style.js

@@ -1,5 +1,5 @@
 import BalmTask from './balm.js';
-import { MP_ASSETS } from '../../config/constants.js';
+import { ASSET } from '../../config/constants.js';
 
 class BalmStyleTask extends BalmTask {
   constructor(name) {
@@ -20,7 +20,7 @@ class BalmStyleTask extends BalmTask {
     }
 
     this.defaultInput = node.path.join(BalmJS.config.src.css, '**', `!(_*).${extname}`);
-    this.defaultOutput = BalmJS.config.env.isMP ? node.path.join(BalmJS.config.dest.base, MP_ASSETS, BalmJS.config.paths.target.css) : BalmJS.config.dest.css;
+    this.defaultOutput = BalmJS.config.env.isMP ? node.path.join(BalmJS.config.dest.base, ASSET.mpDir, BalmJS.config.paths.target.css) : BalmJS.config.dest.css;
   }
 
   handleStyle(style, output, options) {

package/lib/tasks/private/cache.js

@@ -1,6 +1,6 @@
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-import { ASSETS_KEYS, ASYNC_SCRIPTS, STATIC_ASSETS } from '../../config/constants.js';
+import { ASSETS_TYPES, CHUNK, ASSET } from '../../config/constants.js';
 
 class CacheTask extends BalmJS.BalmTask {
   constructor() {
@@ -11,8 +11,8 @@ class CacheTask extends BalmJS.BalmTask {
       return this.src.pipe($.revAll.revision(BalmJS.config.assets.options)).pipe($.if(/\.html$/, BalmJS.file.setPublicPath())).pipe(gulp.dest(this.output)).pipe($.revDeleteOriginal()).pipe($.revAll.manifestFile()).pipe(gulp.dest(this.output));
     });
 
-    const defaultIncludes = BalmJS.config.scripts.useCache ? ASSETS_KEYS.filter(assetKey => assetKey !== 'js').map(assetKey => BalmJS.file.matchAllFiles(BalmJS.config.dest[assetKey])) : ASSETS_KEYS.map(assetKey => BalmJS.file.matchAllFiles(BalmJS.config.dest[assetKey]));
-    const defaultExcludes = [node.path.join(`!${BalmJS.config.dest.js}`, ASYNC_SCRIPTS, '*'), node.path.join(`!${BalmJS.config.dest.js}`, STATIC_ASSETS, '*'), node.path.join(`!${BalmJS.config.dest.css}`, ASYNC_SCRIPTS, '*'), node.path.join(`!${BalmJS.config.dest.base}`, BalmJS.config.pwa.manifest)];
+    const defaultIncludes = BalmJS.config.scripts.useCache ? ASSETS_TYPES.filter(assetType => assetType !== 'js').map(assetType => BalmJS.file.matchAllFiles(BalmJS.config.dest[assetType])) : ASSETS_TYPES.map(assetType => BalmJS.file.matchAllFiles(BalmJS.config.dest[assetType]));
+    const defaultExcludes = [node.path.join(`!${BalmJS.config.dest.js}`, CHUNK.dir, '*'), node.path.join(`!${BalmJS.config.dest.js}`, ASSET.dir, '*'), node.path.join(`!${BalmJS.config.dest.base}`, BalmJS.config.pwa.manifest)];
     const customIncludes = BalmJS.config.assets.includes;
     const customExcludes = BalmJS.config.assets.excludes.map(filename => {
       return `!${filename}`;

package/lib/tasks/private/clean.js

@@ -11,7 +11,7 @@ function _classExtractFieldDescriptor(receiver, privateMap, action) { if (!priva
 function _classApplyDescriptorGet(receiver, descriptor) { if (descriptor.get) { return descriptor.get.call(receiver); } return descriptor.value; }
 
 import del from 'del';
-import { ASSETS_KEYS } from '../../config/constants.js';
+import { ASSETS_TYPES } from '../../config/constants.js';
 
 function unique(arr) {
   const obj = {};
@@ -36,7 +36,7 @@ class CleanTask extends BalmJS.BalmTask {
     _classPrivateFieldInitSpec(this, _getAssetsDir, {
       writable: true,
       value: (rootKey = 'assets') => {
-        return unique(ASSETS_KEYS.map(assetKey => BalmJS.config[rootKey][assetKey]));
+        return unique(ASSETS_TYPES.map(assetType => BalmJS.config[rootKey][assetType]));
       }
     });
 

package/lib/utilities/file.js

@@ -13,8 +13,7 @@ class File {
     // single-page apps that may serve index.html for nested URLs like /todos/42.
     // We can't use a relative path in HTML because we don't want to load something
     // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
-    return getPublicUrlOrPath( // eslint-disable-next-line @typescript-eslint/no-var-requires
-    requireModule(resolveApp('package.json')).homepage, process.env.PUBLIC_URL);
+    return getPublicUrlOrPath(requireModule(resolveApp('package.json')).homepage, process.env.PUBLIC_URL);
   }
 
   get stylePaths() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "balm-core",
-  "version": "4.4.3",
+  "version": "4.5.2",
   "description": "BalmJS compiler core",
   "keywords": [
     "balm",
@@ -49,11 +49,10 @@
     "connect-history-api-fallback": "^1.6.0",
     "css-loader": "^6.7.1",
     "css-minimizer-webpack-plugin": "^3.4.1",
-    "cssnano": "^5.1.5",
+    "cssnano": "^5.1.7",
     "del": "^6.0.0",
-    "esbuild": "^0.14",
+    "esbuild": "^0.14.0",
     "fancy-log": "^2.0.0",
-    "file-loader": "^6.2.0",
     "gulp-eslint": "^6.0.0",
     "gulp-if": "^3.0.0",
     "gulp-load-plugins": "^2.0.7",
@@ -70,13 +69,13 @@
     "imagemin": "^8.0.1",
     "istextorbinary": "^6.0.0",
     "less": "^4.1.2",
-    "mini-css-extract-plugin": "2.4.5",
     "modernizr": "^3.12.0",
     "parents": "^1.0.1",
     "plugin-error": "^1.0.1",
     "postcss": "^8.4.12",
+    "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-import": "^14.1.0",
-    "postcss-load-config": "^3.1.3",
+    "postcss-load-config": "^3.1.4",
     "postcss-loader": "6.2.1",
     "postcss-preset-env": "^7.4.3",
     "pretty-bytes": "^6.0.0",
@@ -84,9 +83,9 @@
     "replace-ext": "^2.0.0",
     "rollup": "^2.70.1",
     "rollup-plugin-terser": "^7.0.2",
-    "sass": "^1.49.9",
+    "sass": "^1.50.0",
     "sass-loader": "^12.6.0",
-    "ssh2": "^1.7.0",
+    "ssh2": "^1.9.0",
     "strip-ansi": "^7.0.1",
     "style-loader": "^3.3.1",
     "terser": "^5.12.1",
@@ -94,19 +93,18 @@
     "through2": "^4.0.2",
     "through2-concurrent": "^2.0.0",
     "tslib": "^2.3.1",
-    "url-loader": "^4.1.1",
     "vinyl-sourcemaps-apply": "^0.2.1",
-    "webpack": "^5.70.0",
+    "webpack": "^5.71.0",
     "webpack-bundle-analyzer": "^4.5.0",
     "webpack-dev-middleware": "^5.3.1",
     "webpack-hot-middleware": "^2.25.1",
     "webpack-merge": "^5.8.0",
-    "workbox-build": "^6.5.1"
+    "workbox-build": "^6.5.2"
   },
   "devDependencies": {
-    "@swc/core": "^1.2",
+    "@swc/core": "^1.2.0",
     "@types/express": "^4.17.13",
-    "@types/node": "^17.0.22",
+    "@types/node": "^17.0.23",
     "@types/uglify-js": "^3.13.1",
     "@types/webpack": "^5.28.0"
   },
@@ -116,8 +114,11 @@
     "imagemin-optipng": "^8.0.0",
     "imagemin-svgo": "^9.0.0"
   },
+  "resolutions": {
+    "ajv": "^8.0.0"
+  },
   "engines": {
     "node": ">=12.13.0"
   },
-  "gitHead": "e7d55837b2f75da51169f028516a1748ce6a543b"
+  "gitHead": "3f7e99d1cafc6868d2437975e1817c8ba26de24e"
 }

package/tslib/balm.js

@@ -31,7 +31,7 @@ class Balm {
             registerTasks(recipe);
         }
         else {
-            BalmJS.logger.error('initialization', 'BalmJS API: `balm.go(function(mix) {});`');
+            BalmJS.logger.error('initialization', 'BalmJS API: `balm.go(mix => {});`');
         }
     }
     reset() {

package/tslib/bootstrap/check_config.js

@@ -28,5 +28,8 @@ function checkConfig() {
     upgradeRenamed('3.16.0', 'scripts', 'inject', 'useCache');
     upgradeDeprecated('3.17.0', 'styles', 'darkSass');
     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/bootstrap/index.js

@@ -1,12 +1,12 @@
 import checkConfig from './check_config.js';
-import { ASSETS_KEYS } from '../config/constants.js';
+import { ASSETS_TYPES } from '../config/constants.js';
 function createQuickPath(config, rootKey) {
     const result = {};
     const rootValue = config.roots[rootKey];
     for (const pathKey of Object.keys(config.paths[rootKey])) {
         const pathValue = config.paths[rootKey][pathKey];
         result[pathKey] =
-            rootKey === 'target' && ASSETS_KEYS.includes(pathKey)
+            rootKey === 'target' && ASSETS_TYPES.includes(pathKey)
                 ? node.path.join(rootValue, BalmJS.config.assets.virtualDir, BalmJS.file.assetsSuffixPath, pathValue)
                 : node.path.join(rootValue, pathValue);
     }
@@ -19,8 +19,8 @@ function ready(config) {
     config.dest = createQuickPath(config, config.env.isProd || !config.inFrontend ? 'target' : 'tmp');
     config.dest.static = node.path.join(config.dest.base, BalmJS.config.assets.virtualDir, BalmJS.file.assetsSuffixPath);
     config.assets.static = node.path.join(config.assets.root, config.assets.mainDir, BalmJS.file.assetsSuffixPath);
-    for (const assetKey of ASSETS_KEYS) {
-        config.assets[assetKey] = node.path.join(config.assets.static, config.paths.target[assetKey]);
+    for (const assetType of ASSETS_TYPES) {
+        config.assets[assetType] = node.path.join(config.assets.static, config.paths.target[assetType]);
     }
     const HMR_ENV = config.useDefaults &&
         config.env.isDev &&

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

@@ -1,6 +1,6 @@
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import getLoaders from '../loaders.js';
-import { HASH_NAME_PROD } from '../../../config/constants.js';
+import { CHUNK } from '../../../config/constants.js';
 function getDefaultPlugins(webpack, scripts) {
     const plugins = [
         new webpack.IgnorePlugin({
@@ -37,15 +37,15 @@ function getSplitChunks() {
     const jsFolder = BalmJS.config.paths.target.js;
     let cacheGroups = {};
     if (scripts.extractAllVendors) {
-        const jsFilename = scripts.useCache
-            ? `${scripts.vendorName}.${HASH_NAME_PROD}.js`
+        const vendorsFilename = scripts.useCache
+            ? `${scripts.vendorName}.${CHUNK.hash}.js`
             : `${scripts.vendorName}.js`;
         cacheGroups = {
             defaultVendors: {
                 name: 'vendors',
                 chunks: 'all',
                 test: /[\\/](node_modules|bower_components)[\\/]/,
-                filename: BalmJS.file.assetsPath(`${jsFolder}/${jsFilename}`)
+                filename: BalmJS.file.assetsPath(`${jsFolder}/${vendorsFilename}`)
             }
         };
     }
@@ -54,26 +54,18 @@ function getSplitChunks() {
         for (const vendor of BalmJS.vendors) {
             const cacheGroupKey = vendor.key;
             const cacheGroupModules = vendor.value.join('|');
-            const jsFilename = scripts.useCache
-                ? `${cacheGroupKey}.${HASH_NAME_PROD}.js`
+            const vendorFilename = scripts.useCache
+                ? `${cacheGroupKey}.${CHUNK.hash}.js`
                 : `${cacheGroupKey}.js`;
             cacheGroups[cacheGroupKey] = {
                 name: cacheGroupKey,
                 chunks: 'initial',
                 test: new RegExp(`[\\\\/](${cacheGroupModules})[\\\\/].*(?<!\\.css)$`),
-                filename: BalmJS.file.assetsPath(`${jsFolder}/${scripts.vendorName}/${jsFilename}`),
+                filename: BalmJS.file.assetsPath(`${jsFolder}/${scripts.vendorName}/${vendorFilename}`),
                 enforce: true
             };
         }
     }
-    if (BalmJS.config.env.isProd && BalmJS.config.scripts.extractCss) {
-        cacheGroups.css = {
-            name: 'css',
-            chunks: 'all',
-            test: /\.css$/,
-            enforce: true
-        };
-    }
     return Object.keys(cacheGroups).length ? { cacheGroups } : false;
 }
 function getCommonConfig(webpack, scripts) {

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

@@ -1,12 +1,8 @@
 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 { ASYNC_SCRIPTS, HASH_NAME_PROD } from '../../../config/constants.js';
 const bundleAnalyzerReport = process.env.npm_config_report || false;
-const getCssFilename = () => `${BalmJS.config.paths.target.css}/${ASYNC_SCRIPTS}/[name].${HASH_NAME_PROD}.css`;
 function getProdConfig(webpack, scripts) {
     const shouldUseSourceMap = scripts.sourceMap;
     const terserOptions = scripts.minifyOptions;
@@ -20,22 +16,13 @@ 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/loaders.js

@@ -2,10 +2,10 @@ import { mergeWithRules, CustomizeRule } from 'webpack-merge';
 import LOADERS from './rules/index.js';
 function getLoaders(customLoaders) {
     const enableDefaultLoaders = Object.assign({
-        html: true,
-        css: true,
         js: true,
-        url: true
+        css: true,
+        html: true,
+        asset: true
     }, BalmJS.config.scripts.defaultLoaders);
     const useDefaultLoaders = Object.values(enableDefaultLoaders).some((value) => value);
     let defaultLoaders = [];

package/tslib/bundler/webpack/output.js

@@ -1,25 +1,25 @@
-import { ASYNC_SCRIPTS, HASH_NAME_PROD, MP_ASSETS } from '../../config/constants.js';
-function getFilename(scripts, isChunk = false) {
+import { CHUNK, ASSET } from '../../config/constants.js';
+function getJsFilename(scripts, isChunk = false) {
     let filename;
     if (isChunk) {
-        filename = BalmJS.config.env.isProd ? `[name].${HASH_NAME_PROD}` : '[name]';
+        filename = BalmJS.config.env.isProd ? `[name].${CHUNK.hash}` : '[name]';
     }
     else {
-        filename = scripts.useCache ? `[name].${HASH_NAME_PROD}` : '[name]';
+        filename = scripts.useCache ? `[name].${CHUNK.hash}` : '[name]';
     }
     return `${filename}.js`;
 }
 function getOutput(output, scripts, isHook = false) {
-    const outputPath = output || BalmJS.config.dest.base;
+    const outputDirectory = output || BalmJS.config.dest.base;
     const jsFolder = BalmJS.config.paths.target.js;
-    const jsFilename = getFilename(scripts);
-    const jsChunkFilename = getFilename(scripts, true);
+    const bundleFilename = getJsFilename(scripts);
+    const chunkFilename = getJsFilename(scripts, true);
     const customLibraryConfig = scripts.library
         ? { library: scripts.library }
         : {};
     const miniprogramConfig = BalmJS.config.env.isMP
         ? {
-            path: BalmJS.file.absPath(node.path.join(BalmJS.config.dest.base, MP_ASSETS)),
+            path: BalmJS.file.absPath(node.path.join(BalmJS.config.dest.base, ASSET.mpDir)),
             library: {
                 name: 'createApp',
                 type: 'window',
@@ -28,13 +28,13 @@ function getOutput(output, scripts, isHook = false) {
         }
         : {};
     return Object.assign({
-        path: BalmJS.file.absPath(outputPath),
+        path: BalmJS.file.absPath(outputDirectory),
         filename: isHook
-            ? jsFilename
-            : BalmJS.file.assetsPath(`${jsFolder}/${jsFilename}`),
+            ? bundleFilename
+            : BalmJS.file.assetsPath(`${jsFolder}/${bundleFilename}`),
         chunkFilename: isHook
-            ? jsChunkFilename
-            : BalmJS.file.assetsPath(`${jsFolder}/${ASYNC_SCRIPTS}/${jsChunkFilename}`),
+            ? chunkFilename
+            : BalmJS.file.assetsPath(`${jsFolder}/${CHUNK.dir}/${chunkFilename}`),
         publicPath: BalmJS.file.publicUrlOrPath
     }, customLibraryConfig, miniprogramConfig);
 }

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

@@ -0,0 +1,28 @@
+import { imgRegex, fontRegex, mediaRegex } from '../config/regex.js';
+import { ASSET } from '../../../config/constants.js';
+function assetLoader() {
+    return [
+        {
+            test: imgRegex,
+            type: 'asset/resource',
+            generator: {
+                filename: BalmJS.file.assetsPath(`${ASSET.dir}/${BalmJS.config.paths.target.img}/[name].${ASSET.hash}[ext]`)
+            }
+        },
+        {
+            test: fontRegex,
+            type: 'asset/resource',
+            generator: {
+                filename: BalmJS.file.assetsPath(`${ASSET.dir}/${BalmJS.config.paths.target.font}/[name].${ASSET.hash}[ext]`)
+            }
+        },
+        {
+            test: mediaRegex,
+            type: 'asset/resource',
+            generator: {
+                filename: BalmJS.file.assetsPath(`${ASSET.dir}/${BalmJS.config.paths.target.media}/[name].${ASSET.hash}[ext]`)
+            }
+        }
+    ];
+}
+export default assetLoader;

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

@@ -1,16 +1,8 @@
-import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import { cssRegex, cssModuleRegex, sassRegex, sassModuleRegex } from '../config/regex.js';
-const getStyleLoaders = (styleLoader, cssOptions, preProcessor = '', sassOptions = {}) => {
+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,
         {
             loader: requireModule.resolve('css-loader'),
             options: cssOptions
@@ -34,7 +26,7 @@ const getStyleLoaders = (styleLoader, cssOptions, preProcessor = '', sassOptions
         });
     }
     return loaders;
-};
+}
 function cssLoader() {
     let styleLoader = {
         loader: requireModule.resolve('style-loader'),

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

@@ -1,10 +1,10 @@
-import htmlLoader from './html.js';
-import babelLoader from './babel.js';
+import jsLoader from './babel.js';
 import cssLoader from './css.js';
-import urlLoader from './url.js';
+import htmlLoader from './html.js';
+import assetLoader from './asset.js';
 export default {
-    htmlLoader,
-    babelLoader,
+    jsLoader,
     cssLoader,
-    urlLoader
+    htmlLoader,
+    assetLoader
 };

package/tslib/config/constants.js

@@ -1,10 +1,14 @@
 const DOMAIN = 'https://balm.js.org';
-const PUBLIC_URL = '%PUBLIC_URL%';
-const ASSETS_KEYS = ['css', 'js', 'img', 'font', 'media'];
-const ASYNC_SCRIPTS = 'async';
-const STATIC_ASSETS = 'assets';
-const HASH_NAME_PROD = '[contenthash:8]';
-const HASH_NAME_DEV = '[hash:8]';
 const HMR_PATH = '/__balm_hmr';
-const MP_ASSETS = 'common';
-export { DOMAIN, PUBLIC_URL, ASSETS_KEYS, ASYNC_SCRIPTS, STATIC_ASSETS, HASH_NAME_PROD, HASH_NAME_DEV, HMR_PATH, MP_ASSETS };
+const PUBLIC_URL = '%PUBLIC_URL%';
+const ASSETS_TYPES = ['css', 'js', 'img', 'font', 'media'];
+const CHUNK = {
+    dir: 'chunk',
+    hash: '[contenthash:8]'
+};
+const ASSET = {
+    dir: 'asset',
+    hash: '[hash:8]',
+    mpDir: 'common'
+};
+export { DOMAIN, HMR_PATH, PUBLIC_URL, ASSETS_TYPES, CHUNK, ASSET };

package/tslib/config/env.js

@@ -1,3 +1,5 @@
+const NODE_ENV = process.env.NODE_ENV;
+const argv = process.argv;
 const ENV = {
     PROD: 'production',
     TEST: 'test',
@@ -6,14 +8,14 @@ const ENV = {
     MP: 'miniprogram',
     DESKTOP_APP: 'desktop-app'
 };
-const isProd = process.env.NODE_ENV === ENV.PROD ||
-    process.argv.includes(`--${ENV.PROD}`) ||
-    process.argv.includes('-p');
-const isTest = process.env.NODE_ENV === ENV.TEST ||
-    process.argv.includes(`--${ENV.TEST}`) ||
-    process.argv.includes('-t');
+const isProd = NODE_ENV === ENV.PROD ||
+    argv.includes(`--${ENV.PROD}`) ||
+    argv.includes('-p');
+const isTest = NODE_ENV === ENV.TEST ||
+    argv.includes(`--${ENV.TEST}`) ||
+    argv.includes('-t');
 const isDev = !isProd && !isTest;
-if (!process.env.NODE_ENV) {
+if (!NODE_ENV) {
     if (isProd) {
         process.env.NODE_ENV = ENV.PROD;
     }
@@ -24,15 +26,13 @@ if (!process.env.NODE_ENV) {
         process.env.NODE_ENV = ENV.DEV;
     }
 }
-const inSSR = process.env.NODE_ENV === ENV.SSR ||
-    process.argv.includes(`--${ENV.SSR}`) ||
-    process.argv.includes('-ssr');
-const isMP = process.env.NODE_ENV === ENV.MP ||
-    process.argv.includes(`--${ENV.MP}`) ||
-    process.argv.includes('-mp');
-const inDesktopApp = process.env.NODE_ENV === ENV.DESKTOP_APP ||
-    process.argv.includes(`--${ENV.DESKTOP_APP}`) ||
-    process.argv.includes('-electron');
+const inSSR = NODE_ENV === ENV.SSR ||
+    argv.includes(`--${ENV.SSR}`) ||
+    argv.includes('-ssr');
+const isMP = NODE_ENV === ENV.MP || argv.includes(`--${ENV.MP}`) || argv.includes('-mp');
+const inDesktopApp = NODE_ENV === ENV.DESKTOP_APP ||
+    argv.includes(`--${ENV.DESKTOP_APP}`) ||
+    argv.includes('-electron');
 export default {
     isProd,
     isTest,

package/tslib/config/scripts.js

@@ -23,9 +23,7 @@ const library = '';
 const loaders = [];
 const defaultLoaders = {};
 const includeJsResource = [];
-const excludeUrlResource = [];
 const useEsModule = true;
-const urlLoaderOptions = {};
 const babelLoaderOptions = {};
 const postcssLoaderOptions = {};
 const htmlLoaderOptions = {};
@@ -34,7 +32,6 @@ const alias = {};
 const plugins = [];
 const injectHtml = false;
 const htmlPluginOptions = {};
-const extractCss = false;
 const sourceMap = false;
 const target = ['web', 'es5'];
 const externals = '';
@@ -66,9 +63,7 @@ export default {
     loaders,
     defaultLoaders,
     includeJsResource,
-    excludeUrlResource,
     useEsModule,
-    urlLoaderOptions,
     babelLoaderOptions,
     postcssLoaderOptions,
     htmlLoaderOptions,
@@ -77,7 +72,6 @@ export default {
     plugins,
     injectHtml,
     htmlPluginOptions,
-    extractCss,
     sourceMap,
     target,
     externals,

package/tslib/plugins/postcss-plugins.js

@@ -1,12 +1,14 @@
-import postcssPresetEnv from 'postcss-preset-env';
 import atImport from 'postcss-import';
+import postcssFlexbugsFixes from 'postcss-flexbugs-fixes';
+import postcssPresetEnv from 'postcss-preset-env';
 import autoprefixer from 'autoprefixer';
 import cssnano from 'cssnano';
 function getDefaultPostcssPlugins(isPostCSS = false) {
     const defaultPostcssPlugins = isPostCSS || BalmJS.config.styles.extname === 'css'
         ? [
-            postcssPresetEnv(BalmJS.config.styles.postcssEnvOptions),
-            atImport({ path: BalmJS.file.stylePaths })
+            atImport({ path: BalmJS.file.stylePaths }),
+            postcssFlexbugsFixes(),
+            postcssPresetEnv(BalmJS.config.styles.postcssEnvOptions)
         ]
         : [];
     const cssnanoPlugin = BalmJS.config.env.isProd || BalmJS.config.styles.minify

package/tslib/tasks/foundation/balm_style.js

@@ -1,5 +1,5 @@
 import BalmTask from './balm.js';
-import { MP_ASSETS } from '../../config/constants.js';
+import { ASSET } from '../../config/constants.js';
 class BalmStyleTask extends BalmTask {
     constructor(name) {
         super(name);
@@ -16,7 +16,7 @@ class BalmStyleTask extends BalmTask {
         }
         this.defaultInput = node.path.join(BalmJS.config.src.css, '**', `!(_*).${extname}`);
         this.defaultOutput = BalmJS.config.env.isMP
-            ? node.path.join(BalmJS.config.dest.base, MP_ASSETS, BalmJS.config.paths.target.css)
+            ? node.path.join(BalmJS.config.dest.base, ASSET.mpDir, BalmJS.config.paths.target.css)
             : BalmJS.config.dest.css;
     }
     handleStyle(style, output, options) {

package/tslib/tasks/private/cache.js

@@ -1,4 +1,4 @@
-import { ASSETS_KEYS, ASYNC_SCRIPTS, STATIC_ASSETS } from '../../config/constants.js';
+import { ASSETS_TYPES, CHUNK, ASSET } from '../../config/constants.js';
 class CacheTask extends BalmJS.BalmTask {
     constructor() {
         super('cache');
@@ -13,12 +13,11 @@ class CacheTask extends BalmJS.BalmTask {
                 .pipe(gulp.dest(this.output));
         };
         const defaultIncludes = BalmJS.config.scripts.useCache
-            ? ASSETS_KEYS.filter((assetKey) => assetKey !== 'js').map((assetKey) => BalmJS.file.matchAllFiles(BalmJS.config.dest[assetKey]))
-            : ASSETS_KEYS.map((assetKey) => BalmJS.file.matchAllFiles(BalmJS.config.dest[assetKey]));
+            ? ASSETS_TYPES.filter((assetType) => assetType !== 'js').map((assetType) => BalmJS.file.matchAllFiles(BalmJS.config.dest[assetType]))
+            : ASSETS_TYPES.map((assetType) => BalmJS.file.matchAllFiles(BalmJS.config.dest[assetType]));
         const defaultExcludes = [
-            node.path.join(`!${BalmJS.config.dest.js}`, ASYNC_SCRIPTS, '*'),
-            node.path.join(`!${BalmJS.config.dest.js}`, STATIC_ASSETS, '*'),
-            node.path.join(`!${BalmJS.config.dest.css}`, ASYNC_SCRIPTS, '*'),
+            node.path.join(`!${BalmJS.config.dest.js}`, CHUNK.dir, '*'),
+            node.path.join(`!${BalmJS.config.dest.js}`, ASSET.dir, '*'),
             node.path.join(`!${BalmJS.config.dest.base}`, BalmJS.config.pwa.manifest)
         ];
         const customIncludes = BalmJS.config.assets.includes;

package/tslib/tasks/private/clean.js

@@ -1,7 +1,7 @@
 var _CleanTask_getAssetsDir;
 import { __classPrivateFieldGet } from "tslib";
 import del from 'del';
-import { ASSETS_KEYS } from '../../config/constants.js';
+import { ASSETS_TYPES } from '../../config/constants.js';
 function unique(arr) {
     const obj = {};
     const result = [];
@@ -17,7 +17,7 @@ class CleanTask extends BalmJS.BalmTask {
     constructor() {
         super('clean');
         _CleanTask_getAssetsDir.set(this, (rootKey = 'assets') => {
-            return unique(ASSETS_KEYS.map((assetKey) => BalmJS.config[rootKey][assetKey]));
+            return unique(ASSETS_TYPES.map((assetType) => BalmJS.config[rootKey][assetType]));
         });
         this.fn = async (callback) => {
             const taskName = `${this.name} task`;

package/tslib/utilities/file.js

@@ -4,7 +4,8 @@ const appDirectory = node.fs.realpathSync(process.cwd());
 const resolveApp = (relativePath) => node.path.resolve(appDirectory, relativePath);
 class File {
     get publicUrlOrPath() {
-        return getPublicUrlOrPath(requireModule(resolveApp('package.json')).homepage, process.env.PUBLIC_URL);
+        return getPublicUrlOrPath(requireModule(resolveApp('package.json'))
+            .homepage, process.env.PUBLIC_URL);
     }
     get stylePaths() {
         return [

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

@@ -1,33 +0,0 @@
-import { STATIC_ASSETS, HASH_NAME_DEV } from '../../../config/constants.js';
-import { imgRegex, fontRegex, mediaRegex } from '../config/regex.js';
-const imageInlineSizeLimit = parseInt(process.env.IMAGE_INLINE_SIZE_LIMIT || '10000');
-
-function urlLoader() {
-  const PATHNAME = `${BalmJS.config.paths.target.js}/${STATIC_ASSETS}/`;
-  const FILENAME = `[name].${HASH_NAME_DEV}.[ext]`;
-  const options = Object.assign({
-    limit: imageInlineSizeLimit,
-    // Loads files as `base64` encoded URL
-    name: BalmJS.file.assetsPath(`${PATHNAME}${FILENAME}`),
-    esModule: BalmJS.config.scripts.useEsModule
-  }, BalmJS.config.scripts.urlLoaderOptions);
-  return [// "url" loader works like "file" loader except that it embeds assets
-  // smaller than specified limit in bytes as data URLs to avoid requests.
-  // A missing `test` is equivalent to a match.
-  {
-    test: imgRegex,
-    loader: requireModule.resolve('url-loader'),
-    exclude: BalmJS.config.scripts.excludeUrlResource,
-    options
-  }, {
-    test: mediaRegex,
-    loader: requireModule.resolve('url-loader'),
-    options
-  }, {
-    test: fontRegex,
-    loader: requireModule.resolve('url-loader'),
-    options
-  }];
-}
-
-export default urlLoader;

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

@@ -1,31 +0,0 @@
-import { STATIC_ASSETS, HASH_NAME_DEV } from '../../../config/constants.js';
-import { imgRegex, fontRegex, mediaRegex } from '../config/regex.js';
-const imageInlineSizeLimit = parseInt(process.env.IMAGE_INLINE_SIZE_LIMIT || '10000');
-function urlLoader() {
-    const PATHNAME = `${BalmJS.config.paths.target.js}/${STATIC_ASSETS}/`;
-    const FILENAME = `[name].${HASH_NAME_DEV}.[ext]`;
-    const options = Object.assign({
-        limit: imageInlineSizeLimit,
-        name: BalmJS.file.assetsPath(`${PATHNAME}${FILENAME}`),
-        esModule: BalmJS.config.scripts.useEsModule
-    }, BalmJS.config.scripts.urlLoaderOptions);
-    return [
-        {
-            test: imgRegex,
-            loader: requireModule.resolve('url-loader'),
-            exclude: BalmJS.config.scripts.excludeUrlResource,
-            options
-        },
-        {
-            test: mediaRegex,
-            loader: requireModule.resolve('url-loader'),
-            options
-        },
-        {
-            test: fontRegex,
-            loader: requireModule.resolve('url-loader'),
-            options
-        }
-    ];
-}
-export default urlLoader;