@parcel/transformer-sass 2.0.0-beta.1 → 2.0.0-nightly.1002

package/lib/SassTransformer.js

@@ -5,63 +5,102 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _plugin = require("@parcel/plugin");
+function _plugin() {
+  const data = require("@parcel/plugin");
 
-var _utils = require("@parcel/utils");
+  _plugin = function () {
+    return data;
+  };
+
+  return data;
+}
+
+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;
+  };
 
-var _path = _interopRequireDefault(require("path"));
+  return data;
+}
 
-var _os = require("os");
+function _sass() {
+  const data = _interopRequireDefault(require("sass"));
 
-var _sourceMap = _interopRequireDefault(require("@parcel/source-map"));
+  _sass = function () {
+    return data;
+  };
+
+  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 WEBPACK_ALIAS_RE = /^~[^/]/;
+const NODE_MODULE_ALIAS_RE = /^~[^/\\]/;
 
-var _default = new _plugin.Transformer({
+var _default = new (_plugin().Transformer)({
   async loadConfig({
     config,
     options
   }) {
-    let configFile = await config.getConfig(['.sassrc', '.sassrc.js'], {
+    let configFile = await config.getConfig(['.sassrc', '.sassrc.json', '.sassrc.js'], {
       packageKey: 'sass'
     });
-    let configResult = {
-      contents: configFile ? configFile.contents : {},
-      isSerialisable: true
-    };
-
-    if (configFile && _path.default.extname(configFile.filePath) === '.js') {
-      config.shouldInvalidateOnStartup();
-      config.shouldReload();
-      configResult.isSerialisable = false;
+    let configResult = configFile ? configFile.contents : {}; // 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.contents.importer === undefined) {
-      configResult.contents.importer = [];
-    } else if (!Array.isArray(configResult.contents.importer)) {
-      configResult.contents.importer = [configResult.contents.importer];
+    if (configFile && _path().default.extname(configFile.filePath) === '.js') {
+      config.invalidateOnStartup();
+    }
+
+    if (configResult.importer === undefined) {
+      configResult.importer = [];
+    } else if (!Array.isArray(configResult.importer)) {
+      configResult.importer = [configResult.importer];
     } // Always emit sourcemap
 
 
-    configResult.contents.sourceMap = true; // sources are created relative to the directory of outFile
+    configResult.sourceMap = true; // sources are created relative to the directory of outFile
 
-    configResult.contents.outFile = _path.default.join(options.projectRoot, 'style.css.map');
-    configResult.contents.omitSourceMapUrl = true;
-    configResult.contents.sourceMapContents = false;
-    config.setResult(configResult);
-  },
-
-  preSerializeConfig({
-    config
-  }) {
-    if (!config.result) return; // Ensure we dont try to serialise functions
-
-    if (!config.result.isSerialisable) {
-      config.result.contents = {};
-    }
+    configResult.outFile = _path().default.join(options.projectRoot, 'style.css.map');
+    configResult.omitSourceMapUrl = true;
+    configResult.sourceMapContents = false;
+    return configResult;
   },
 
   async transform({
@@ -70,20 +109,20 @@ var _default = new _plugin.Transformer({
     config,
     resolve
   }) {
-    let rawConfig = config ? config.contents : {};
-    let sass = await options.packageManager.require('sass', asset.filePath, {
-      autoinstall: options.autoinstall
-    });
-    const sassRender = (0, _utils.promisify)(sass.render.bind(sass));
+    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,
+        data: rawConfig.data ? rawConfig.data + _os().EOL + code : code,
         importer: [...rawConfig.importer, resolvePathImporter({
-          resolve
+          asset,
+          resolve,
+          includePaths: rawConfig.includePaths,
+          options
         })],
         indentedSyntax: typeof rawConfig.indentedSyntax === 'boolean' ? rawConfig.indentedSyntax : asset.type === 'sass'
       });
@@ -91,15 +130,13 @@ var _default = new _plugin.Transformer({
 
       for (let included of result.stats.includedFiles) {
         if (included !== asset.filePath) {
-          asset.addIncludedFile({
-            filePath: included
-          });
+          asset.invalidateOnFileChange(included);
         }
       }
 
       if (result.map != null) {
-        let map = new _sourceMap.default();
-        map.addRawMappings(JSON.parse(result.map));
+        let map = new (_sourceMap().default)(options.projectRoot);
+        map.addVLQMap(JSON.parse(result.map));
         asset.setMap(map);
       }
     } catch (err) {
@@ -122,34 +159,97 @@ var _default = new _plugin.Transformer({
 exports.default = _default;
 
 function resolvePathImporter({
-  resolve
+  asset,
+  resolve,
+  includePaths,
+  options
 }) {
-  return function (rawUrl, prev, done) {
-    let url = rawUrl.replace(/^file:\/\//, '');
+  // 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);
+    }
 
-    if (WEBPACK_ALIAS_RE.test(url)) {
-      const correctPath = url.replace(/^~/, '');
-      const error = new Error(`The @import path "${url}" is using webpack specific syntax, which isn't supported by Parcel.\n\nTo @import files from node_modules, use "${correctPath}"`);
-      done(error);
-      return;
+    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)));
     }
 
-    resolve(prev, url).then(resolvedPath => {
-      done({
-        file: resolvedPath
-      });
-    }).catch(() => {
-      /*
-       We return `null` instead of an error so that Sass' resolution algorithm can continue.
-        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.
-         * 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
-      */
-      done(null);
-    });
+    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);
+
+        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/package.json

@@ -1,10 +1,14 @@
 {
   "name": "@parcel/transformer-sass",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-nightly.1002+5530a6ef",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/parcel"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/parcel-bundler/parcel.git"
@@ -12,20 +16,13 @@
   "main": "lib/SassTransformer.js",
   "source": "src/SassTransformer.js",
   "engines": {
-    "node": ">= 10.0.0",
-    "parcel": "^2.0.0-alpha.1.1"
+    "node": ">= 12.0.0",
+    "parcel": "2.0.0-nightly.1000+5530a6ef"
   },
   "dependencies": {
-    "@parcel/fs": "2.0.0-beta.1",
-    "@parcel/plugin": "2.0.0-beta.1",
-    "@parcel/source-map": "2.0.0-alpha.4.13",
-    "@parcel/utils": "2.0.0-beta.1"
-  },
-  "devDependencies": {
-    "sass": "^1.22.9"
-  },
-  "peerDependencies": {
-    "@parcel/core": "^2.0.0-alpha.3.1"
+    "@parcel/plugin": "2.0.0-nightly.1002+5530a6ef",
+    "@parcel/source-map": "^2.0.0",
+    "sass": "^1.38.0"
   },
-  "gitHead": "74335525be92e23bac4ed1bf30595443cfb238e3"
+  "gitHead": "5530a6eff8b619873353baeb0457ae4ec591e9fa"
 }

package/src/SassTransformer.js

@@ -1,66 +1,55 @@
 // @flow
 import {Transformer} from '@parcel/plugin';
-import {promisify} from '@parcel/utils';
 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 WEBPACK_ALIAS_RE = /^~[^/]/;
+const NODE_MODULE_ALIAS_RE = /^~[^/\\]/;
 
-export default new Transformer({
+export default (new Transformer({
   async loadConfig({config, options}) {
-    let configFile = await config.getConfig(['.sassrc', '.sassrc.js'], {
-      packageKey: 'sass',
-    });
+    let configFile = await config.getConfig(
+      ['.sassrc', '.sassrc.json', '.sassrc.js'],
+      {
+        packageKey: 'sass',
+      },
+    );
 
-    let configResult = {
-      contents: configFile ? configFile.contents : {},
-      isSerialisable: true,
-    };
+    let configResult = configFile ? configFile.contents : {};
 
-    if (configFile && path.extname(configFile.filePath) === '.js') {
-      config.shouldInvalidateOnStartup();
-      config.shouldReload();
+    // Resolve relative paths from config file
+    if (configFile && configResult.includePaths) {
+      configResult.includePaths = configResult.includePaths.map(p =>
+        path.resolve(path.dirname(configFile.filePath), p),
+      );
+    }
 
-      configResult.isSerialisable = false;
+    if (configFile && path.extname(configFile.filePath) === '.js') {
+      config.invalidateOnStartup();
     }
 
-    if (configResult.contents.importer === undefined) {
-      configResult.contents.importer = [];
-    } else if (!Array.isArray(configResult.contents.importer)) {
-      configResult.contents.importer = [configResult.contents.importer];
+    if (configResult.importer === undefined) {
+      configResult.importer = [];
+    } else if (!Array.isArray(configResult.importer)) {
+      configResult.importer = [configResult.importer];
     }
 
     // Always emit sourcemap
-    configResult.contents.sourceMap = true;
+    configResult.sourceMap = true;
     // sources are created relative to the directory of outFile
-    configResult.contents.outFile = path.join(
-      options.projectRoot,
-      'style.css.map',
-    );
-    configResult.contents.omitSourceMapUrl = true;
-    configResult.contents.sourceMapContents = false;
+    configResult.outFile = path.join(options.projectRoot, 'style.css.map');
+    configResult.omitSourceMapUrl = true;
+    configResult.sourceMapContents = false;
 
-    config.setResult(configResult);
-  },
-
-  preSerializeConfig({config}) {
-    if (!config.result) return;
-
-    // Ensure we dont try to serialise functions
-    if (!config.result.isSerialisable) {
-      config.result.contents = {};
-    }
+    return configResult;
   },
 
   async transform({asset, options, config, resolve}) {
-    let rawConfig = config ? config.contents : {};
-    let sass = await options.packageManager.require('sass', asset.filePath, {
-      autoinstall: options.autoinstall,
-    });
-
-    const sassRender = promisify(sass.render.bind(sass));
+    let rawConfig = config ?? {};
+    let sassRender = promisify(sass.render.bind(sass));
     let css;
     try {
       let code = await asset.getCode();
@@ -68,7 +57,15 @@ export default new Transformer({
         ...rawConfig,
         file: asset.filePath,
         data: rawConfig.data ? rawConfig.data + EOL + code : code,
-        importer: [...rawConfig.importer, resolvePathImporter({resolve})],
+        importer: [
+          ...rawConfig.importer,
+          resolvePathImporter({
+            asset,
+            resolve,
+            includePaths: rawConfig.includePaths,
+            options,
+          }),
+        ],
         indentedSyntax:
           typeof rawConfig.indentedSyntax === 'boolean'
             ? rawConfig.indentedSyntax
@@ -78,13 +75,13 @@ export default new Transformer({
       css = result.css;
       for (let included of result.stats.includedFiles) {
         if (included !== asset.filePath) {
-          asset.addIncludedFile({filePath: included});
+          asset.invalidateOnFileChange(included);
         }
       }
 
       if (result.map != null) {
-        let map = new SourceMap();
-        map.addRawMappings(JSON.parse(result.map));
+        let map = new SourceMap(options.projectRoot);
+        map.addVLQMap(JSON.parse(result.map));
         asset.setMap(map);
       }
     } catch (err) {
@@ -102,39 +99,94 @@ export default new Transformer({
     asset.setCode(css);
     return [asset];
   },
-});
-
-function resolvePathImporter({resolve}) {
-  return function(rawUrl, prev, done) {
-    let url = rawUrl.replace(/^file:\/\//, '');
+}): 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);
+    }
 
-    if (WEBPACK_ALIAS_RE.test(url)) {
-      const correctPath = url.replace(/^~/, '');
-      const error = new Error(
-        `The @import path "${url}" is using webpack specific syntax, which isn't supported by Parcel.\n\nTo @import files from node_modules, use "${correctPath}"`,
+    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)),
       );
-      done(error);
-      return;
     }
 
-    resolve(prev, url)
-      .then(resolvedPath => {
-        done({file: resolvedPath});
+    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);
+        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(() => {
-        /*
-         We return `null` instead of an error so that Sass' resolution algorithm can continue.
-
-         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.
-           * 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
-        */
-        done(null);
-      });
+      .catch(done);
   };
 }