@parcel/transformer-sass 2.0.0-beta.3 → 2.0.0-dev.1510

package/lib/SassTransformer.js

@@ -4,115 +4,86 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 function _plugin() {
   const data = require("@parcel/plugin");
-
   _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;
   };
-
   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 _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 = /^~[^/]/;
-
-var _default = new (_plugin().Transformer)({
+const NODE_MODULE_ALIAS_RE = /^~[^/\\]/;
+var _default = exports.default = new (_plugin().Transformer)({
   async loadConfig({
     config,
     options
   }) {
-    let configFile = await config.getConfig(['.sassrc', '.sassrc.json', '.sassrc.js'], {
+    let configFile = await config.getConfig(['.sassrc', '.sassrc.json', '.sassrc.js', '.sassrc.cjs', '.sassrc.mjs'], {
       packageKey: 'sass'
     });
-    let configResult = configFile ? configFile.contents : {}; // Resolve relative paths from config file
+    let configResult = configFile ? configFile.contents : {};
 
-    if (configFile && configResult.includePaths) {
-      configResult.includePaths = configResult.includePaths.map(p => _path().default.resolve(_path().default.dirname(configFile.filePath), p));
+    // Some packages in the wild declare a field `sass` in the package.json that
+    // is a relative path to the sass entrypoint. In those cases we simply
+    // initialize the config to an empty object.
+    if (typeof configResult === 'string') {
+      configResult = {};
     }
 
-    if (configFile && _path().default.extname(configFile.filePath) === '.js') {
-      config.shouldInvalidateOnStartup();
+    // 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
+    }
 
+    // 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;
-    config.setResult(configResult);
+    return configResult;
   },
-
   async transform({
     asset,
     options,
@@ -122,10 +93,10 @@ var _default = new (_plugin().Transformer)({
     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,
+      let result = await sassRender({
+        ...rawConfig,
         file: asset.filePath,
         data: rawConfig.data ? rawConfig.data + _os().EOL + code : code,
         importer: [...rawConfig.importer, resolvePathImporter({
@@ -137,13 +108,11 @@ var _default = new (_plugin().Transformer)({
         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.addIncludedFile(included);
+          asset.invalidateOnFileChange(included);
         }
       }
-
       if (result.map != null) {
         let map = new (_sourceMap().default)(options.projectRoot);
         map.addVLQMap(JSON.parse(result.map));
@@ -158,16 +127,11 @@ var _default = new (_plugin().Transformer)({
       };
       throw err;
     }
-
     asset.type = 'css';
     asset.setCode(css);
     return [asset];
   }
-
 });
-
-exports.default = _default;
-
 function resolvePathImporter({
   asset,
   resolve,
@@ -187,60 +151,71 @@ function resolvePathImporter({
        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)];
 
+    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' ? ';' : ':'));
+      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}`));
     }
-
-    let filePath;
-    let contents;
-
     if (url[0] !== '~') {
       for (let p of paths) {
-        filePath = _path().default.resolve(p, url);
-
-        try {
-          contents = await asset.fs.readFile(filePath, 'utf8');
-          break;
-        } catch (err) {
-          asset.invalidateOnFileCreate({
-            filePath
-          });
+        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.
-
-
-    if (!contents) {
-      filePath = await resolve(prev, url);
-      contents = await asset.fs.readFile(filePath, 'utf8');
     }
 
-    if (filePath) {
-      return {
-        file: (0, _url().pathToFileURL)(filePath).toString(),
-        contents
-      };
+    // 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) {
-    let url = rawUrl.replace(/^file:\/\//, '');
-
-    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;
-    }
-
-    resolvePath(url, prev).then(done, 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,6 +1,6 @@
 {
   "name": "@parcel/transformer-sass",
-  "version": "2.0.0-beta.3",
+  "version": "2.0.0-dev.1510+a9bb85adf",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -17,12 +17,12 @@
   "source": "src/SassTransformer.js",
   "engines": {
     "node": ">= 12.0.0",
-    "parcel": "^2.0.0-beta.1"
+    "parcel": "^2.0.0-dev.1508+a9bb85adf"
   },
   "dependencies": {
-    "@parcel/plugin": "2.0.0-beta.3",
-    "@parcel/source-map": "2.0.0-rc.1.0",
-    "sass": "^1.32.4"
+    "@parcel/plugin": "2.0.0-dev.1510+a9bb85adf",
+    "@parcel/source-map": "^2.1.1",
+    "sass": "^1.38.0"
   },
-  "gitHead": "bf03f018093f8c7ca4c3a544524e15065a637b3b"
+  "gitHead": "a9bb85adf8f3b38631e178b3aacaa30c78696e36"
 }

package/src/SassTransformer.js

@@ -4,16 +4,15 @@ import path from 'path';
 import {EOL} from 'os';
 import SourceMap from '@parcel/source-map';
 import sass from 'sass';
-import {pathToFileURL} from 'url';
 import {promisify} from 'util';
 
 // E.g: ~library/file.sass
-const WEBPACK_ALIAS_RE = /^~[^/]/;
+const NODE_MODULE_ALIAS_RE = /^~[^/\\]/;
 
 export default (new Transformer({
   async loadConfig({config, options}) {
     let configFile = await config.getConfig(
-      ['.sassrc', '.sassrc.json', '.sassrc.js'],
+      ['.sassrc', '.sassrc.json', '.sassrc.js', '.sassrc.cjs', '.sassrc.mjs'],
       {
         packageKey: 'sass',
       },
@@ -21,6 +20,13 @@ export default (new Transformer({
 
     let configResult = configFile ? configFile.contents : {};
 
+    // Some packages in the wild declare a field `sass` in the package.json that
+    // is a relative path to the sass entrypoint. In those cases we simply
+    // initialize the config to an empty object.
+    if (typeof configResult === 'string') {
+      configResult = {};
+    }
+
     // Resolve relative paths from config file
     if (configFile && configResult.includePaths) {
       configResult.includePaths = configResult.includePaths.map(p =>
@@ -28,10 +34,6 @@ export default (new Transformer({
       );
     }
 
-    if (configFile && path.extname(configFile.filePath) === '.js') {
-      config.shouldInvalidateOnStartup();
-    }
-
     if (configResult.importer === undefined) {
       configResult.importer = [];
     } else if (!Array.isArray(configResult.importer)) {
@@ -45,7 +47,7 @@ export default (new Transformer({
     configResult.omitSourceMapUrl = true;
     configResult.sourceMapContents = false;
 
-    config.setResult(configResult);
+    return configResult;
   },
 
   async transform({asset, options, config, resolve}) {
@@ -76,7 +78,7 @@ export default (new Transformer({
       css = result.css;
       for (let included of result.stats.includedFiles) {
         if (included !== asset.filePath) {
-          asset.addIncludedFile(included);
+          asset.invalidateOnFileChange(included);
         }
       }
 
@@ -105,7 +107,10 @@ export default (new 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) {
+  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.
@@ -128,51 +133,65 @@ function resolvePathImporter({asset, resolve, includePaths, options}) {
       paths.push(
         ...options.env.SASS_PATH.split(
           process.platform === 'win32' ? ';' : ':',
-        ),
+        ).map(p => path.resolve(options.projectRoot, p)),
       );
     }
 
-    let filePath;
-    let contents;
+    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) {
-        filePath = path.resolve(p, url);
-        try {
-          contents = await asset.fs.readFile(filePath, 'utf8');
-          break;
-        } catch (err) {
-          asset.invalidateOnFileCreate({filePath});
+        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.
-    if (!contents) {
-      filePath = await resolve(prev, url);
-      contents = await asset.fs.readFile(filePath, 'utf8');
-    }
-
-    if (filePath) {
-      return {
-        file: pathToFileURL(filePath).toString(),
-        contents,
-      };
+    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) {
-    let url = rawUrl.replace(/^file:\/\//, '');
-
-    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;
-    }
-
-    resolvePath(url, prev).then(done, done);
+  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);
   };
 }