balm-core 4.31.0 → 4.33.0

package/README.md

@@ -1,6 +1,6 @@
 <div align="center">
   <a href="https://balm.js.org/">
-    <img width="128" heigth="128" src="https://balm.js.org/logo.png" alt="BalmJS">
+    <img width="128" height="128" src="https://balm.js.org/logo.png" alt="BalmJS">
   </a>
   <br>
   <br>

package/lib/config/globals.js

@@ -4,10 +4,21 @@ import colors from 'ansi-colors';
 import { create } from 'browser-sync';
 import through2 from 'through2';
 import PluginError from 'plugin-error';
+import semver from 'semver';
 
 // 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_ROOT || process.env.BALM_CWD, 'node_modules', 'gulp', 'index.js');
+const localSassModule = path.join(process.env.BALM_CWD, 'node_modules', 'sass');
+let isLegacySass = false;
+try {
+  const sassPkg = requireModule(path.join(localSassModule, 'package.json'));
+  isLegacySass = semver.lt(sassPkg.version, '1.40.0');
+} catch (_) {}
+const nodeLocalSassModule = path.join(localSassModule, 'sass.node.js');
+const defaultLocalSassModule = path.join(localSassModule, 'sass.default.js'); // For `npm i -D sass <= 1.62.1`
+const dartLocalSassModule = path.join(localSassModule, 'sass.dart.js'); // For `npm i -D sass <= 1.39.2`
+const getSassModule = sass => fs.existsSync(nodeLocalSassModule) ? requireModule(nodeLocalSassModule) : fs.existsSync(defaultLocalSassModule) ? requireModule(defaultLocalSassModule) : fs.existsSync(dartLocalSassModule) ? requireModule(dartLocalSassModule) : sass;
 if (fs.existsSync(gulpModule)) {
   // Chdir before requiring balm config to make sure
   // we let them chdir as needed
@@ -22,7 +33,9 @@ if (fs.existsSync(gulpModule)) {
 }
 global.node = {
   path,
-  fs
+  fs,
+  isLegacySass,
+  getSassModule
 };
 global.server = create();
 global.through2 = through2;

package/lib/plugins/imagemin.js

@@ -1,4 +1,4 @@
-// Reference `gulp-imagemin@9.0.0`
+// Reference `gulp-imagemin@9.1.0`
 
 import imagemin from 'imagemin';
 import prettyBytes from 'pretty-bytes';
@@ -54,7 +54,7 @@ function gulpImagemin(customPlugins) {
           totalFiles++;
         }
         BalmJS.logger.debug(PLUGIN_NAME, `${file.relative} (${message})`);
-        file.contents = data;
+        file.contents = Buffer.from(data);
         callback(null, file);
       } catch (error) {
         callback(new PluginError(PLUGIN_NAME, error, {

package/lib/plugins/index.js

@@ -8,6 +8,7 @@ import postcssPlugins from './postcss-plugins.js';
 import rename from './rename.js';
 import replace from './replace.js';
 import sass from './sass.js';
+import legacySass from './sass-legacy.js';
 import sftp from './sftp.js';
 const plugins = {
   htmlmin,
@@ -20,6 +21,7 @@ const plugins = {
   rename,
   replace,
   sass,
+  legacySass,
   sftp
 };
 BalmJS.plugins = plugins;

package/lib/plugins/postcss.js

@@ -1,4 +1,4 @@
-// Reference `gulp-postcss@9.0.1`
+// Reference `gulp-postcss@10.0.0`
 import { Transform } from 'node:stream';
 import postcss from 'postcss';
 import postcssLoadConfig from 'postcss-load-config';
@@ -28,7 +28,7 @@ function gulpPostcss(cb) {
         }
         const ctx = {
           file,
-          options: contextOptions
+          options: contextOptions // @TODO: The options property is deprecated and should be removed
         };
         return postcssLoadConfig(ctx, configPath);
       });

package/lib/plugins/sass-legacy.js

@@ -0,0 +1,131 @@
+// Reference `gulp-sass@5.1.0`
+import { Transform } from 'node:stream';
+import * as sass from 'sass';
+import replaceExtension from 'replace-ext';
+import stripAnsi from 'strip-ansi';
+import applySourceMap from 'vinyl-sourcemaps-apply';
+import ansiColors from 'ansi-colors';
+const sassModule = node.getSassModule(sass);
+const PLUGIN_NAME = 'sass-legacy';
+const transformObj = transform => new Transform({
+  transform,
+  objectMode: true
+});
+
+/**
+ * Handles returning the file to the stream
+ */
+function filePush(file, sassObject, callback) {
+  // Build Source Maps!
+  if (sassObject.map) {
+    // Transform map into JSON
+    const sassMap = JSON.parse(sassObject.map.toString());
+    // Grab the stdout and transform it into stdin
+    const sassMapFile = sassMap.file.replace(/^stdout$/, 'stdin');
+    // Grab the base filename that's being worked on
+    const sassFileSrc = file.relative;
+    // Grab the path portion of the file that's being worked on
+    const sassFileSrcPath = node.path.dirname(sassFileSrc);
+    if (sassFileSrcPath) {
+      const sourceFileIndex = sassMap.sources.indexOf(sassMapFile);
+      // Prepend the path to all files in the sources array except the file that's being worked on
+      sassMap.sources = sassMap.sources.map((source, index) => index === sourceFileIndex ? source : node.path.join(sassFileSrcPath, source));
+    }
+
+    // Remove 'stdin' from sources and replace with filenames!
+    sassMap.sources = sassMap.sources.filter(src => src !== 'stdin' && src);
+
+    // Replace the map file with the original filename (but new extension)
+    sassMap.file = replaceExtension(sassFileSrc, '.css');
+    // Apply the map
+    applySourceMap(file, sassMap);
+  }
+  file.contents = sassObject.css;
+  file.path = replaceExtension(file.path, '.css');
+  if (file.stat) {
+    file.stat.atime = file.stat.mtime = file.stat.ctime = new Date();
+  }
+  callback(null, file);
+}
+
+/**
+ * Handles error message
+ */
+function handleError(error, file, callback) {
+  const filePath = (error.file === 'stdin' ? file.path : error.file) || file.path;
+  const relativePath = node.path.relative(process.cwd(), filePath);
+  const message = `${ansiColors.underline(relativePath)}\n${error.formatted}`;
+  error.messageFormatted = message;
+  error.messageOriginal = error.message;
+  error.message = stripAnsi(message);
+  error.relativePath = relativePath;
+  return callback(new PluginError(PLUGIN_NAME, error));
+}
+
+//////////////////////////////
+// Main Gulp Sass function
+//////////////////////////////
+const gulpSass = (options, sync = false) => transformObj((file, encoding, callback) => {
+  if (file.isNull()) {
+    return callback(null, file);
+  }
+  if (file.isStream()) {
+    return callback(new PluginError(PLUGIN_NAME, 'Streaming not supported'));
+  }
+  if (node.path.basename(file.path).startsWith('_')) {
+    return callback();
+  }
+  if (!file.contents.length) {
+    file.path = replaceExtension(file.path, '.css');
+    return callback(null, file);
+  }
+  const opts = options || {};
+  opts.data = file.contents.toString();
+
+  // We set the file path here so that libsass can correctly resolve import paths
+  opts.file = file.path;
+
+  // Ensure `indentedSyntax` is true if a `.sass` file
+  if (node.path.extname(file.path) === '.sass') {
+    opts.indentedSyntax = true;
+  }
+
+  // Ensure file's parent directory in the include path
+  if (opts.includePaths) {
+    if (typeof opts.includePaths === 'string') {
+      opts.includePaths = [opts.includePaths];
+    }
+  } else {
+    opts.includePaths = [];
+  }
+  opts.includePaths.unshift(node.path.dirname(file.path));
+
+  // Generate Source Maps if the source-map plugin is present
+  if (file.sourceMap) {
+    opts.sourceMap = file.path;
+    opts.omitSourceMapUrl = true;
+    opts.sourceMapContents = true;
+  }
+  if (sync !== true) {
+    /**
+     * Async Sass render
+     */
+    sassModule.render(opts, (error, obj) => {
+      if (error) {
+        handleError(error, file, callback);
+        return;
+      }
+      filePush(file, obj, callback);
+    });
+  } else {
+    /**
+     * Sync Sass render
+     */
+    try {
+      filePush(file, sassModule.renderSync(opts), callback);
+    } catch (error) {
+      handleError(error, file, callback);
+    }
+  }
+});
+export default gulpSass;

package/lib/plugins/sass.js

@@ -1,24 +1,11 @@
-import fs from 'node:fs';
-import { pathToFileURL } from 'node:url';
-// Reference `gulp-sass@5.1.0`
+// Reference `gulp-sass@6.0.1`
 import { Transform } from 'node:stream';
-import semver from 'semver';
 import * as sass from 'sass';
 import replaceExtension from 'replace-ext';
 import stripAnsi from 'strip-ansi';
 import applySourceMap from 'vinyl-sourcemaps-apply';
 import ansiColors from 'ansi-colors';
-process.env.BALM_CWD = process.env.INIT_CWD || process.cwd();
-const localSassModule = node.path.join(process.env.BALM_CWD, 'node_modules', 'sass');
-let isLegacy = false;
-try {
-  const sassPkg = requireModule(node.path.join(localSassModule, 'package.json'));
-  isLegacy = semver.lt(sassPkg.version, '1.40.0');
-} catch (_) {}
-const nodeLocalSassModule = node.path.join(localSassModule, 'sass.node.js');
-const defaultLocalSassModule = node.path.join(localSassModule, 'sass.default.js'); // For `npm i -D sass <= 1.62.1`
-const dartLocalSassModule = node.path.join(localSassModule, 'sass.dart.js'); // For `npm i -D sass <= 1.39.2`
-const sassModule = fs.existsSync(nodeLocalSassModule) ? requireModule(nodeLocalSassModule) : fs.existsSync(defaultLocalSassModule) ? requireModule(defaultLocalSassModule) : fs.existsSync(dartLocalSassModule) ? requireModule(dartLocalSassModule) : sass;
+const sassModule = node.getSassModule(sass);
 const PLUGIN_NAME = 'sass';
 const transformObj = transform => new Transform({
   transform,
@@ -29,48 +16,44 @@ const transformObj = transform => new Transform({
  * Handles returning the file to the stream
  */
 function filePush(file, result, callback) {
-  // Build Source Maps!
-  if (result.sourceMap) {
-    const sassMap = result.sourceMap;
-    // Replace the map file with the original filename (but new extension)
-    sassMap.file = replaceExtension(file.relative, '.css');
-    // Apply the map
-    applySourceMap(file, sassMap);
-  }
   file.contents = Buffer.from(result.css);
   file.path = replaceExtension(file.path, '.css');
-  if (file.stat) {
-    file.stat.atime = file.stat.mtime = file.stat.ctime = new Date();
-  }
-  callback(null, file);
-}
-function legacyFilePush(file, sassObject, callback) {
+
   // Build Source Maps!
-  if (sassObject.map) {
-    // Transform map into JSON
-    const sassMap = JSON.parse(sassObject.map.toString());
-    // Grab the stdout and transform it into stdin
-    const sassMapFile = sassMap.file.replace(/^stdout$/, 'stdin');
-    // Grab the base filename that's being worked on
-    const sassFileSrc = file.relative;
-    // Grab the path portion of the file that's being worked on
-    const sassFileSrcPath = node.path.dirname(sassFileSrc);
-    if (sassFileSrcPath) {
-      const sourceFileIndex = sassMap.sources.indexOf(sassMapFile);
-      // Prepend the path to all files in the sources array except the file that's being worked on
-      sassMap.sources = sassMap.sources.map((source, index) => index === sourceFileIndex ? source : node.path.join(sassFileSrcPath, source));
+  if (result.sourceMap) {
+    const proto = /^file:\/\/?/;
+    const leadingSlash = /^\//;
+    const sassMap = result.sourceMap;
+    const base = node.path.resolve(file.cwd, file.base);
+    if (!sassMap.file) {
+      // Convert from absolute path to relative as in gulp-sass 5.0.0
+      sassMap.file = file.history[0].replace(base + node.path.sep, '').replace(proto, '');
     }
 
-    // Remove 'stdin' from sources and replace with filenames!
-    sassMap.sources = sassMap.sources.filter(src => src !== 'stdin' && src);
+    // Transform to relative file paths as in gulp-sass 5.0.0
+    sassMap.sources = sassMap.sources.map(src => {
+      // file uses Windows-style path separators, source is a URL.
+      const baseUri = base.replace(/\\/g, '/');
+      // The current file and its content is included
+      // as data:<encoded file contents> in the new Sass JS API.
+      // Map it to the original file name (first history entry).
+      if (src.startsWith('data:')) {
+        return file.history[0].replace(/\\/g, '/').replace(`${baseUri}/`, '').replace(proto, '').replace(leadingSlash, '');
+      }
+      return src.replace(proto, '').replace(`${baseUri}/`, '').replace(leadingSlash, '');
+    });
 
+    // Grab the base filename that's being worked on
+    const sassFileSrc = file.relative;
     // Replace the map file with the original filename (but new extension)
     sassMap.file = replaceExtension(sassFileSrc, '.css');
+    if (file.sourceMap && file.sourceMap.sourcesContent && !sassMap.sourcesContent) {
+      sassMap.sourcesContent = file.sourceMap.sourcesContent;
+    }
+
     // Apply the map
     applySourceMap(file, sassMap);
   }
-  file.contents = sassObject.css;
-  file.path = replaceExtension(file.path, '.css');
   if (file.stat) {
     file.stat.atime = file.stat.mtime = file.stat.ctime = new Date();
   }
@@ -81,26 +64,17 @@ function legacyFilePush(file, sassObject, callback) {
  * Handles error message
  */
 function handleError(error, file, callback) {
-  const relativePath = node.path.relative(process.cwd(), file.path);
-  const message = `${ansiColors.underline(relativePath)}\n${error.message}`;
-  error.message = stripAnsi(message);
-  return callback(new PluginError(PLUGIN_NAME, error));
-}
-function legacyHandleError(error, file, callback) {
   const filePath = (error.file === 'stdin' ? file.path : error.file) || file.path;
   const relativePath = node.path.relative(process.cwd(), filePath);
-  const message = `${ansiColors.underline(relativePath)}\n${error.formatted}`;
-  error.messageFormatted = message;
-  error.messageOriginal = error.message;
+  const message = `${ansiColors.underline(relativePath)}\n${error.message}`;
   error.message = stripAnsi(message);
-  error.relativePath = relativePath;
   return callback(new PluginError(PLUGIN_NAME, error));
 }
 
 //////////////////////////////
 // Main Gulp Sass function
 //////////////////////////////
-const gulpSass = options => transformObj((file, encoding, callback) => {
+const gulpSass = (options, sync = false) => transformObj((file, encoding, callback) => {
   if (file.isNull()) {
     return callback(null, file);
   }
@@ -115,79 +89,46 @@ const gulpSass = options => transformObj((file, encoding, callback) => {
     return callback(null, file);
   }
   const opts = options || {};
-  if (isLegacy) {
-    opts.data = file.contents.toString();
-
-    // We set the file path here so that libsass can correctly resolve import paths
-    opts.file = file.path;
-
-    // Ensure `indentedSyntax` is true if a `.sass` file
-    if (node.path.extname(file.path) === '.sass') {
-      opts.indentedSyntax = true;
-    }
 
-    // Ensure file's parent directory in the include path
-    if (opts.includePaths) {
-      if (typeof opts.includePaths === 'string') {
-        opts.includePaths = [opts.includePaths];
-      }
-    } else {
-      opts.includePaths = [];
-    }
-    opts.includePaths.unshift(node.path.dirname(file.path));
+  // Ensure `indented` if a `.sass` file
+  if (node.path.extname(file.path) === '.sass') {
+    opts.syntax = 'indented';
+  }
 
-    // Generate Source Maps if the source-map plugin is present
-    if (file.sourceMap) {
-      opts.sourceMap = file.path;
-      opts.omitSourceMapUrl = true;
-      opts.sourceMapContents = true;
+  // Ensure file's parent directory in the include path
+  if (opts.loadPaths) {
+    if (typeof opts.loadPaths === 'string') {
+      opts.loadPaths = [opts.loadPaths];
     }
+  } else {
+    opts.loadPaths = [];
+  }
+  opts.loadPaths.unshift(node.path.dirname(file.path));
 
-    // Create alias
-    if (!opts.importer) {
-      const aliasKeys = Object.keys(BalmJS.config.scripts.alias).filter(key => /^@[a-z0-9-]{1,213}/.test(key));
-      if (aliasKeys.length) {
-        const aliasKeyRegex = new RegExp(`^(${aliasKeys.join('|')})/`);
-        opts.importer = [function (url) {
-          let file = url;
-          const result = url.match(aliasKeyRegex);
-          const key = result ? result[1] : null;
-          if (key) {
-            file = url.replace(key, BalmJS.config.scripts.alias[key]);
-            BalmJS.logger.debug(`${PLUGIN_NAME} alias`, `${key} -> ${url} => ${file}`);
-          }
-          return {
-            file
-          };
-        }];
-      }
-    }
+  // Generate Source Maps if the source-map plugin is present
+  if (file.sourceMap) {
+    opts.sourceMap = true;
+    opts.sourceMapIncludeSources = true;
+  }
+  const fileContents = file.contents.toString();
+  if (sync !== true) {
+    /**
+     * Async Sass compile
+     */
+    sassModule.compileStringAsync(fileContents, opts).then(compileResult => {
+      filePush(file, compileResult, callback);
+    }).catch(error => {
+      handleError(error, file, callback);
+    });
   } else {
-    // Create alias
-    if (!options.importers) {
-      const aliasKeys = Object.keys(BalmJS.config.scripts.alias).filter(key => /^@[a-z0-9-]{1,213}/.test(key));
-      if (aliasKeys.length) {
-        const aliasKeyRegex = new RegExp(`^(${aliasKeys.join('|')})/`);
-        options.importers = [{
-          findFileUrl(url) {
-            let file = url;
-            const result = url.match(aliasKeyRegex);
-            const key = result ? result[1] : null;
-            if (key) {
-              file = url.replace(key, BalmJS.config.scripts.alias[key]);
-              BalmJS.logger.debug(`${PLUGIN_NAME} alias`, `${key} -> ${url} => ${file}`);
-            }
-            return pathToFileURL(file);
-          }
-        }];
-      }
+    /**
+     * Sync Sass compile
+     */
+    try {
+      filePush(file, sassModule.compileString(fileContents, opts), callback);
+    } catch (error) {
+      handleError(error, file, callback);
     }
   }
-  try {
-    isLegacy ? legacyFilePush(file, sassModule.renderSync(opts), callback) : filePush(file, sassModule.compile(file.path, options), callback);
-  } catch (error) {
-    isLegacy ? legacyHandleError(error, file, callback) : handleError(error, file, callback);
-  }
 });
-export default gulpSass;
-export { isLegacy };
+export default gulpSass;

package/lib/tasks/foundation/balm_style.js

@@ -46,7 +46,7 @@ class BalmStyleTask extends BalmTask {
     }));
     switch (style) {
       case 'sass':
-        stream = stream.pipe(BalmJS.plugins.sass(options));
+        stream = stream.pipe(node.isLegacySass ? BalmJS.plugins.legacySass(options) : BalmJS.plugins.sass(options));
         break;
       case 'less':
         stream = stream.pipe(BalmJS.plugins.less(options));

package/lib/tasks/public/sass.js

@@ -1,10 +1,9 @@
-import { isLegacy } from '../../plugins/sass.js';
 class SassTask extends BalmJS.BalmStyleTask {
   constructor() {
     super('sass');
   }
   get options() {
-    return Object.assign(isLegacy ? {
+    return Object.assign(node.isLegacySass ? {
       includePaths: BalmJS.file.stylePaths,
       outputStyle: 'expanded'
     } : {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "balm-core",
-  "version": "4.31.0",
+  "version": "4.33.0",
   "description": "BalmJS compiler core",
   "keywords": [
     "balm",
@@ -44,17 +44,17 @@
     "@rollup/plugin-terser": "^0.4.4",
     "ansi-colors": "^4.1.3",
     "async": "^3.2.6",
-    "autoprefixer": "^10.4.20",
-    "babel-loader": "^9.2.1",
-    "browser-sync": "^3.0.3",
+    "autoprefixer": "^10.4.21",
+    "babel-loader": "^10.0.0",
+    "browser-sync": "^3.0.4",
     "connect-history-api-fallback": "^2.0.0",
     "css-loader": "^7.1.2",
-    "css-minimizer-webpack-plugin": "^7.0.0",
-    "cssnano": "^7.0.6",
+    "css-minimizer-webpack-plugin": "^7.0.2",
+    "cssnano": "^7.1.1",
     "del": "^8.0.0",
-    "dotenv": "^16.4.5",
-    "dotenv-expand": "^11.0.6",
-    "esbuild": "^0.24.0",
+    "dotenv": "^17.2.2",
+    "dotenv-expand": "^12.0.3",
+    "esbuild": "^0.25.10",
     "fancy-log": "^2.0.0",
     "gulp-eslint": "^6.0.0",
     "gulp-if": "^3.0.0",
@@ -63,45 +63,45 @@
     "gulp-rev-delete-original": "^0.2.3",
     "gulp-size": "^5.0.0",
     "gulp-useref": "^5.0.0",
-    "gulp-zip": "^6.0.0",
+    "gulp-zip": "^6.1.0",
     "gulp.spritesmith": "^6.13.1",
     "html-loader": "^5.1.0",
     "html-minifier": "^4.0.0",
-    "html-webpack-plugin": "^5.6.3",
-    "http-proxy-middleware": "^3.0.3",
-    "imagemin": "^9.0.0",
+    "html-webpack-plugin": "^5.6.4",
+    "http-proxy-middleware": "^3.0.5",
+    "imagemin": "^9.0.1",
     "istextorbinary": "^9.5.0",
-    "less": "^4.2.0",
-    "mini-css-extract-plugin": "^2.9.2",
+    "less": "^4.4.1",
+    "mini-css-extract-plugin": "^2.9.4",
     "modernizr": "^3.13.1",
     "parents": "^1.0.1",
     "plugin-error": "^2.0.1",
-    "postcss": "^8.4.48",
+    "postcss": "^8.5.6",
     "postcss-flexbugs-fixes": "^5.0.2",
-    "postcss-import": "^16.1.0",
+    "postcss-import": "^16.1.1",
     "postcss-load-config": "^6.0.1",
-    "postcss-loader": "^8.1.1",
-    "postcss-preset-env": "^10.0.9",
-    "pretty-bytes": "^6.1.1",
-    "readable-stream": "^4.5.2",
+    "postcss-loader": "^8.2.0",
+    "postcss-preset-env": "^10.3.1",
+    "pretty-bytes": "^7.0.1",
+    "readable-stream": "^4.7.0",
     "replace-ext": "^2.0.0",
-    "rollup": "^4.25.0",
-    "sass": "^1.80.6",
-    "sass-loader": "^16.0.3",
-    "semver": "^7.6.3",
-    "ssh2": "^1.16.0",
-    "strip-ansi": "^7.1.0",
+    "rollup": "^4.50.2",
+    "sass": "^1.92.1",
+    "sass-loader": "^16.0.5",
+    "semver": "^7.7.2",
+    "ssh2": "^1.17.0",
+    "strip-ansi": "^7.1.2",
     "style-loader": "^4.0.0",
-    "tailwindcss": "^3.4.14",
-    "terser": "^5.36.0",
-    "terser-webpack-plugin": "^5.3.10",
+    "tailwindcss": "^4.1.13",
+    "terser": "^5.44.0",
+    "terser-webpack-plugin": "^5.3.14",
     "through2": "^4.0.2",
     "through2-concurrent": "^2.0.0",
     "tslib": "^2.8.1",
     "vinyl-sourcemaps-apply": "^0.2.1",
-    "webpack": "^5.96.1",
+    "webpack": "^5.101.3",
     "webpack-bundle-analyzer": "^4.10.2",
-    "webpack-dev-middleware": "^7.4.2",
+    "webpack-dev-middleware": "^7.4.3",
     "webpack-hot-middleware": "^2.26.1",
     "webpack-merge": "^6.0.1",
     "workbox-build": "^7.3.0"
@@ -129,7 +129,7 @@
     "imagemin-svgo": "^9.0.0"
   },
   "engines": {
-    "node": ">=18.12.0"
+    "node": "^20.10.0 || >=22.0.0"
   },
-  "gitHead": "521b594f027ef38e58fbe73b8fcee670082e4b03"
+  "gitHead": "c947ae1b5d1e83cabaa4a6737a9532fcab42503a"
 }

package/tslib/config/globals.js

@@ -4,8 +4,26 @@ import colors from 'ansi-colors';
 import { create } from 'browser-sync';
 import through2 from 'through2';
 import PluginError from 'plugin-error';
+import semver from 'semver';
 process.env.BALM_CWD = process.env.INIT_CWD || process.cwd();
 const gulpModule = path.join(process.env.BALM_ROOT || process.env.BALM_CWD, 'node_modules', 'gulp', 'index.js');
+const localSassModule = path.join(process.env.BALM_CWD, 'node_modules', 'sass');
+let isLegacySass = false;
+try {
+    const sassPkg = requireModule(path.join(localSassModule, 'package.json'));
+    isLegacySass = semver.lt(sassPkg.version, '1.40.0');
+}
+catch (_) { }
+const nodeLocalSassModule = path.join(localSassModule, 'sass.node.js');
+const defaultLocalSassModule = path.join(localSassModule, 'sass.default.js');
+const dartLocalSassModule = path.join(localSassModule, 'sass.dart.js');
+const getSassModule = (sass) => fs.existsSync(nodeLocalSassModule)
+    ? requireModule(nodeLocalSassModule)
+    : fs.existsSync(defaultLocalSassModule)
+        ? requireModule(defaultLocalSassModule)
+        : fs.existsSync(dartLocalSassModule)
+            ? requireModule(dartLocalSassModule)
+            : sass;
 if (fs.existsSync(gulpModule)) {
     if (process.cwd() !== process.env.BALM_CWD) {
         process.chdir(process.env.BALM_CWD);
@@ -19,7 +37,9 @@ else {
 }
 global.node = {
     path,
-    fs
+    fs,
+    isLegacySass,
+    getSassModule
 };
 global.server = create();
 global.through2 = through2;

package/tslib/plugins/imagemin.js

@@ -55,7 +55,7 @@ function gulpImagemin(customPlugins) {
                     totalFiles++;
                 }
                 BalmJS.logger.debug(PLUGIN_NAME, `${file.relative} (${message})`);
-                file.contents = data;
+                file.contents = Buffer.from(data);
                 callback(null, file);
             }
             catch (error) {

package/tslib/plugins/index.js

@@ -8,6 +8,7 @@ import postcssPlugins from './postcss-plugins.js';
 import rename from './rename.js';
 import replace from './replace.js';
 import sass from './sass.js';
+import legacySass from './sass-legacy.js';
 import sftp from './sftp.js';
 const plugins = {
     htmlmin,
@@ -20,6 +21,7 @@ const plugins = {
     rename,
     replace,
     sass,
+    legacySass,
     sftp
 };
 BalmJS.plugins = plugins;

package/tslib/plugins/sass-legacy.js

@@ -0,0 +1,95 @@
+import { Transform } from 'node:stream';
+import * as sass from 'sass';
+import replaceExtension from 'replace-ext';
+import stripAnsi from 'strip-ansi';
+import applySourceMap from 'vinyl-sourcemaps-apply';
+import ansiColors from 'ansi-colors';
+const sassModule = node.getSassModule(sass);
+const PLUGIN_NAME = 'sass-legacy';
+const transformObj = (transform) => new Transform({ transform, objectMode: true });
+function filePush(file, sassObject, callback) {
+    if (sassObject.map) {
+        const sassMap = JSON.parse(sassObject.map.toString());
+        const sassMapFile = sassMap.file.replace(/^stdout$/, 'stdin');
+        const sassFileSrc = file.relative;
+        const sassFileSrcPath = node.path.dirname(sassFileSrc);
+        if (sassFileSrcPath) {
+            const sourceFileIndex = sassMap.sources.indexOf(sassMapFile);
+            sassMap.sources = sassMap.sources.map((source, index) => index === sourceFileIndex
+                ? source
+                : node.path.join(sassFileSrcPath, source));
+        }
+        sassMap.sources = sassMap.sources.filter((src) => src !== 'stdin' && src);
+        sassMap.file = replaceExtension(sassFileSrc, '.css');
+        applySourceMap(file, sassMap);
+    }
+    file.contents = sassObject.css;
+    file.path = replaceExtension(file.path, '.css');
+    if (file.stat) {
+        file.stat.atime = file.stat.mtime = file.stat.ctime = new Date();
+    }
+    callback(null, file);
+}
+function handleError(error, file, callback) {
+    const filePath = (error.file === 'stdin' ? file.path : error.file) || file.path;
+    const relativePath = node.path.relative(process.cwd(), filePath);
+    const message = `${ansiColors.underline(relativePath)}\n${error.formatted}`;
+    error.messageFormatted = message;
+    error.messageOriginal = error.message;
+    error.message = stripAnsi(message);
+    error.relativePath = relativePath;
+    return callback(new PluginError(PLUGIN_NAME, error));
+}
+const gulpSass = (options, sync = false) => transformObj((file, encoding, callback) => {
+    if (file.isNull()) {
+        return callback(null, file);
+    }
+    if (file.isStream()) {
+        return callback(new PluginError(PLUGIN_NAME, 'Streaming not supported'));
+    }
+    if (node.path.basename(file.path).startsWith('_')) {
+        return callback();
+    }
+    if (!file.contents.length) {
+        file.path = replaceExtension(file.path, '.css');
+        return callback(null, file);
+    }
+    const opts = (options || {});
+    opts.data = file.contents.toString();
+    opts.file = file.path;
+    if (node.path.extname(file.path) === '.sass') {
+        opts.indentedSyntax = true;
+    }
+    if (opts.includePaths) {
+        if (typeof opts.includePaths === 'string') {
+            opts.includePaths = [opts.includePaths];
+        }
+    }
+    else {
+        opts.includePaths = [];
+    }
+    opts.includePaths.unshift(node.path.dirname(file.path));
+    if (file.sourceMap) {
+        opts.sourceMap = file.path;
+        opts.omitSourceMapUrl = true;
+        opts.sourceMapContents = true;
+    }
+    if (sync !== true) {
+        sassModule.render(opts, (error, obj) => {
+            if (error) {
+                handleError(error, file, callback);
+                return;
+            }
+            filePush(file, obj, callback);
+        });
+    }
+    else {
+        try {
+            filePush(file, sassModule.renderSync(opts), callback);
+        }
+        catch (error) {
+            handleError(error, file, callback);
+        }
+    }
+});
+export default gulpSass;

package/tslib/plugins/sass.js

@@ -1,86 +1,61 @@
-import fs from 'node:fs';
-import { pathToFileURL } from 'node:url';
 import { Transform } from 'node:stream';
-import semver from 'semver';
 import * as sass from 'sass';
 import replaceExtension from 'replace-ext';
 import stripAnsi from 'strip-ansi';
 import applySourceMap from 'vinyl-sourcemaps-apply';
 import ansiColors from 'ansi-colors';
-process.env.BALM_CWD = process.env.INIT_CWD || process.cwd();
-const localSassModule = node.path.join(process.env.BALM_CWD, 'node_modules', 'sass');
-let isLegacy = false;
-try {
-    const sassPkg = requireModule(node.path.join(localSassModule, 'package.json'));
-    isLegacy = semver.lt(sassPkg.version, '1.40.0');
-}
-catch (_) { }
-const nodeLocalSassModule = node.path.join(localSassModule, 'sass.node.js');
-const defaultLocalSassModule = node.path.join(localSassModule, 'sass.default.js');
-const dartLocalSassModule = node.path.join(localSassModule, 'sass.dart.js');
-const sassModule = fs.existsSync(nodeLocalSassModule)
-    ? requireModule(nodeLocalSassModule)
-    : fs.existsSync(defaultLocalSassModule)
-        ? requireModule(defaultLocalSassModule)
-        : fs.existsSync(dartLocalSassModule)
-            ? requireModule(dartLocalSassModule)
-            : sass;
+const sassModule = node.getSassModule(sass);
 const PLUGIN_NAME = 'sass';
 const transformObj = (transform) => new Transform({ transform, objectMode: true });
 function filePush(file, result, callback) {
-    if (result.sourceMap) {
-        const sassMap = result.sourceMap;
-        sassMap.file = replaceExtension(file.relative, '.css');
-        applySourceMap(file, sassMap);
-    }
     file.contents = Buffer.from(result.css);
     file.path = replaceExtension(file.path, '.css');
-    if (file.stat) {
-        file.stat.atime = file.stat.mtime = file.stat.ctime = new Date();
-    }
-    callback(null, file);
-}
-function legacyFilePush(file, sassObject, callback) {
-    if (sassObject.map) {
-        const sassMap = JSON.parse(sassObject.map.toString());
-        const sassMapFile = sassMap.file.replace(/^stdout$/, 'stdin');
-        const sassFileSrc = file.relative;
-        const sassFileSrcPath = node.path.dirname(sassFileSrc);
-        if (sassFileSrcPath) {
-            const sourceFileIndex = sassMap.sources.indexOf(sassMapFile);
-            sassMap.sources = sassMap.sources.map((source, index) => index === sourceFileIndex
-                ? source
-                : node.path.join(sassFileSrcPath, source));
+    if (result.sourceMap) {
+        const proto = /^file:\/\/?/;
+        const leadingSlash = /^\//;
+        const sassMap = result.sourceMap;
+        const base = node.path.resolve(file.cwd, file.base);
+        if (!sassMap.file) {
+            sassMap.file = file.history[0]
+                .replace(base + node.path.sep, '')
+                .replace(proto, '');
         }
-        sassMap.sources = sassMap.sources.filter((src) => src !== 'stdin' && src);
+        sassMap.sources = sassMap.sources.map((src) => {
+            const baseUri = base.replace(/\\/g, '/');
+            if (src.startsWith('data:')) {
+                return file.history[0]
+                    .replace(/\\/g, '/')
+                    .replace(`${baseUri}/`, '')
+                    .replace(proto, '')
+                    .replace(leadingSlash, '');
+            }
+            return src
+                .replace(proto, '')
+                .replace(`${baseUri}/`, '')
+                .replace(leadingSlash, '');
+        });
+        const sassFileSrc = file.relative;
         sassMap.file = replaceExtension(sassFileSrc, '.css');
+        if (file.sourceMap &&
+            file.sourceMap.sourcesContent &&
+            !sassMap.sourcesContent) {
+            sassMap.sourcesContent = file.sourceMap.sourcesContent;
+        }
         applySourceMap(file, sassMap);
     }
-    file.contents = sassObject.css;
-    file.path = replaceExtension(file.path, '.css');
     if (file.stat) {
         file.stat.atime = file.stat.mtime = file.stat.ctime = new Date();
     }
     callback(null, file);
 }
 function handleError(error, file, callback) {
-    const relativePath = node.path.relative(process.cwd(), file.path);
-    const message = `${ansiColors.underline(relativePath)}\n${error.message}`;
-    error.message = stripAnsi(message);
-    return callback(new PluginError(PLUGIN_NAME, error));
-}
-function legacyHandleError(error, file, callback) {
-    const filePath = ((error.file === 'stdin' ? file.path : error.file) ||
-        file.path);
+    const filePath = (error.file === 'stdin' ? file.path : error.file) || file.path;
     const relativePath = node.path.relative(process.cwd(), filePath);
-    const message = `${ansiColors.underline(relativePath)}\n${error.formatted}`;
-    error.messageFormatted = message;
-    error.messageOriginal = error.message;
+    const message = `${ansiColors.underline(relativePath)}\n${error.message}`;
     error.message = stripAnsi(message);
-    error.relativePath = relativePath;
     return callback(new PluginError(PLUGIN_NAME, error));
 }
-const gulpSass = (options) => transformObj((file, encoding, callback) => {
+const gulpSass = (options, sync = false) => transformObj((file, encoding, callback) => {
     if (file.isNull()) {
         return callback(null, file);
     }
@@ -95,77 +70,40 @@ const gulpSass = (options) => transformObj((file, encoding, callback) => {
         return callback(null, file);
     }
     const opts = (options || {});
-    if (isLegacy) {
-        opts.data = file.contents.toString();
-        opts.file = file.path;
-        if (node.path.extname(file.path) === '.sass') {
-            opts.indentedSyntax = true;
-        }
-        if (opts.includePaths) {
-            if (typeof opts.includePaths === 'string') {
-                opts.includePaths = [opts.includePaths];
-            }
-        }
-        else {
-            opts.includePaths = [];
-        }
-        opts.includePaths.unshift(node.path.dirname(file.path));
-        if (file.sourceMap) {
-            opts.sourceMap = file.path;
-            opts.omitSourceMapUrl = true;
-            opts.sourceMapContents = true;
-        }
-        if (!opts.importer) {
-            const aliasKeys = Object.keys(BalmJS.config.scripts.alias).filter((key) => /^@[a-z0-9-]{1,213}/.test(key));
-            if (aliasKeys.length) {
-                const aliasKeyRegex = new RegExp(`^(${aliasKeys.join('|')})/`);
-                opts.importer = [
-                    function (url) {
-                        let file = url;
-                        const result = url.match(aliasKeyRegex);
-                        const key = result ? result[1] : null;
-                        if (key) {
-                            file = url.replace(key, BalmJS.config.scripts.alias[key]);
-                            BalmJS.logger.debug(`${PLUGIN_NAME} alias`, `${key} -> ${url} => ${file}`);
-                        }
-                        return { file };
-                    }
-                ];
-            }
+    if (node.path.extname(file.path) === '.sass') {
+        opts.syntax = 'indented';
+    }
+    if (opts.loadPaths) {
+        if (typeof opts.loadPaths === 'string') {
+            opts.loadPaths = [opts.loadPaths];
         }
     }
     else {
-        if (!options.importers) {
-            const aliasKeys = Object.keys(BalmJS.config.scripts.alias).filter((key) => /^@[a-z0-9-]{1,213}/.test(key));
-            if (aliasKeys.length) {
-                const aliasKeyRegex = new RegExp(`^(${aliasKeys.join('|')})/`);
-                options.importers = [
-                    {
-                        findFileUrl(url) {
-                            let file = url;
-                            const result = url.match(aliasKeyRegex);
-                            const key = result ? result[1] : null;
-                            if (key) {
-                                file = url.replace(key, BalmJS.config.scripts.alias[key]);
-                                BalmJS.logger.debug(`${PLUGIN_NAME} alias`, `${key} -> ${url} => ${file}`);
-                            }
-                            return pathToFileURL(file);
-                        }
-                    }
-                ];
-            }
-        }
+        opts.loadPaths = [];
     }
-    try {
-        isLegacy
-            ? legacyFilePush(file, sassModule.renderSync(opts), callback)
-            : filePush(file, sassModule.compile(file.path, options), callback);
+    opts.loadPaths.unshift(node.path.dirname(file.path));
+    if (file.sourceMap) {
+        opts.sourceMap = true;
+        opts.sourceMapIncludeSources = true;
     }
-    catch (error) {
-        isLegacy
-            ? legacyHandleError(error, file, callback)
-            : handleError(error, file, callback);
+    const fileContents = file.contents.toString();
+    if (sync !== true) {
+        sassModule
+            .compileStringAsync(fileContents, opts)
+            .then((compileResult) => {
+            filePush(file, compileResult, callback);
+        })
+            .catch((error) => {
+            handleError(error, file, callback);
+        });
+    }
+    else {
+        try {
+            filePush(file, sassModule.compileString(fileContents, opts), callback);
+        }
+        catch (error) {
+            handleError(error, file, callback);
+        }
     }
 });
 export default gulpSass;
-export { isLegacy };

package/tslib/tasks/foundation/balm_style.js

@@ -47,7 +47,9 @@ class BalmStyleTask extends BalmTask {
         }));
         switch (style) {
             case 'sass':
-                stream = stream.pipe(BalmJS.plugins.sass(options));
+                stream = stream.pipe(node.isLegacySass
+                    ? BalmJS.plugins.legacySass(options)
+                    : BalmJS.plugins.sass(options));
                 break;
             case 'less':
                 stream = stream.pipe(BalmJS.plugins.less(options));

package/tslib/tasks/public/sass.js

@@ -1,10 +1,9 @@
-import { isLegacy } from '../../plugins/sass.js';
 class SassTask extends BalmJS.BalmStyleTask {
     constructor() {
         super('sass');
     }
     get options() {
-        return Object.assign(isLegacy
+        return Object.assign(node.isLegacySass
             ? {
                 includePaths: BalmJS.file.stylePaths,
                 outputStyle: 'expanded'