sass-loader 9.0.3 → 10.0.2

package/CHANGELOG.md

@@ -2,6 +2,32 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [10.0.2](https://github.com/webpack-contrib/sass-loader/compare/v10.0.1...v10.0.2) (2020-09-03)
+
+
+### Bug Fixes
+
+* source maps generation ([#886](https://github.com/webpack-contrib/sass-loader/issues/886)) ([8327d55](https://github.com/webpack-contrib/sass-loader/commit/8327d55df9e8fc6e24d2759d7bd50174ed1ff1e4))
+
+### [10.0.1](https://github.com/webpack-contrib/sass-loader/compare/v10.0.0...v10.0.1) (2020-08-25)
+
+### Chore
+
+* update deps
+
+## [10.0.0](https://github.com/webpack-contrib/sass-loader/compare/v10.0.0-rc.0...v10.0.0) (2020-08-24)
+
+### Bug Fixes
+
+* handle absolute windows path in source maps
+
+## [10.0.0-rc.0](https://github.com/webpack-contrib/sass-loader/compare/v9.0.3...v10.0.0-rc.0) (2020-08-24)
+
+
+### ⚠ BREAKING CHANGES
+
+* loader generates absolute `sources` in source maps, also avoids modifying `sass` source maps if the `sourceMap` option is `false`
+
 ### [9.0.3](https://github.com/webpack-contrib/sass-loader/compare/v9.0.2...v9.0.3) (2020-08-05)
 
 

package/dist/index.js

@@ -32,7 +32,8 @@ function loader(content) {
     baseDataPath: 'options'
   });
   const implementation = (0, _utils.getSassImplementation)(options.implementation);
-  const sassOptions = (0, _utils.getSassOptions)(this, options, content, implementation);
+  const useSourceMap = typeof options.sourceMap === 'boolean' ? options.sourceMap : this.sourceMap;
+  const sassOptions = (0, _utils.getSassOptions)(this, options, content, implementation, useSourceMap);
   const shouldUseWebpackImporter = typeof options.webpackImporter === 'boolean' ? options.webpackImporter : true;
 
   if (shouldUseWebpackImporter) {
@@ -56,26 +57,16 @@ function loader(content) {
       return;
     }
 
-    if (result.map) {
-      // eslint-disable-next-line no-param-reassign
-      result.map = JSON.parse(result.map); // result.map.file is an optional property that provides the output filename.
-      // Since we don't know the final filename in the webpack build chain yet, it makes no sense to have it.
-      // eslint-disable-next-line no-param-reassign
+    let map = result.map ? JSON.parse(result.map) : null; // Modify source paths only for webpack, otherwise we do nothing
 
-      delete result.map.file; // node-sass returns POSIX paths, that's why we need to transform them back to native paths.
-      // This fixes an error on windows where the source-map module cannot resolve the source maps.
-      // @see https://github.com/webpack-contrib/sass-loader/issues/366#issuecomment-279460722
-      // eslint-disable-next-line no-param-reassign
-
-      result.map.sourceRoot = _path.default.normalize(result.map.sourceRoot); // eslint-disable-next-line no-param-reassign
-
-      result.map.sources = result.map.sources.map(_path.default.normalize);
+    if (map && useSourceMap) {
+      map = (0, _utils.normalizeSourceMap)(map, this.rootContext);
     }
 
     result.stats.includedFiles.forEach(includedFile => {
       this.addDependency(_path.default.normalize(includedFile));
     });
-    callback(null, result.css.toString(), result.map);
+    callback(null, result.css.toString(), map);
   });
 }
 

package/dist/utils.js

@@ -3,11 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = getPossibleRequests;
 exports.getSassImplementation = getSassImplementation;
 exports.getSassOptions = getSassOptions;
+exports.getWebpackResolver = getWebpackResolver;
 exports.getWebpackImporter = getWebpackImporter;
 exports.getRenderFunctionFromSassImplementation = getRenderFunctionFromSassImplementation;
+exports.normalizeSourceMap = normalizeSourceMap;
 
 var _url = _interopRequireDefault(require("url"));
 
@@ -15,7 +16,7 @@ var _path = _interopRequireDefault(require("path"));
 
 var _semver = _interopRequireDefault(require("semver"));
 
-var _klona = _interopRequireDefault(require("klona"));
+var _full = require("klona/full");
 
 var _loaderUtils = require("loader-utils");
 
@@ -41,6 +42,12 @@ function getDefaultSassImplementation() {
 
   return require(sassImplPkg);
 }
+/**
+ * @public
+ * This function is not Webpack-specific and can be used by tools wishing to
+ * mimic `sass-loader`'s behaviour, so its signature should not be changed.
+ */
+
 
 function getSassImplementation(implementation) {
   let resolvedImplementation = implementation;
@@ -102,12 +109,13 @@ function proxyCustomImporters(importers, loaderContext) {
  * @param {object} loaderOptions
  * @param {string} content
  * @param {object} implementation
+ * @param {boolean} useSourceMap
  * @returns {Object}
  */
 
 
-function getSassOptions(loaderContext, loaderOptions, content, implementation) {
-  const options = (0, _klona.default)(loaderOptions.sassOptions ? typeof loaderOptions.sassOptions === 'function' ? loaderOptions.sassOptions(loaderContext) || {} : loaderOptions.sassOptions : {});
+function getSassOptions(loaderContext, loaderOptions, content, implementation, useSourceMap) {
+  const options = (0, _full.klona)(loaderOptions.sassOptions ? typeof loaderOptions.sassOptions === 'function' ? loaderOptions.sassOptions(loaderContext) || {} : loaderOptions.sassOptions : {});
   const isDartSass = implementation.info.includes('dart-sass');
 
   if (isDartSass) {
@@ -141,8 +149,6 @@ function getSassOptions(loaderContext, loaderOptions, content, implementation) {
     options.outputStyle = 'compressed';
   }
 
-  const useSourceMap = typeof loaderOptions.sourceMap === 'boolean' ? loaderOptions.sourceMap : loaderContext.sourceMap;
-
   if (useSourceMap) {
     // Deliberately overriding the sourceMap option here.
     // node-sass won't produce source maps if the data option is used and options.sourceMap is not a string.
@@ -150,8 +156,8 @@ function getSassOptions(loaderContext, loaderOptions, content, implementation) {
     // But since we're using the data option, the source map will not actually be written, but
     // all paths in sourceMap.sources will be relative to that path.
     // Pretty complicated... :(
-    options.sourceMap = _path.default.join(process.cwd(), '/sass.css.map');
-    options.sourceMapRoot = process.cwd();
+    options.sourceMap = true;
+    options.outFile = _path.default.join(loaderContext.rootContext, 'style.css.map');
     options.sourceMapContents = true;
     options.omitSourceMapUrl = true;
     options.sourceMapEmbed = false;
@@ -195,15 +201,14 @@ const isModuleImport = /^~([^/]+|[^/]+\/|@[^/]+[/][^/]+|@[^/]+\/?|@[^/]+[/][^/]+
  *
  * @param {string} url
  * @param {boolean} forWebpackResolver
- * @param {Object} loaderContext
+ * @param {string} rootContext
  * @returns {Array<string>}
  */
 
-function getPossibleRequests(loaderContext, // eslint-disable-next-line no-shadow
-url, forWebpackResolver = false) {
+function getPossibleRequests( // eslint-disable-next-line no-shadow
+url, forWebpackResolver = false, rootContext = false) {
   const request = (0, _loaderUtils.urlToRequest)(url, // Maybe it is server-relative URLs
-  forWebpackResolver && url.charAt(0) === '/' ? loaderContext.rootContext : // eslint-disable-next-line no-undefined
-  undefined); // In case there is module request, send this to webpack resolver
+  forWebpackResolver && rootContext); // In case there is module request, send this to webpack resolver
 
   if (forWebpackResolver && isModuleImport.test(url)) {
     return [...new Set([request, url])];
@@ -232,12 +237,41 @@ url, forWebpackResolver = false) {
   return [...new Set([`${dirname}/_${basename}`, request].concat(forWebpackResolver ? [`${_path.default.dirname(url)}/_${basename}`, url] : []))];
 }
 
-const matchCss = /\.css$/i;
-const isSpecialModuleImport = /^~[^/]+$/; // `[drive_letter]:\` + `\\[server]\[sharename]\`
+function promiseResolve(callbackResolve) {
+  return (context, request) => new Promise((resolve, reject) => {
+    callbackResolve(context, request, (error, result) => {
+      if (error) {
+        reject(error);
+      } else {
+        resolve(result);
+      }
+    });
+  });
+}
 
-const isNativeWin32Path = /^[a-zA-Z]:[/\\]|^\\\\/i;
+const IS_SPECIAL_MODULE_IMPORT = /^~[^/]+$/; // `[drive_letter]:\` + `\\[server]\[sharename]\`
 
-function getWebpackImporter(loaderContext, implementation, includePaths) {
+const IS_NATIVE_WIN32_PATH = /^[a-z]:[/\\]|^\\\\/i;
+/**
+ * @public
+ * Create the resolve function used in the custom Sass importer.
+ *
+ * Can be used by external tools to mimic how `sass-loader` works, for example
+ * in a Jest transform. Such usages will want to wrap `resolve.create` from
+ * [`enhanced-resolve`]{@link https://github.com/webpack/enhanced-resolve} to
+ * pass as the `resolverFactory` argument.
+ *
+ * @param {Function} resolverFactory - A factory function for creating a Webpack
+ *   resolver.
+ * @param {Object} implementation - The imported Sass implementation, both
+ *   `sass` (Dart Sass) and `node-sass` are supported.
+ * @param {string[]} [includePaths] - The list of include paths passed to Sass.
+ * @param {boolean} [rootContext] - The configured Webpack root context.
+ *
+ * @throws If a compatible Sass implementation cannot be found.
+ */
+
+function getWebpackResolver(resolverFactory, implementation, includePaths = [], rootContext = false) {
   async function startResolving(resolutionMap) {
     if (resolutionMap.length === 0) {
       return Promise.reject();
@@ -248,10 +282,9 @@ function getWebpackImporter(loaderContext, implementation, includePaths) {
       context,
       possibleRequests
     }] = resolutionMap;
-    let result;
 
     try {
-      result = await resolve(context, possibleRequests[0]);
+      return await resolve(context, possibleRequests[0]);
     } catch (_ignoreError) {
       const [, ...tailResult] = possibleRequests;
 
@@ -263,19 +296,11 @@ function getWebpackImporter(loaderContext, implementation, includePaths) {
 
       resolutionMap[0].possibleRequests = tailResult;
       return startResolving(resolutionMap);
-    } // Add the result as dependency.
-    // Although we're also using stats.includedFiles, this might come in handy when an error occurs.
-    // In this case, we don't get stats.includedFiles from node-sass/sass.
-
-
-    loaderContext.addDependency(_path.default.normalize(result)); // By removing the CSS file extension, we trigger node-sass to include the CSS file instead of just linking it.
-
-    return {
-      file: result.replace(matchCss, '')
-    };
+    }
   }
 
-  const sassResolve = loaderContext.getResolve({
+  const isDartSass = implementation.info.includes('dart-sass');
+  const sassResolve = promiseResolve(resolverFactory({
     alias: [],
     aliasFields: [],
     conditionNames: [],
@@ -286,34 +311,35 @@ function getWebpackImporter(loaderContext, implementation, includePaths) {
     mainFiles: ['_index', 'index'],
     modules: [],
     restrictions: [/\.((sa|sc|c)ss)$/i]
-  });
-  const webpackResolve = loaderContext.getResolve({
+  }));
+  const webpackResolve = promiseResolve(resolverFactory({
     conditionNames: ['sass', 'style'],
     mainFields: ['sass', 'style', 'main', '...'],
     mainFiles: ['_index', 'index', '...'],
     extensions: ['.sass', '.scss', '.css'],
     restrictions: [/\.((sa|sc|c)ss)$/i]
-  });
-  return (originalUrl, prev, done) => {
-    let request = originalUrl;
-    const isFileScheme = originalUrl.slice(0, 5).toLowerCase() === 'file:';
+  }));
+  return (context, request) => {
+    const originalRequest = request;
+    const isFileScheme = originalRequest.slice(0, 5).toLowerCase() === 'file:';
 
     if (isFileScheme) {
       try {
         // eslint-disable-next-line no-param-reassign
-        request = _url.default.fileURLToPath(originalUrl);
+        request = _url.default.fileURLToPath(originalRequest);
       } catch (ignoreError) {
+        // eslint-disable-next-line no-param-reassign
         request = request.slice(7);
       }
     }
 
     let resolutionMap = [];
     const needEmulateSassResolver = // `sass` doesn't support module import
-    !isSpecialModuleImport.test(request) && // We need improve absolute paths handling.
+    !IS_SPECIAL_MODULE_IMPORT.test(request) && // We need improve absolute paths handling.
     // Absolute paths should be resolved:
     // - Server-relative URLs - `<context>/path/to/file.ext` (where `<context>` is root context)
     // - Absolute path - `/full/path/to/file.ext` or `C:\\full\path\to\file.ext`
-    !isFileScheme && !originalUrl.startsWith('/') && !isNativeWin32Path.test(originalUrl);
+    !isFileScheme && !originalRequest.startsWith('/') && !IS_NATIVE_WIN32_PATH.test(originalRequest);
 
     if (includePaths.length > 0 && needEmulateSassResolver) {
       // The order of import precedence is as follows:
@@ -325,34 +351,54 @@ function getWebpackImporter(loaderContext, implementation, includePaths) {
       // 5. Filesystem imports relative to a `SASS_PATH` path.
       //
       // Because `sass`/`node-sass` run custom importers before `3`, `4` and `5` points, we need to emulate this behavior to avoid wrong resolution.
-      const sassPossibleRequests = getPossibleRequests(loaderContext, request);
-      const isDartSass = implementation.info.includes('dart-sass'); // `node-sass` calls our importer before `1. Filesystem imports relative to the base file.`, so we need emulate this too
+      const sassPossibleRequests = getPossibleRequests(request); // `node-sass` calls our importer before `1. Filesystem imports relative to the base file.`, so we need emulate this too
 
       if (!isDartSass) {
         resolutionMap = resolutionMap.concat({
           resolve: sassResolve,
-          context: _path.default.dirname(prev),
+          context: _path.default.dirname(context),
           possibleRequests: sassPossibleRequests
         });
       }
 
-      resolutionMap = resolutionMap.concat(includePaths.map(context => ({
+      resolutionMap = resolutionMap.concat( // eslint-disable-next-line no-shadow
+      includePaths.map(context => ({
         resolve: sassResolve,
         context,
         possibleRequests: sassPossibleRequests
       })));
     }
 
-    const webpackPossibleRequests = getPossibleRequests(loaderContext, request, true);
+    const webpackPossibleRequests = getPossibleRequests(request, true, rootContext);
     resolutionMap = resolutionMap.concat({
       resolve: webpackResolve,
-      context: _path.default.dirname(prev),
+      context: _path.default.dirname(context),
       possibleRequests: webpackPossibleRequests
     });
-    startResolving(resolutionMap) // Catch all resolving errors, return the original file and pass responsibility back to other custom importers
-    .catch(() => ({
-      file: originalUrl
-    })).then(result => done(result));
+    return startResolving(resolutionMap);
+  };
+}
+
+const matchCss = /\.css$/i;
+
+function getWebpackImporter(loaderContext, implementation, includePaths) {
+  const resolve = getWebpackResolver(loaderContext.getResolve, implementation, includePaths, loaderContext.rootContext);
+  return (originalUrl, prev, done) => {
+    resolve(prev, originalUrl).then(result => {
+      // Add the result as dependency.
+      // Although we're also using stats.includedFiles, this might come in handy when an error occurs.
+      // In this case, we don't get stats.includedFiles from node-sass/sass.
+      loaderContext.addDependency(_path.default.normalize(result)); // By removing the CSS file extension, we trigger node-sass to include the CSS file instead of just linking it.
+
+      done({
+        file: result.replace(matchCss, '')
+      });
+    }) // Catch all resolving errors, return the original file and pass responsibility back to other custom importers
+    .catch(() => {
+      done({
+        file: originalUrl
+      });
+    });
   };
 }
 
@@ -380,4 +426,46 @@ function getRenderFunctionFromSassImplementation(implementation) {
   }
 
   return nodeSassJobQueue.push.bind(nodeSassJobQueue);
+}
+
+const ABSOLUTE_SCHEME = /^[A-Za-z0-9+\-.]+:/;
+
+function getURLType(source) {
+  if (source[0] === '/') {
+    if (source[1] === '/') {
+      return 'scheme-relative';
+    }
+
+    return 'path-absolute';
+  }
+
+  if (IS_NATIVE_WIN32_PATH.test(source)) {
+    return 'path-absolute';
+  }
+
+  return ABSOLUTE_SCHEME.test(source) ? 'absolute' : 'path-relative';
+}
+
+function normalizeSourceMap(map, rootContext) {
+  const newMap = map; // result.map.file is an optional property that provides the output filename.
+  // Since we don't know the final filename in the webpack build chain yet, it makes no sense to have it.
+  // eslint-disable-next-line no-param-reassign
+
+  delete newMap.file; // eslint-disable-next-line no-param-reassign
+
+  newMap.sourceRoot = ''; // node-sass returns POSIX paths, that's why we need to transform them back to native paths.
+  // This fixes an error on windows where the source-map module cannot resolve the source maps.
+  // @see https://github.com/webpack-contrib/sass-loader/issues/366#issuecomment-279460722
+  // eslint-disable-next-line no-param-reassign
+
+  newMap.sources = newMap.sources.map(source => {
+    const sourceType = getURLType(source); // Do no touch `scheme-relative`, `path-absolute` and `absolute` types
+
+    if (sourceType === 'path-relative') {
+      return _path.default.resolve(rootContext, _path.default.normalize(source));
+    }
+
+    return source;
+  });
+  return newMap;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sass-loader",
-  "version": "9.0.3",
+  "version": "10.0.2",
   "description": "Sass loader for webpack",
   "license": "MIT",
   "repository": "webpack-contrib/sass-loader",
@@ -56,43 +56,44 @@
     }
   },
   "dependencies": {
-    "klona": "^1.1.2",
+    "klona": "^2.0.3",
     "loader-utils": "^2.0.0",
     "neo-async": "^2.6.2",
-    "schema-utils": "^2.7.0",
+    "schema-utils": "^2.7.1",
     "semver": "^7.3.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.10.5",
-    "@babel/core": "^7.11.0",
-    "@babel/preset-env": "^7.11.0",
-    "@commitlint/cli": "^9.1.1",
-    "@commitlint/config-conventional": "^9.1.1",
+    "@babel/cli": "^7.11.5",
+    "@babel/core": "^7.11.5",
+    "@babel/preset-env": "^7.11.5",
+    "@commitlint/cli": "^10.0.0",
+    "@commitlint/config-conventional": "^10.0.0",
     "@webpack-contrib/defaults": "^6.3.0",
     "@webpack-contrib/eslint-config-webpack": "^3.0.0",
-    "babel-jest": "^26.2.2",
-    "bootstrap": "^4.5.1",
+    "babel-jest": "^26.3.0",
+    "bootstrap": "^4.5.2",
     "bootstrap-sass": "^3.4.1",
     "cross-env": "^7.0.2",
-    "css-loader": "^4.2.0",
+    "css-loader": "^4.2.2",
     "del": "^5.1.0",
     "del-cli": "^3.0.1",
-    "eslint": "^7.6.0",
+    "enhanced-resolve": "^4.3.0",
+    "eslint": "^7.8.1",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-import": "^2.21.2",
     "fibers": "^5.0.0",
-    "file-loader": "^6.0.0",
+    "file-loader": "^6.1.0",
     "foundation-sites": "^6.6.3",
     "husky": "^4.2.5",
-    "jest": "^26.2.2",
-    "lint-staged": "^10.2.11",
+    "jest": "^26.4.2",
+    "lint-staged": "^10.3.0",
     "material-components-web": "^7.0.0",
     "memfs": "^3.2.0",
     "node-sass": "^4.14.1",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.0.5",
+    "prettier": "^2.1.1",
     "sass": "^1.26.10",
-    "standard-version": "^8.0.2",
+    "standard-version": "^9.0.0",
     "style-loader": "^1.2.1",
     "webpack": "^4.44.1"
   },