@parcel/transformer-sass 2.12.0 → 2.13.1

package/lib/SassTransformer.js

@@ -18,20 +18,6 @@ function _path() {
   };
   return data;
 }
-function _os() {
-  const data = require("os");
-  _os = function () {
-    return data;
-  };
-  return data;
-}
-function _sourceMap() {
-  const data = _interopRequireDefault(require("@parcel/source-map"));
-  _sourceMap = function () {
-    return data;
-  };
-  return data;
-}
 function _sass() {
   const data = _interopRequireDefault(require("sass"));
   _sass = function () {
@@ -39,16 +25,9 @@ function _sass() {
   };
   return data;
 }
-function _util() {
-  const data = require("util");
-  _util = function () {
-    return data;
-  };
-  return data;
-}
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-// E.g: ~library/file.sass
-const NODE_MODULE_ALIAS_RE = /^~[^/\\]/;
+var _legacy = require("./legacy");
+var _modern = require("./modern");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var _default = exports.default = new (_plugin().Transformer)({
   async loadConfig({
     config,
@@ -65,157 +44,79 @@ var _default = exports.default = new (_plugin().Transformer)({
     if (typeof configResult === 'string') {
       configResult = {};
     }
+    let version = detectVersion(configResult);
+    if (version === 'legacy') {
+      // Resolve relative paths from config file
+      if (configFile && configResult.includePaths) {
+        configResult.includePaths = configResult.includePaths.map(p => _path().default.resolve(_path().default.dirname(configFile.filePath), p));
+      }
+      if (configResult.importer === undefined) {
+        configResult.importer = [];
+      } else if (!Array.isArray(configResult.importer)) {
+        configResult.importer = [configResult.importer];
+      }
 
-    // Resolve relative paths from config file
-    if (configFile && configResult.includePaths) {
-      configResult.includePaths = configResult.includePaths.map(p => _path().default.resolve(_path().default.dirname(configFile.filePath), p));
-    }
-    if (configResult.importer === undefined) {
-      configResult.importer = [];
-    } else if (!Array.isArray(configResult.importer)) {
-      configResult.importer = [configResult.importer];
-    }
+      // Always emit sourcemap
+      configResult.sourceMap = true;
+      // sources are created relative to the directory of outFile
+      configResult.outFile = _path().default.join(options.projectRoot, 'style.css.map');
+      configResult.omitSourceMapUrl = true;
+      configResult.sourceMapContents = false;
+    } else if (version === 'modern') {
+      // Resolve relative paths from config file
+      if (configFile && configResult.loadPaths) {
+        configResult.loadPaths = configResult.loadPaths.map(p => _path().default.resolve(_path().default.dirname(configFile.filePath), p));
+      }
 
-    // Always emit sourcemap
-    configResult.sourceMap = true;
-    // sources are created relative to the directory of outFile
-    configResult.outFile = _path().default.join(options.projectRoot, 'style.css.map');
-    configResult.omitSourceMapUrl = true;
-    configResult.sourceMapContents = false;
-    return configResult;
+      // Always emit sourcemap
+      configResult.sourceMap = true;
+    }
+    return {
+      version,
+      config: configResult
+    };
   },
   async transform({
     asset,
     options,
-    config,
+    config: {
+      version,
+      config
+    },
     resolve
   }) {
-    let rawConfig = config !== null && config !== void 0 ? config : {};
-    let sassRender = (0, _util().promisify)(_sass().default.render.bind(_sass().default));
-    let css;
-    try {
-      let code = await asset.getCode();
-      let result = await sassRender({
-        ...rawConfig,
-        file: asset.filePath,
-        data: rawConfig.data ? rawConfig.data + _os().EOL + code : code,
-        importer: [...rawConfig.importer, resolvePathImporter({
-          asset,
-          resolve,
-          includePaths: rawConfig.includePaths,
-          options
-        })],
-        indentedSyntax: typeof rawConfig.indentedSyntax === 'boolean' ? rawConfig.indentedSyntax : asset.type === 'sass'
-      });
-      css = result.css;
-      for (let included of result.stats.includedFiles) {
-        if (included !== asset.filePath) {
-          asset.invalidateOnFileChange(included);
-        }
-      }
-      if (result.map != null) {
-        let map = new (_sourceMap().default)(options.projectRoot);
-        map.addVLQMap(JSON.parse(result.map));
-        asset.setMap(map);
-      }
-    } catch (err) {
-      // Adapt the Error object for the reporter.
-      err.fileName = err.file;
-      err.loc = {
-        line: err.line,
-        column: err.column
-      };
-      throw err;
+    if (version === 'legacy') {
+      await (0, _legacy.transformLegacy)(asset, config, resolve, options);
+    } else {
+      await (0, _modern.transformModern)(asset, config, resolve, options);
     }
-    asset.type = 'css';
-    asset.setCode(css);
     return [asset];
   }
 });
-function resolvePathImporter({
-  asset,
-  resolve,
-  includePaths,
-  options
-}) {
-  // This is a reimplementation of the Sass resolution algorithm that uses Parcel's
-  // FS and tracks all tried files so they are watched for creation.
-  async function resolvePath(url, prev) {
-    /*
-      Imports are resolved by trying, in order:
-        * Loading a file relative to the file in which the `@import` appeared.
-        * Each custom importer.
-        * Loading a file relative to the current working directory (This rule doesn't really make sense for Parcel).
-        * Each load path in `includePaths`
-        * Each load path specified in the `SASS_PATH` environment variable, which should be semicolon-separated on Windows and colon-separated elsewhere.
-       See: https://sass-lang.com/documentation/js-api#importer
-      See also: https://github.com/sass/dart-sass/blob/006e6aa62f2417b5267ad5cdb5ba050226fab511/lib/src/importer/node/implementation.dart
-    */
-
-    let paths = [_path().default.dirname(prev)];
-    if (includePaths) {
-      paths.push(...includePaths);
-    }
-    asset.invalidateOnEnvChange('SASS_PATH');
-    if (options.env.SASS_PATH) {
-      paths.push(...options.env.SASS_PATH.split(process.platform === 'win32' ? ';' : ':').map(p => _path().default.resolve(options.projectRoot, p)));
-    }
-    const urls = [url];
-    const urlFileName = _path().default.basename(url);
-    if (urlFileName[0] !== '_') {
-      urls.push(_path().default.join(_path().default.dirname(url), `_${urlFileName}`));
+function detectVersion(config) {
+  if (!_sass().default.compileStringAsync) {
+    return 'legacy';
+  }
+  for (let legacyOption of ['data', 'indentType', 'indentWidth', 'linefeed', 'outputStyle', 'importer', 'pkgImporter', 'includePaths', 'omitSourceMapUrl', 'outFile', 'sourceMapContents', 'sourceMapEmbed', 'sourceMapRoot']) {
+    if (config[legacyOption] != null) {
+      return 'legacy';
     }
-    if (url[0] !== '~') {
-      for (let p of paths) {
-        for (let u of urls) {
-          const filePath = _path().default.resolve(p, u);
-          try {
-            const contents = await asset.fs.readFile(filePath, 'utf8');
-            return {
-              filePath,
-              contents
-            };
-          } catch (err) {
-            asset.invalidateOnFileCreate({
-              filePath
-            });
-          }
-        }
-      }
+  }
+  for (let modernOption of ['loadPaths', 'sourceMapIncludeSources', 'style', 'importers']) {
+    if (config[modernOption] != null) {
+      return 'modern';
     }
-
-    // If none of the default sass rules apply, try Parcel's resolver.
-    for (let u of urls) {
-      if (NODE_MODULE_ALIAS_RE.test(u)) {
-        u = u.slice(1);
-      }
-      try {
-        const filePath = await resolve(prev, u, {
-          packageConditions: ['sass', 'style']
-        });
-        if (filePath) {
-          const contents = await asset.fs.readFile(filePath, 'utf8');
-          return {
-            filePath,
-            contents
-          };
-        }
-      } catch (err) {
-        continue;
+  }
+  if (typeof config.sourceMap === 'string') {
+    return 'legacy';
+  }
+  if (config.functions && typeof config.functions === 'object' && Object.keys(config.functions).length > 0) {
+    for (let key in config.functions) {
+      let fn = config.functions[key];
+      if (typeof fn === 'function' && fn.length > 1) {
+        return 'legacy';
       }
     }
   }
-  return function (rawUrl, prev, done) {
-    const url = rawUrl.replace(/^file:\/\//, '');
-    resolvePath(url, prev).then(resolved => {
-      if (resolved) {
-        done({
-          file: resolved.filePath,
-          contents: resolved.contents
-        });
-      } else {
-        done();
-      }
-    }).catch(done);
-  };
+  return 'modern';
 }

package/lib/legacy.js

@@ -0,0 +1,172 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.transformLegacy = transformLegacy;
+function _path() {
+  const data = _interopRequireDefault(require("path"));
+  _path = function () {
+    return data;
+  };
+  return data;
+}
+function _os() {
+  const data = require("os");
+  _os = function () {
+    return data;
+  };
+  return data;
+}
+function _sourceMap() {
+  const data = _interopRequireDefault(require("@parcel/source-map"));
+  _sourceMap = function () {
+    return data;
+  };
+  return data;
+}
+function _sass() {
+  const data = _interopRequireDefault(require("sass"));
+  _sass = function () {
+    return data;
+  };
+  return data;
+}
+function _util() {
+  const data = require("util");
+  _util = function () {
+    return data;
+  };
+  return data;
+}
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// E.g: ~library/file.sass
+const NODE_MODULE_ALIAS_RE = /^~[^/\\]/;
+async function transformLegacy(asset, config, resolve, options) {
+  let rawConfig = config ?? {};
+  let sassRender = (0, _util().promisify)(_sass().default.render.bind(_sass().default));
+  let css;
+  try {
+    let code = await asset.getCode();
+    let result = await sassRender({
+      ...rawConfig,
+      file: asset.filePath,
+      data: rawConfig.data ? rawConfig.data + _os().EOL + code : code,
+      importer: [...rawConfig.importer, resolvePathImporter({
+        asset,
+        resolve,
+        includePaths: rawConfig.includePaths,
+        options
+      })],
+      indentedSyntax: typeof rawConfig.indentedSyntax === 'boolean' ? rawConfig.indentedSyntax : asset.type === 'sass'
+    });
+    css = result.css;
+    for (let included of result.stats.includedFiles) {
+      if (included !== asset.filePath) {
+        asset.invalidateOnFileChange(included);
+      }
+    }
+    if (result.map != null) {
+      let map = new (_sourceMap().default)(options.projectRoot);
+      map.addVLQMap(JSON.parse(result.map));
+      asset.setMap(map);
+    }
+  } catch (err) {
+    // Adapt the Error object for the reporter.
+    err.fileName = err.file;
+    err.loc = {
+      line: err.line,
+      column: err.column
+    };
+    throw err;
+  }
+  asset.type = 'css';
+  asset.setCode(css);
+}
+function resolvePathImporter({
+  asset,
+  resolve,
+  includePaths,
+  options
+}) {
+  // This is a reimplementation of the Sass resolution algorithm that uses Parcel's
+  // FS and tracks all tried files so they are watched for creation.
+  async function resolvePath(url, prev) {
+    /*
+      Imports are resolved by trying, in order:
+        * Loading a file relative to the file in which the `@import` appeared.
+        * Each custom importer.
+        * Loading a file relative to the current working directory (This rule doesn't really make sense for Parcel).
+        * Each load path in `includePaths`
+        * Each load path specified in the `SASS_PATH` environment variable, which should be semicolon-separated on Windows and colon-separated elsewhere.
+       See: https://sass-lang.com/documentation/js-api#importer
+      See also: https://github.com/sass/dart-sass/blob/006e6aa62f2417b5267ad5cdb5ba050226fab511/lib/src/importer/node/implementation.dart
+    */
+
+    let paths = [_path().default.dirname(prev)];
+    if (includePaths) {
+      paths.push(...includePaths);
+    }
+    asset.invalidateOnEnvChange('SASS_PATH');
+    if (options.env.SASS_PATH) {
+      paths.push(...options.env.SASS_PATH.split(process.platform === 'win32' ? ';' : ':').map(p => _path().default.resolve(options.projectRoot, p)));
+    }
+    const urls = [url];
+    const urlFileName = _path().default.basename(url);
+    if (urlFileName[0] !== '_') {
+      urls.push(_path().default.join(_path().default.dirname(url), `_${urlFileName}`));
+    }
+    if (url[0] !== '~') {
+      for (let p of paths) {
+        for (let u of urls) {
+          const filePath = _path().default.resolve(p, u);
+          try {
+            const contents = await asset.fs.readFile(filePath, 'utf8');
+            return {
+              filePath,
+              contents
+            };
+          } catch (err) {
+            asset.invalidateOnFileCreate({
+              filePath
+            });
+          }
+        }
+      }
+    }
+
+    // If none of the default sass rules apply, try Parcel's resolver.
+    for (let u of urls) {
+      if (NODE_MODULE_ALIAS_RE.test(u)) {
+        u = u.slice(1);
+      }
+      try {
+        const filePath = await resolve(prev, u, {
+          packageConditions: ['sass', 'style']
+        });
+        if (filePath) {
+          const contents = await asset.fs.readFile(filePath, 'utf8');
+          return {
+            filePath,
+            contents
+          };
+        }
+      } catch (err) {
+        continue;
+      }
+    }
+  }
+  return function (rawUrl, prev, done) {
+    const url = rawUrl.replace(/^file:\/\//, '');
+    resolvePath(url, prev).then(resolved => {
+      if (resolved) {
+        done({
+          file: resolved.filePath,
+          contents: resolved.contents
+        });
+      } else {
+        done();
+      }
+    }).catch(done);
+  };
+}

package/lib/modern.js

@@ -0,0 +1,188 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.transformModern = transformModern;
+function _path() {
+  const data = _interopRequireWildcard(require("path"));
+  _path = function () {
+    return data;
+  };
+  return data;
+}
+function _sourceMap() {
+  const data = _interopRequireDefault(require("@parcel/source-map"));
+  _sourceMap = function () {
+    return data;
+  };
+  return data;
+}
+function _sass() {
+  const data = _interopRequireDefault(require("sass"));
+  _sass = function () {
+    return data;
+  };
+  return data;
+}
+function _url() {
+  const data = require("url");
+  _url = function () {
+    return data;
+  };
+  return data;
+}
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// E.g: ~library/file.sass
+const NODE_MODULE_ALIAS_RE = /^~[^/\\]/;
+async function transformModern(asset, config, resolve, options) {
+  let rawConfig = config ?? {};
+  let css;
+  try {
+    let code = await asset.getCode();
+    let indentedSyntax = rawConfig.syntax === 'indented' || typeof rawConfig.indentedSyntax === 'boolean' ? rawConfig.indentedSyntax : undefined;
+    let result = await _sass().default.compileStringAsync(code, {
+      ...rawConfig,
+      loadPaths: undefined,
+      url: (0, _url().pathToFileURL)(asset.filePath),
+      importers: [...(rawConfig.importers || []), resolvePathImporter({
+        asset,
+        resolve,
+        loadPaths: rawConfig.loadPaths,
+        indentedSyntax,
+        options
+      })],
+      syntax: (indentedSyntax != null ? indentedSyntax : asset.type === 'sass') ? 'indented' : 'scss',
+      sourceMap: !!asset.env.sourceMap
+    });
+    css = result.css;
+    for (let included of result.loadedUrls) {
+      let file = (0, _url().fileURLToPath)(included);
+      if (file !== asset.filePath) {
+        asset.invalidateOnFileChange(file);
+      }
+    }
+    if (result.sourceMap != null) {
+      let map = new (_sourceMap().default)(options.projectRoot);
+      map.addVLQMap(result.sourceMap);
+      asset.setMap(map);
+    }
+  } catch (err) {
+    // Adapt the Error object for the reporter.
+    err.fileName = err.file;
+    err.loc = {
+      line: err.line,
+      column: err.column
+    };
+    throw err;
+  }
+  asset.type = 'css';
+  asset.setCode(css);
+}
+function resolvePathImporter({
+  asset,
+  resolve,
+  loadPaths,
+  indentedSyntax,
+  options
+}) {
+  return {
+    // This is a reimplementation of the Sass resolution algorithm that uses Parcel's
+    // FS and tracks all tried files so they are watched for creation.
+    async canonicalize(url, {
+      containingUrl
+    }) {
+      /*
+        Imports are resolved by trying, in order:
+          * Loading a file relative to the file in which the `@import` appeared.
+          * Each custom importer.
+          * Loading a file relative to the current working directory (This rule doesn't really make sense for Parcel).
+          * Each load path in `includePaths`
+          * Each load path specified in the `SASS_PATH` environment variable, which should be semicolon-separated on Windows and colon-separated elsewhere.
+         See: https://sass-lang.com/documentation/js-api#importer
+        See also: https://github.com/sass/dart-sass/blob/006e6aa62f2417b5267ad5cdb5ba050226fab511/lib/src/importer/node/implementation.dart
+      */
+
+      let containingPath = containingUrl ? (0, _url().fileURLToPath)(containingUrl) : asset.filePath;
+      if (!containingUrl) {
+        // If containingUrl is not provided, then url should be an absolute file:/// URL.
+        let filePath = (0, _url().fileURLToPath)(url);
+        url = _path().default.relative(_path().default.dirname(containingPath), filePath);
+      }
+      let paths = [_path().default.dirname(containingPath)];
+      if (loadPaths) {
+        paths.push(...loadPaths);
+      }
+      asset.invalidateOnEnvChange('SASS_PATH');
+      if (options.env.SASS_PATH) {
+        paths.push(...options.env.SASS_PATH.split(process.platform === 'win32' ? ';' : ':').map(p => _path().default.resolve(options.projectRoot, p)));
+      }
+
+      // The importer should look for stylesheets by adding the prefix _ to the URL's basename,
+      // and by adding the extensions .sass and .scss if the URL doesn't already have one of those extensions.
+      const urls = [url];
+      const urlFileName = _path().default.basename(url);
+      if (urlFileName[0] !== '_') {
+        urls.push(_path().default.posix.join(_path().default.dirname(url), `_${urlFileName}`));
+      }
+      let ext = _path().default.extname(urlFileName);
+      if (ext !== '.sass' && ext !== '.scss') {
+        for (let url of [...urls]) {
+          urls.push(url + '.sass');
+          urls.push(url + '.scss');
+        }
+      }
+
+      // If none of the possible paths is valid, the importer should perform the same resolution on the URL followed by /index.
+      urls.push(_path().default.posix.join(url, 'index.sass'));
+      urls.push(_path().default.posix.join(url, 'index.scss'));
+      urls.push(_path().default.posix.join(url, '_index.sass'));
+      urls.push(_path().default.posix.join(url, '_index.scss'));
+      if (url[0] !== '~') {
+        for (let p of paths) {
+          for (let u of urls) {
+            var _stat;
+            let filePath = _path().default.resolve(p, u);
+            let stat;
+            try {
+              stat = await asset.fs.stat(filePath);
+            } catch (err) {
+              // ignore.
+            }
+            if ((_stat = stat) !== null && _stat !== void 0 && _stat.isFile()) {
+              return (0, _url().pathToFileURL)(filePath);
+            }
+            asset.invalidateOnFileCreate({
+              filePath
+            });
+          }
+        }
+      }
+
+      // If none of the default sass rules apply, try Parcel's resolver.
+      for (let u of urls) {
+        if (NODE_MODULE_ALIAS_RE.test(u)) {
+          u = u.slice(1);
+        }
+        try {
+          const filePath = await resolve(containingPath, u, {
+            packageConditions: ['sass', 'style']
+          });
+          return (0, _url().pathToFileURL)(filePath);
+        } catch (err) {
+          continue;
+        }
+      }
+    },
+    async load(url) {
+      let path = (0, _url().fileURLToPath)(url);
+      const contents = await asset.fs.readFile(path, 'utf8');
+      return {
+        contents,
+        syntax: (indentedSyntax != null ? indentedSyntax : (0, _path().extname)(path) === '.sass') ? 'indented' : 'scss'
+      };
+    }
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parcel/transformer-sass",
-  "version": "2.12.0",
+  "version": "2.13.1",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -16,13 +16,13 @@
   "main": "lib/SassTransformer.js",
   "source": "src/SassTransformer.js",
   "engines": {
-    "node": ">= 12.0.0",
-    "parcel": "^2.12.0"
+    "node": ">= 16.0.0",
+    "parcel": "^2.13.1"
   },
   "dependencies": {
-    "@parcel/plugin": "2.12.0",
+    "@parcel/plugin": "2.13.1",
     "@parcel/source-map": "^2.1.1",
     "sass": "^1.38.0"
   },
-  "gitHead": "2059029ee91e5f03a273b0954d3e629d7375f986"
+  "gitHead": "4a297f79db3eec74437f4c5133127c98bf303703"
 }

package/src/SassTransformer.js

@@ -1,13 +1,9 @@
 // @flow
 import {Transformer} from '@parcel/plugin';
 import path from 'path';
-import {EOL} from 'os';
-import SourceMap from '@parcel/source-map';
 import sass from 'sass';
-import {promisify} from 'util';
-
-// E.g: ~library/file.sass
-const NODE_MODULE_ALIAS_RE = /^~[^/\\]/;
+import {transformLegacy} from './legacy';
+import {transformModern} from './modern';
 
 export default (new Transformer({
   async loadConfig({config, options}) {
@@ -27,171 +23,106 @@ export default (new Transformer({
       configResult = {};
     }
 
-    // Resolve relative paths from config file
-    if (configFile && configResult.includePaths) {
-      configResult.includePaths = configResult.includePaths.map(p =>
-        path.resolve(path.dirname(configFile.filePath), p),
-      );
-    }
-
-    if (configResult.importer === undefined) {
-      configResult.importer = [];
-    } else if (!Array.isArray(configResult.importer)) {
-      configResult.importer = [configResult.importer];
-    }
-
-    // Always emit sourcemap
-    configResult.sourceMap = true;
-    // sources are created relative to the directory of outFile
-    configResult.outFile = path.join(options.projectRoot, 'style.css.map');
-    configResult.omitSourceMapUrl = true;
-    configResult.sourceMapContents = false;
+    let version = detectVersion(configResult);
 
-    return configResult;
-  },
+    if (version === 'legacy') {
+      // Resolve relative paths from config file
+      if (configFile && configResult.includePaths) {
+        configResult.includePaths = configResult.includePaths.map(p =>
+          path.resolve(path.dirname(configFile.filePath), p),
+        );
+      }
 
-  async transform({asset, options, config, resolve}) {
-    let rawConfig = config ?? {};
-    let sassRender = promisify(sass.render.bind(sass));
-    let css;
-    try {
-      let code = await asset.getCode();
-      let result = await sassRender({
-        ...rawConfig,
-        file: asset.filePath,
-        data: rawConfig.data ? rawConfig.data + EOL + code : code,
-        importer: [
-          ...rawConfig.importer,
-          resolvePathImporter({
-            asset,
-            resolve,
-            includePaths: rawConfig.includePaths,
-            options,
-          }),
-        ],
-        indentedSyntax:
-          typeof rawConfig.indentedSyntax === 'boolean'
-            ? rawConfig.indentedSyntax
-            : asset.type === 'sass',
-      });
-
-      css = result.css;
-      for (let included of result.stats.includedFiles) {
-        if (included !== asset.filePath) {
-          asset.invalidateOnFileChange(included);
-        }
+      if (configResult.importer === undefined) {
+        configResult.importer = [];
+      } else if (!Array.isArray(configResult.importer)) {
+        configResult.importer = [configResult.importer];
       }
 
-      if (result.map != null) {
-        let map = new SourceMap(options.projectRoot);
-        map.addVLQMap(JSON.parse(result.map));
-        asset.setMap(map);
+      // Always emit sourcemap
+      configResult.sourceMap = true;
+      // sources are created relative to the directory of outFile
+      configResult.outFile = path.join(options.projectRoot, 'style.css.map');
+      configResult.omitSourceMapUrl = true;
+      configResult.sourceMapContents = false;
+    } else if (version === 'modern') {
+      // Resolve relative paths from config file
+      if (configFile && configResult.loadPaths) {
+        configResult.loadPaths = configResult.loadPaths.map(p =>
+          path.resolve(path.dirname(configFile.filePath), p),
+        );
       }
-    } catch (err) {
-      // Adapt the Error object for the reporter.
-      err.fileName = err.file;
-      err.loc = {
-        line: err.line,
-        column: err.column,
-      };
-
-      throw err;
+
+      // Always emit sourcemap
+      configResult.sourceMap = true;
+    }
+
+    return {version, config: configResult};
+  },
+
+  async transform({asset, options, config: {version, config}, resolve}) {
+    if (version === 'legacy') {
+      await transformLegacy(asset, config, resolve, options);
+    } else {
+      await transformModern(asset, config, resolve, options);
     }
 
-    asset.type = 'css';
-    asset.setCode(css);
     return [asset];
   },
 }): Transformer);
 
-function resolvePathImporter({asset, resolve, includePaths, options}) {
-  // This is a reimplementation of the Sass resolution algorithm that uses Parcel's
-  // FS and tracks all tried files so they are watched for creation.
-  async function resolvePath(
-    url,
-    prev,
-  ): Promise<{filePath: string, contents: string, ...} | void> {
-    /*
-      Imports are resolved by trying, in order:
-        * Loading a file relative to the file in which the `@import` appeared.
-        * Each custom importer.
-        * Loading a file relative to the current working directory (This rule doesn't really make sense for Parcel).
-        * Each load path in `includePaths`
-        * Each load path specified in the `SASS_PATH` environment variable, which should be semicolon-separated on Windows and colon-separated elsewhere.
-
-      See: https://sass-lang.com/documentation/js-api#importer
-      See also: https://github.com/sass/dart-sass/blob/006e6aa62f2417b5267ad5cdb5ba050226fab511/lib/src/importer/node/implementation.dart
-    */
-
-    let paths = [path.dirname(prev)];
-    if (includePaths) {
-      paths.push(...includePaths);
-    }
+function detectVersion(config: any) {
+  if (!sass.compileStringAsync) {
+    return 'legacy';
+  }
 
-    asset.invalidateOnEnvChange('SASS_PATH');
-    if (options.env.SASS_PATH) {
-      paths.push(
-        ...options.env.SASS_PATH.split(
-          process.platform === 'win32' ? ';' : ':',
-        ).map(p => path.resolve(options.projectRoot, p)),
-      );
+  for (let legacyOption of [
+    'data',
+    'indentType',
+    'indentWidth',
+    'linefeed',
+    'outputStyle',
+    'importer',
+    'pkgImporter',
+    'includePaths',
+    'omitSourceMapUrl',
+    'outFile',
+    'sourceMapContents',
+    'sourceMapEmbed',
+    'sourceMapRoot',
+  ]) {
+    if (config[legacyOption] != null) {
+      return 'legacy';
     }
+  }
 
-    const urls = [url];
-    const urlFileName = path.basename(url);
-    if (urlFileName[0] !== '_') {
-      urls.push(path.join(path.dirname(url), `_${urlFileName}`));
+  for (let modernOption of [
+    'loadPaths',
+    'sourceMapIncludeSources',
+    'style',
+    'importers',
+  ]) {
+    if (config[modernOption] != null) {
+      return 'modern';
     }
+  }
 
-    if (url[0] !== '~') {
-      for (let p of paths) {
-        for (let u of urls) {
-          const filePath = path.resolve(p, u);
-          try {
-            const contents = await asset.fs.readFile(filePath, 'utf8');
-            return {
-              filePath,
-              contents,
-            };
-          } catch (err) {
-            asset.invalidateOnFileCreate({filePath});
-          }
-        }
-      }
-    }
+  if (typeof config.sourceMap === 'string') {
+    return 'legacy';
+  }
 
-    // If none of the default sass rules apply, try Parcel's resolver.
-    for (let u of urls) {
-      if (NODE_MODULE_ALIAS_RE.test(u)) {
-        u = u.slice(1);
-      }
-      try {
-        const filePath = await resolve(prev, u, {
-          packageConditions: ['sass', 'style'],
-        });
-        if (filePath) {
-          const contents = await asset.fs.readFile(filePath, 'utf8');
-          return {filePath, contents};
-        }
-      } catch (err) {
-        continue;
+  if (
+    config.functions &&
+    typeof config.functions === 'object' &&
+    Object.keys(config.functions).length > 0
+  ) {
+    for (let key in config.functions) {
+      let fn = config.functions[key];
+      if (typeof fn === 'function' && fn.length > 1) {
+        return 'legacy';
       }
     }
   }
 
-  return function (rawUrl, prev, done) {
-    const url = rawUrl.replace(/^file:\/\//, '');
-    resolvePath(url, prev)
-      .then(resolved => {
-        if (resolved) {
-          done({
-            file: resolved.filePath,
-            contents: resolved.contents,
-          });
-        } else {
-          done();
-        }
-      })
-      .catch(done);
-  };
+  return 'modern';
 }

package/src/legacy.js

@@ -0,0 +1,159 @@
+// @flow
+import type {MutableAsset, ResolveFn, PluginOptions} from '@parcel/types';
+import path from 'path';
+import {EOL} from 'os';
+import SourceMap from '@parcel/source-map';
+import sass from 'sass';
+import {promisify} from 'util';
+
+// E.g: ~library/file.sass
+const NODE_MODULE_ALIAS_RE = /^~[^/\\]/;
+
+export async function transformLegacy(
+  asset: MutableAsset,
+  config: any,
+  resolve: ResolveFn,
+  options: PluginOptions,
+) {
+  let rawConfig = config ?? {};
+  let sassRender = promisify(sass.render.bind(sass));
+  let css;
+  try {
+    let code = await asset.getCode();
+    let result = await sassRender({
+      ...rawConfig,
+      file: asset.filePath,
+      data: rawConfig.data ? rawConfig.data + EOL + code : code,
+      importer: [
+        ...rawConfig.importer,
+        resolvePathImporter({
+          asset,
+          resolve,
+          includePaths: rawConfig.includePaths,
+          options,
+        }),
+      ],
+      indentedSyntax:
+        typeof rawConfig.indentedSyntax === 'boolean'
+          ? rawConfig.indentedSyntax
+          : asset.type === 'sass',
+    });
+
+    css = result.css;
+    for (let included of result.stats.includedFiles) {
+      if (included !== asset.filePath) {
+        asset.invalidateOnFileChange(included);
+      }
+    }
+
+    if (result.map != null) {
+      let map = new SourceMap(options.projectRoot);
+      map.addVLQMap(JSON.parse(result.map));
+      asset.setMap(map);
+    }
+  } catch (err) {
+    // Adapt the Error object for the reporter.
+    err.fileName = err.file;
+    err.loc = {
+      line: err.line,
+      column: err.column,
+    };
+
+    throw err;
+  }
+
+  asset.type = 'css';
+  asset.setCode(css);
+}
+
+function resolvePathImporter({asset, resolve, includePaths, options}) {
+  // This is a reimplementation of the Sass resolution algorithm that uses Parcel's
+  // FS and tracks all tried files so they are watched for creation.
+  async function resolvePath(
+    url,
+    prev,
+  ): Promise<{filePath: string, contents: string, ...} | void> {
+    /*
+      Imports are resolved by trying, in order:
+        * Loading a file relative to the file in which the `@import` appeared.
+        * Each custom importer.
+        * Loading a file relative to the current working directory (This rule doesn't really make sense for Parcel).
+        * Each load path in `includePaths`
+        * Each load path specified in the `SASS_PATH` environment variable, which should be semicolon-separated on Windows and colon-separated elsewhere.
+
+      See: https://sass-lang.com/documentation/js-api#importer
+      See also: https://github.com/sass/dart-sass/blob/006e6aa62f2417b5267ad5cdb5ba050226fab511/lib/src/importer/node/implementation.dart
+    */
+
+    let paths = [path.dirname(prev)];
+    if (includePaths) {
+      paths.push(...includePaths);
+    }
+
+    asset.invalidateOnEnvChange('SASS_PATH');
+    if (options.env.SASS_PATH) {
+      paths.push(
+        ...options.env.SASS_PATH.split(
+          process.platform === 'win32' ? ';' : ':',
+        ).map(p => path.resolve(options.projectRoot, p)),
+      );
+    }
+
+    const urls = [url];
+    const urlFileName = path.basename(url);
+    if (urlFileName[0] !== '_') {
+      urls.push(path.join(path.dirname(url), `_${urlFileName}`));
+    }
+
+    if (url[0] !== '~') {
+      for (let p of paths) {
+        for (let u of urls) {
+          const filePath = path.resolve(p, u);
+          try {
+            const contents = await asset.fs.readFile(filePath, 'utf8');
+            return {
+              filePath,
+              contents,
+            };
+          } catch (err) {
+            asset.invalidateOnFileCreate({filePath});
+          }
+        }
+      }
+    }
+
+    // If none of the default sass rules apply, try Parcel's resolver.
+    for (let u of urls) {
+      if (NODE_MODULE_ALIAS_RE.test(u)) {
+        u = u.slice(1);
+      }
+      try {
+        const filePath = await resolve(prev, u, {
+          packageConditions: ['sass', 'style'],
+        });
+        if (filePath) {
+          const contents = await asset.fs.readFile(filePath, 'utf8');
+          return {filePath, contents};
+        }
+      } catch (err) {
+        continue;
+      }
+    }
+  }
+
+  return function (rawUrl, prev, done) {
+    const url = rawUrl.replace(/^file:\/\//, '');
+    resolvePath(url, prev)
+      .then(resolved => {
+        if (resolved) {
+          done({
+            file: resolved.filePath,
+            contents: resolved.contents,
+          });
+        } else {
+          done();
+        }
+      })
+      .catch(done);
+  };
+}

package/src/modern.js

@@ -0,0 +1,190 @@
+// @flow
+import type {MutableAsset, ResolveFn, PluginOptions} from '@parcel/types';
+import path from 'path';
+import {extname} from 'path';
+import SourceMap from '@parcel/source-map';
+import sass from 'sass';
+import {fileURLToPath, pathToFileURL} from 'url';
+
+// E.g: ~library/file.sass
+const NODE_MODULE_ALIAS_RE = /^~[^/\\]/;
+
+export async function transformModern(
+  asset: MutableAsset,
+  config: any,
+  resolve: ResolveFn,
+  options: PluginOptions,
+) {
+  let rawConfig = config ?? {};
+  let css;
+  try {
+    let code = await asset.getCode();
+    let indentedSyntax =
+      rawConfig.syntax === 'indented' ||
+      typeof rawConfig.indentedSyntax === 'boolean'
+        ? rawConfig.indentedSyntax
+        : undefined;
+    let result = await sass.compileStringAsync(code, {
+      ...rawConfig,
+      loadPaths: undefined,
+      url: pathToFileURL(asset.filePath),
+      importers: [
+        ...(rawConfig.importers || []),
+        resolvePathImporter({
+          asset,
+          resolve,
+          loadPaths: rawConfig.loadPaths,
+          indentedSyntax,
+          options,
+        }),
+      ],
+      syntax: (indentedSyntax != null ? indentedSyntax : asset.type === 'sass')
+        ? 'indented'
+        : 'scss',
+      sourceMap: !!asset.env.sourceMap,
+    });
+
+    css = result.css;
+    for (let included of result.loadedUrls) {
+      let file = fileURLToPath(included);
+      if (file !== asset.filePath) {
+        asset.invalidateOnFileChange(file);
+      }
+    }
+
+    if (result.sourceMap != null) {
+      let map = new SourceMap(options.projectRoot);
+      map.addVLQMap(result.sourceMap);
+      asset.setMap(map);
+    }
+  } catch (err) {
+    // Adapt the Error object for the reporter.
+    err.fileName = err.file;
+    err.loc = {
+      line: err.line,
+      column: err.column,
+    };
+
+    throw err;
+  }
+
+  asset.type = 'css';
+  asset.setCode(css);
+}
+
+function resolvePathImporter({
+  asset,
+  resolve,
+  loadPaths,
+  indentedSyntax,
+  options,
+}) {
+  return {
+    // This is a reimplementation of the Sass resolution algorithm that uses Parcel's
+    // FS and tracks all tried files so they are watched for creation.
+    async canonicalize(url, {containingUrl}) {
+      /*
+        Imports are resolved by trying, in order:
+          * Loading a file relative to the file in which the `@import` appeared.
+          * Each custom importer.
+          * Loading a file relative to the current working directory (This rule doesn't really make sense for Parcel).
+          * Each load path in `includePaths`
+          * Each load path specified in the `SASS_PATH` environment variable, which should be semicolon-separated on Windows and colon-separated elsewhere.
+
+        See: https://sass-lang.com/documentation/js-api#importer
+        See also: https://github.com/sass/dart-sass/blob/006e6aa62f2417b5267ad5cdb5ba050226fab511/lib/src/importer/node/implementation.dart
+      */
+
+      let containingPath = containingUrl
+        ? fileURLToPath(containingUrl)
+        : asset.filePath;
+      if (!containingUrl) {
+        // If containingUrl is not provided, then url should be an absolute file:/// URL.
+        let filePath = fileURLToPath(url);
+        url = path.relative(path.dirname(containingPath), filePath);
+      }
+
+      let paths = [path.dirname(containingPath)];
+      if (loadPaths) {
+        paths.push(...loadPaths);
+      }
+
+      asset.invalidateOnEnvChange('SASS_PATH');
+      if (options.env.SASS_PATH) {
+        paths.push(
+          ...options.env.SASS_PATH.split(
+            process.platform === 'win32' ? ';' : ':',
+          ).map(p => path.resolve(options.projectRoot, p)),
+        );
+      }
+
+      // The importer should look for stylesheets by adding the prefix _ to the URL's basename,
+      // and by adding the extensions .sass and .scss if the URL doesn't already have one of those extensions.
+      const urls = [url];
+      const urlFileName = path.basename(url);
+      if (urlFileName[0] !== '_') {
+        urls.push(path.posix.join(path.dirname(url), `_${urlFileName}`));
+      }
+
+      let ext = path.extname(urlFileName);
+      if (ext !== '.sass' && ext !== '.scss') {
+        for (let url of [...urls]) {
+          urls.push(url + '.sass');
+          urls.push(url + '.scss');
+        }
+      }
+
+      // If none of the possible paths is valid, the importer should perform the same resolution on the URL followed by /index.
+      urls.push(path.posix.join(url, 'index.sass'));
+      urls.push(path.posix.join(url, 'index.scss'));
+      urls.push(path.posix.join(url, '_index.sass'));
+      urls.push(path.posix.join(url, '_index.scss'));
+
+      if (url[0] !== '~') {
+        for (let p of paths) {
+          for (let u of urls) {
+            let filePath = path.resolve(p, u);
+            let stat;
+            try {
+              stat = await asset.fs.stat(filePath);
+            } catch (err) {
+              // ignore.
+            }
+            if (stat?.isFile()) {
+              return pathToFileURL(filePath);
+            }
+
+            asset.invalidateOnFileCreate({filePath});
+          }
+        }
+      }
+
+      // If none of the default sass rules apply, try Parcel's resolver.
+      for (let u of urls) {
+        if (NODE_MODULE_ALIAS_RE.test(u)) {
+          u = u.slice(1);
+        }
+        try {
+          const filePath = await resolve(containingPath, u, {
+            packageConditions: ['sass', 'style'],
+          });
+          return pathToFileURL(filePath);
+        } catch (err) {
+          continue;
+        }
+      }
+    },
+    async load(url) {
+      let path = fileURLToPath(url);
+      const contents = await asset.fs.readFile(path, 'utf8');
+      return {
+        contents,
+        syntax: (
+          indentedSyntax != null ? indentedSyntax : extname(path) === '.sass'
+        )
+          ? 'indented'
+          : 'scss',
+      };
+    },
+  };
+}