@parcel/transformer-sass 2.0.0-nightly.92 → 2.0.1

package/lib/SassTransformer.js

@@ -5,85 +5,140 @@ 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;
+  };
 
-var _path = require("path");
+  return data;
+}
 
-var _os = require("os");
+function _path() {
+  const data = _interopRequireDefault(require("path"));
 
-var _fs = require("@parcel/fs");
+  _path = function () {
+    return data;
+  };
 
-// E.g: ~library/file.sass
-const WEBPACK_ALIAS_RE = /^~[^/]/;
-const fs = new _fs.NodeFS();
-let didWarnAboutNodeSass = false;
+  return data;
+}
 
-async function warnAboutNodeSassBeingUnsupported(filePath, logger) {
-  if (!didWarnAboutNodeSass) {
-    try {
-      // TODO: replace this with the actual filesystem later
-      await (0, _utils.resolve)(fs, 'node-sass', {
-        basedir: (0, _path.dirname)(filePath)
-      });
-      logger.warn({
-        origin: '@parcel/transformer-sass',
-        message: '`node-sass` is unsupported in Parcel 2, it will use Dart Sass a.k.a. `sass`'
-      });
-    } catch (err) {
-      if (err.code !== 'MODULE_NOT_FOUND') {
-        throw err;
-      }
-    } finally {
-      didWarnAboutNodeSass = true;
-    }
-  }
+function _os() {
+  const data = require("os");
+
+  _os = function () {
+    return data;
+  };
+
+  return data;
 }
 
-var _default = new _plugin.Transformer({
-  async getConfig({
-    asset,
-    resolve
+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(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// E.g: ~library/file.sass
+const NODE_MODULE_ALIAS_RE = /^~[^/\\]/;
+
+var _default = new (_plugin().Transformer)({
+  async loadConfig({
+    config,
+    options
   }) {
-    let config = await asset.getConfig(['.sassrc', '.sassrc.js'], {
+    let configFile = await config.getConfig(['.sassrc', '.sassrc.json', '.sassrc.js'], {
       packageKey: 'sass'
     });
+    let configResult = configFile ? configFile.contents : {}; // Resolve relative paths from config file
 
-    if (config === null) {
-      config = {};
+    if (configFile && configResult.includePaths) {
+      configResult.includePaths = configResult.includePaths.map(p => _path().default.resolve(_path().default.dirname(configFile.filePath), p));
     }
 
-    const code = await asset.getCode();
-    config.data = config.data ? config.data + _os.EOL + code : code;
-    config.file = asset.filePath;
-
-    if (config.importer === undefined) {
-      config.importer = [];
-    } else if (!Array.isArray(config.importer)) {
-      config.importer = [config.importer];
+    if (configFile && _path().default.extname(configFile.filePath) === '.js') {
+      config.invalidateOnStartup();
     }
 
-    config.importer = [...config.importer, resolvePathImporter({
-      resolve
-    })];
-    config.indentedSyntax = typeof config.indentedSyntax === 'boolean' ? config.indentedSyntax : asset.type === 'sass';
-    return config;
+    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;
+    return configResult;
   },
 
   async transform({
     asset,
     options,
     config,
-    logger
+    resolve
   }) {
-    await warnAboutNodeSassBeingUnsupported(asset.filePath, logger);
-    let sass = await options.packageManager.require('sass', asset.filePath);
-    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 {
-      css = (await sassRender(config)).css;
+      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;
@@ -104,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-nightly.92+c0655c56",
+  "version": "2.0.1",
   "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,16 +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.1"
   },
   "dependencies": {
-    "@parcel/fs": "2.0.0-nightly.92+c0655c56",
-    "@parcel/plugin": "2.0.0-nightly.92+c0655c56",
-    "@parcel/utils": "2.0.0-nightly.92+c0655c56"
-  },
-  "devDependencies": {
-    "sass": "^1.22.9"
+    "@parcel/plugin": "^2.0.1",
+    "@parcel/source-map": "^2.0.0",
+    "sass": "^1.38.0"
   },
-  "gitHead": "c0655c56f7973492fdb28671029ddd923f17a244"
+  "gitHead": "28b47e6bdca7de2a06b7cc39a4a0b1df89f3fe15"
 }

package/src/SassTransformer.js

@@ -1,79 +1,89 @@
 // @flow
-import type {PluginLogger} from '@parcel/logger';
-
 import {Transformer} from '@parcel/plugin';
-import {promisify, resolve} from '@parcel/utils';
-import {dirname} from 'path';
+import path from 'path';
 import {EOL} from 'os';
-import {NodeFS} from '@parcel/fs';
+import SourceMap from '@parcel/source-map';
+import sass from 'sass';
+import {promisify} from 'util';
 
 // E.g: ~library/file.sass
-const WEBPACK_ALIAS_RE = /^~[^/]/;
-const fs = new NodeFS();
-
-let didWarnAboutNodeSass = false;
-
-async function warnAboutNodeSassBeingUnsupported(
-  filePath,
-  logger: PluginLogger,
-) {
-  if (!didWarnAboutNodeSass) {
-    try {
-      // TODO: replace this with the actual filesystem later
-      await resolve(fs, 'node-sass', {basedir: dirname(filePath)});
-      logger.warn({
-        origin: '@parcel/transformer-sass',
-        message:
-          '`node-sass` is unsupported in Parcel 2, it will use Dart Sass a.k.a. `sass`',
-      });
-    } catch (err) {
-      if (err.code !== 'MODULE_NOT_FOUND') {
-        throw err;
-      }
-    } finally {
-      didWarnAboutNodeSass = true;
+const NODE_MODULE_ALIAS_RE = /^~[^/\\]/;
+
+export default (new Transformer({
+  async loadConfig({config, options}) {
+    let configFile = await config.getConfig(
+      ['.sassrc', '.sassrc.json', '.sassrc.js'],
+      {
+        packageKey: 'sass',
+      },
+    );
+
+    let configResult = configFile ? configFile.contents : {};
+
+    // Resolve relative paths from config file
+    if (configFile && configResult.includePaths) {
+      configResult.includePaths = configResult.includePaths.map(p =>
+        path.resolve(path.dirname(configFile.filePath), p),
+      );
     }
-  }
-}
 
-export default new Transformer({
-  async getConfig({asset, resolve}) {
-    let config = await asset.getConfig(['.sassrc', '.sassrc.js'], {
-      packageKey: 'sass',
-    });
-
-    if (config === null) {
-      config = {};
+    if (configFile && path.extname(configFile.filePath) === '.js') {
+      config.invalidateOnStartup();
     }
 
-    const code = await asset.getCode();
-    config.data = config.data ? config.data + EOL + code : code;
-    config.file = asset.filePath;
-
-    if (config.importer === undefined) {
-      config.importer = [];
-    } else if (!Array.isArray(config.importer)) {
-      config.importer = [config.importer];
+    if (configResult.importer === undefined) {
+      configResult.importer = [];
+    } else if (!Array.isArray(configResult.importer)) {
+      configResult.importer = [configResult.importer];
     }
 
-    config.importer = [...config.importer, resolvePathImporter({resolve})];
+    // 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;
 
-    config.indentedSyntax =
-      typeof config.indentedSyntax === 'boolean'
-        ? config.indentedSyntax
-        : asset.type === 'sass';
-
-    return config;
+    return configResult;
   },
 
-  async transform({asset, options, config, logger}) {
-    await warnAboutNodeSassBeingUnsupported(asset.filePath, logger);
-    let sass = await options.packageManager.require('sass', asset.filePath);
-    const sassRender = promisify(sass.render.bind(sass));
-
+  async transform({asset, options, config, resolve}) {
+    let rawConfig = config ?? {};
+    let sassRender = promisify(sass.render.bind(sass));
     let css;
     try {
-      css = (await sassRender(config)).css;
+      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;
@@ -89,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);
   };
 }