sass-loader 7.0.1 → 7.2.0

package/CHANGELOG.md

@@ -2,6 +2,57 @@
 
 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.
 
+<a name="7.2.0"></a>
+# [7.2.0](https://github.com/webpack-contrib/sass-loader/compare/v7.1.0...v7.2.0) (2019-08-08)
+
+
+### Bug Fixes
+
+* better handle stdin in sources ([#681](https://github.com/webpack-contrib/sass-loader/issues/681)) ([e279f2a](https://github.com/webpack-contrib/sass-loader/commit/e279f2a))
+* prefer `sass`/`scss`/`css` extensions ([#711](https://github.com/webpack-contrib/sass-loader/issues/711)) ([6fc9d4e](https://github.com/webpack-contrib/sass-loader/commit/6fc9d4e))
+* relax node engine ([#708](https://github.com/webpack-contrib/sass-loader/issues/708)) ([2a51502](https://github.com/webpack-contrib/sass-loader/commit/2a51502))
+
+
+### Features
+
+* allow passing `functions` option as function ([#651](https://github.com/webpack-contrib/sass-loader/issues/651)) ([6c9654d](https://github.com/webpack-contrib/sass-loader/commit/6c9654d))
+* support `data` as `Function` ([#648](https://github.com/webpack-contrib/sass-loader/issues/648)) ([aa64e1b](https://github.com/webpack-contrib/sass-loader/commit/aa64e1b))
+* support `sass` and `style` fields in `package.json` ([#647](https://github.com/webpack-contrib/sass-loader/issues/647)) ([a8709c9](https://github.com/webpack-contrib/sass-loader/commit/a8709c9))
+* support auto resolving `dart-sass` ([ff90dd6](https://github.com/webpack-contrib/sass-loader/commit/ff90dd6))
+
+
+
+<a name="7.1.0"></a>
+# [7.1.0](https://github.com/webpack-contrib/sass-loader/compare/v7.0.3...v7.1.0) (2018-08-01)
+
+
+### Features
+
+* Make this package implementation-agnostic (#573) ([bed9fb5](https://github.com/webpack-contrib/sass-loader/commit/bed9fb5)), closes [#435](https://github.com/webpack-contrib/sass-loader/issues/435)
+
+
+
+<a name="7.0.3"></a>
+## [7.0.3](https://github.com/webpack-contrib/sass-loader/compare/v7.0.2...v7.0.3) (2018-06-05)
+
+
+### Bug Fixes
+
+* Bare imports not working sometimes (#579) ([c348281](https://github.com/webpack-contrib/sass-loader/commit/c348281)), closes [#566](https://github.com/webpack-contrib/sass-loader/issues/566)
+
+
+
+<a name="7.0.2"></a>
+## [7.0.2](https://github.com/webpack-contrib/sass-loader/compare/v7.0.1...v7.0.2) (2018-06-02)
+
+
+### Bug Fixes
+
+* Errors being swallowed when trying to load node-sass (#576) ([6dfb274](https://github.com/webpack-contrib/sass-loader/commit/6dfb274)), closes [#563](https://github.com/webpack-contrib/sass-loader/issues/563)
+* Report error to user for problems loading node-sass (#562) ([2529c07](https://github.com/webpack-contrib/sass-loader/commit/2529c07))
+
+
+
 <a name="7.0.1"></a>
 ## [7.0.1](https://github.com/webpack-contrib/sass-loader/compare/v7.0.0...v7.0.1) (2018-04-13)
 

package/README.md

@@ -18,7 +18,7 @@
   <p>Loads a Sass/SCSS file and compiles it to CSS.</p>
 </div>
 
-Use the [css-loader](https://github.com/webpack-contrib/css-loader) or the [raw-loader](https://github.com/webpack-contrib/raw-loader) to turn it into a JS module and the [ExtractTextPlugin](https://github.com/webpack-contrib/extract-text-webpack-plugin) to extract it into a separate file.
+Use the [css-loader](https://github.com/webpack-contrib/css-loader) or the [raw-loader](https://github.com/webpack-contrib/raw-loader) to turn it into a JS module and the [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) to extract it into a separate file.
 Looking for the webpack 1 loader? Check out the [archive/webpack-1 branch](https://github.com/webpack-contrib/sass-loader/tree/archive/webpack-1).
 
 <h2 align="center">Install</h2>
@@ -27,8 +27,14 @@ Looking for the webpack 1 loader? Check out the [archive/webpack-1 branch](https
 npm install sass-loader node-sass webpack --save-dev
 ```
 
-The sass-loader requires [node-sass](https://github.com/sass/node-sass) and [webpack](https://github.com/webpack)
-as [`peerDependency`](https://docs.npmjs.com/files/package.json#peerdependencies). Thus you are able to control the versions accurately.
+The sass-loader requires [webpack](https://github.com/webpack) as a
+[`peerDependency`](https://docs.npmjs.com/files/package.json#peerdependencies)
+and it requires you to install either [Node Sass](https://github.com/sass/node-sass) or [Dart Sass](https://github.com/sass/dart-sass) on your
+own. This allows you to control the versions of all your dependencies, and to
+choose which Sass implementation to use.
+
+[Node Sass]: https://github.com/sass/node-sass
+[Dart Sass]: http://sass-lang.com/dart-sass
 
 <h2 align="center">Examples</h2>
 
@@ -38,6 +44,25 @@ Chain the sass-loader with the [css-loader](https://github.com/webpack-contrib/c
 npm install style-loader css-loader --save-dev
 ```
 
+```js
+// webpack.config.js
+module.exports = {
+	...
+    module: {
+        rules: [{
+            test: /\.scss$/,
+            use: [
+                "style-loader", // creates style nodes from JS strings
+                "css-loader", // translates CSS into CommonJS
+                "sass-loader" // compiles Sass to CSS, using Node Sass by default
+            ]
+        }]
+    }
+};
+```
+
+You can also pass options directly to [Node Sass][] or [Dart Sass][]:
+
 ```js
 // webpack.config.js
 module.exports = {
@@ -46,21 +71,82 @@ module.exports = {
         rules: [{
             test: /\.scss$/,
             use: [{
-                loader: "style-loader" // creates style nodes from JS strings
+                loader: "style-loader"
             }, {
-                loader: "css-loader" // translates CSS into CommonJS
+                loader: "css-loader"
             }, {
-                loader: "sass-loader" // compiles Sass to CSS
+                loader: "sass-loader",
+                options: {
+                    includePaths: ["absolute/path/a", "absolute/path/b"]
+                }
             }]
         }]
     }
 };
 ```
 
-You can also pass options directly to [node-sass](https://github.com/andrew/node-sass) by specifying an `options` property like this:
+See [the Node Sass documentation](https://github.com/sass/node-sass/blob/master/README.md#options) for all available Sass options.
+
+By default the loader resolve the implementation based on your dependencies.
+Just add required implementation to `package.json` 
+(`node-sass` or `sass` package) and install dependencies. 
+
+Example where the `sass-loader` loader uses the `sass` (`dart-sass`) implementation:
+
+**package.json**
+
+```json
+{
+   "devDependencies": {
+      "sass-loader": "*",
+      "sass": "*"
+   }
+}
+```
+
+Example where the `sass-loader` loader uses the `node-sass` implementation:
+
+**package.json**
+
+```json
+{
+   "devDependencies": {
+      "sass-loader": "*",
+      "node-sass": "*"
+   }
+}
+```
+
+Beware the situation 
+when `node-sass` and `sass` was installed, by default the `sass-loader` 
+prefers `node-sass`, to avoid this situation use the `implementation` option. 
+
+The special `implementation` option determines which implementation of Sass to
+use. It takes either a [Node Sass][] or a [Dart Sass][] module. For example, to
+use Dart Sass, you'd pass:
+
+```js
+// ...
+    {
+        loader: "sass-loader",
+        options: {
+            implementation: require("sass")
+        }
+    }
+// ...
+```
+
+Note that when using Dart Sass, **synchronous compilation is twice as fast as
+asynchronous compilation** by default, due to the overhead of asynchronous
+callbacks. To avoid this overhead, you can use the
+[`fibers`](https://www.npmjs.com/package/fibers) package to call asynchronous
+importers from the synchronous code path. To enable this, pass the `Fiber` class
+to the `fiber` option:
 
 ```js
 // webpack.config.js
+const Fiber = require('fibers');
+
 module.exports = {
 	...
     module: {
@@ -73,7 +159,8 @@ module.exports = {
             }, {
                 loader: "sass-loader",
                 options: {
-                    includePaths: ["absolute/path/a", "absolute/path/b"]
+                    implementation: require("sass"),
+                    fiber: Fiber
                 }
             }]
         }]
@@ -81,38 +168,33 @@ module.exports = {
 };
 ```
 
-See [node-sass](https://github.com/andrew/node-sass) for all available Sass options.
-
 ### In production
 
-Usually, it's recommended to extract the style sheets into a dedicated file in production using the [ExtractTextPlugin](https://github.com/webpack-contrib/extract-text-webpack-plugin). This way your styles are not dependent on JavaScript:
+Usually, it's recommended to extract the style sheets into a dedicated file in production using the [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin). This way your styles are not dependent on JavaScript:
 
 ```js
-const ExtractTextPlugin = require("extract-text-webpack-plugin");
-
-const extractSass = new ExtractTextPlugin({
-    filename: "[name].[contenthash].css",
-    disable: process.env.NODE_ENV === "development"
-});
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 module.exports = {
 	...
     module: {
         rules: [{
             test: /\.scss$/,
-            use: extractSass.extract({
-                use: [{
-                    loader: "css-loader"
-                }, {
-                    loader: "sass-loader"
-                }],
-                // use style-loader in development
-                fallback: "style-loader"
-            })
+            use: [
+                // fallback to style-loader in development
+                process.env.NODE_ENV !== 'production' ? 'style-loader' : MiniCssExtractPlugin.loader,
+                "css-loader",
+                "sass-loader"
+            ]
         }]
     },
     plugins: [
-        extractSass
+        new MiniCssExtractPlugin({
+            // Options similar to the same options in webpackOptions.output
+            // both options are optional
+            filename: "[name].css",
+            chunkFilename: "[id].css"
+        })
     ]
 };
 ```
@@ -121,7 +203,7 @@ module.exports = {
 
 ### Imports
 
-webpack provides an [advanced mechanism to resolve files](https://webpack.js.org/concepts/module-resolution/). The sass-loader uses node-sass' custom importer feature to pass all queries to the webpack resolving engine. Thus you can import your Sass modules from `node_modules`. Just prepend them with a `~` to tell webpack that this is not a relative import:
+webpack provides an [advanced mechanism to resolve files](https://webpack.js.org/concepts/module-resolution/). The sass-loader uses Sass's custom importer feature to pass all queries to the webpack resolving engine. Thus you can import your Sass modules from `node_modules`. Just prepend them with a `~` to tell webpack that this is not a relative import:
 
 ```css
 @import "~bootstrap/dist/css/bootstrap";
@@ -148,7 +230,7 @@ Bundling CSS with webpack has some nice advantages like referencing images and f
 There are two possibilities to extract a style sheet from the bundle:
 
 - [extract-loader](https://github.com/peerigon/extract-loader) (simpler, but specialized on the css-loader's output)
-- [extract-text-webpack-plugin](https://github.com/webpack-contrib/extract-text-webpack-plugin) (more complex, but works in all use-cases)
+- [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) (use this, when using webpack 4 configuration. Works in all use-cases)
 
 ### Source maps
 
@@ -162,7 +244,9 @@ module.exports = {
         rules: [{
             test: /\.scss$/,
             use: [{
-                loader: "style-loader"
+                loader: "style-loader", options: {
+                    sourceMap: true
+                }
             }, {
                 loader: "css-loader", options: {
                     sourceMap: true
@@ -192,6 +276,27 @@ If you want to prepend Sass code before the actual entry file, you can set the `
 }
 ```
 
+The `data` option supports `Function` notation:
+
+```javascript
+{
+    loader: "sass-loader",
+    options: {
+        data: (loaderContext) => {
+          // More information about avalaible options https://webpack.js.org/api/loaders/
+          const { resourcePath, rootContext } = loaderContext;
+          const relativePath = path.relative(rootContext,resourcePath);
+          
+          if (relativePath === "styles/foo.scss") {
+             return "$value: 100px;"
+          }
+          
+          return "$value: 200px;"
+        }
+    }
+}
+```
+
 **Please note:** Since you're injecting code, this will break the source mappings in your entry file. Often there's a simpler solution than this, like multiple Sass entry files.
 
 <h2 align="center">Maintainers</h2>

package/lib/formatSassError.js

@@ -1,17 +1,17 @@
-"use strict";
+'use strict';
 
-const path = require("path");
-const os = require("os");
-const fs = require("fs");
+const path = require('path');
+const os = require('os');
+const fs = require('fs');
 
 // A typical sass error looks like this
-const SassError = { // eslint-disable-line no-unused-vars
-    message: "invalid property name",
-    column: 14,
-    line: 1,
-    file: "stdin",
-    status: 1
-};
+// const SassError = {
+//   message: "invalid property name",
+//   column: 14,
+//   line: 1,
+//   file: "stdin",
+//   status: 1
+// };
 
 /**
  * Enhances the sass error with additional information about what actually went wrong.
@@ -20,31 +20,37 @@ const SassError = { // eslint-disable-line no-unused-vars
  * @param {string} resourcePath
  */
 function formatSassError(err, resourcePath) {
-    // Instruct webpack to hide the JS stack from the console
-    // Usually you're only interested in the SASS stack in this case.
-    err.hideStack = true;
+  // Instruct webpack to hide the JS stack from the console
+  // Usually you're only interested in the SASS stack in this case.
+  // eslint-disable-next-line no-param-reassign
+  err.hideStack = true;
 
-    // The file property is missing in rare cases.
-    // No improvement in the error is possible.
-    if (!err.file) {
-        return;
-    }
+  // The file property is missing in rare cases.
+  // No improvement in the error is possible.
+  if (!err.file) {
+    return;
+  }
 
-    let msg = err.message;
+  let msg = err.message;
 
-    if (err.file === "stdin") {
-        err.file = resourcePath;
-    }
-    // node-sass returns UNIX-style paths
-    err.file = path.normalize(err.file);
+  if (err.file === 'stdin') {
+    // eslint-disable-next-line no-param-reassign
+    err.file = resourcePath;
+  }
 
-    // The 'Current dir' hint of node-sass does not help us, we're providing
-    // additional information by reading the err.file property
-    msg = msg.replace(/\s*Current dir:\s*/, "");
+  // node-sass returns UNIX-style paths
+  // eslint-disable-next-line no-param-reassign
+  err.file = path.normalize(err.file);
 
-    err.message = getFileExcerptIfPossible(err) +
-        msg.charAt(0).toUpperCase() + msg.slice(1) + os.EOL +
-        "      in " + err.file + " (line " + err.line + ", column " + err.column + ")";
+  // The 'Current dir' hint of node-sass does not help us, we're providing
+  // additional information by reading the err.file property
+  msg = msg.replace(/\s*Current dir:\s*/, '');
+
+  // eslint-disable-next-line no-param-reassign
+  err.message = `${getFileExcerptIfPossible(err) +
+    msg.charAt(0).toUpperCase() +
+    msg.slice(1) +
+    os.EOL}      in ${err.file} (line ${err.line}, column ${err.column})`;
 }
 
 /**
@@ -57,17 +63,17 @@ function formatSassError(err, resourcePath) {
  * @returns {string}
  */
 function getFileExcerptIfPossible(err) {
-    try {
-        const content = fs.readFileSync(err.file, "utf8");
+  try {
+    const content = fs.readFileSync(err.file, 'utf8');
 
-        return os.EOL +
-            content.split(os.EOL)[err.line - 1] + os.EOL +
-            new Array(err.column - 1).join(" ") + "^" + os.EOL +
-            "      ";
-    } catch (err) {
-        // If anything goes wrong here, we don't want any errors to be reported to the user
-        return "";
-    }
+    return `${os.EOL +
+      content.split(os.EOL)[err.line - 1] +
+      os.EOL +
+      new Array(err.column - 1).join(' ')}^${os.EOL}      `;
+  } catch (ignoreErr) {
+    // If anything goes wrong here, we don't want any errors to be reported to the user
+    return '';
+  }
 }
 
 module.exports = formatSassError;

package/lib/importsToResolve.js

@@ -1,9 +1,10 @@
-"use strict";
+'use strict';
 
-const path = require("path");
-const utils = require("loader-utils");
+const path = require('path');
 
-const matchModuleImport = /^~([^\/]+|@[^\/]+[\/][^\/]+)$/g;
+const utils = require('loader-utils');
+
+const matchModuleImport = /^~([^/]+|@[^/]+[/][^/]+)$/;
 
 /**
  * When libsass tries to resolve an import, it uses a special algorithm.
@@ -15,46 +16,47 @@ const matchModuleImport = /^~([^\/]+|@[^\/]+[\/][^\/]+)$/g;
  * @returns {Array<string>}
  */
 function importsToResolve(url) {
-    const request = utils.urlToRequest(url);
-    // Keep in mind: ext can also be something like '.datepicker' when the true extension is omitted and the filename contains a dot.
-    // @see https://github.com/webpack-contrib/sass-loader/issues/167
-    const ext = path.extname(request);
-
-    if (matchModuleImport.test(url)) {
-        return [request, url];
-    }
-
-    // libsass' import algorithm works like this:
-
-    // In case there is a file extension...
-    //   - If the file is a CSS-file, do not include it all, but just link it via @import url().
-    //   - The exact file name must match (no auto-resolving of '_'-modules).
-    if (ext === ".css") {
-        return [];
-    }
-    if (ext === ".scss" || ext === ".sass") {
-        return [request, url];
-    }
-
-    // In case there is no file extension...
-    //   - Prefer modules starting with '_'.
-    //   - File extension precedence: .scss, .sass, .css.
-    const basename = path.basename(request);
-
-    if (basename.charAt(0) === "_") {
-        return [
-            `${ request }.scss`, `${ request }.sass`, `${ request }.css`,
-            url
-        ];
-    }
-
-    const dirname = path.dirname(request);
-
-    return [
-        `${ dirname }/_${ basename }.scss`, `${ dirname }/_${ basename }.sass`, `${ dirname }/_${ basename }.css`,
-        `${ request }.scss`, `${ request }.sass`, `${ request }.css`,
-        url
-    ];
+  const request = utils.urlToRequest(url);
+  // Keep in mind: ext can also be something like '.datepicker' when the true extension is omitted and the filename contains a dot.
+  // @see https://github.com/webpack-contrib/sass-loader/issues/167
+  const ext = path.extname(request);
+
+  if (matchModuleImport.test(url)) {
+    return [request, url];
+  }
+
+  // libsass' import algorithm works like this:
+
+  // In case there is a file extension...
+  //   - If the file is a CSS-file, do not include it all, but just link it via @import url().
+  //   - The exact file name must match (no auto-resolving of '_'-modules).
+  if (ext === '.css') {
+    return [];
+  }
+  if (ext === '.scss' || ext === '.sass') {
+    return [request, url];
+  }
+
+  // In case there is no file extension...
+  //   - Prefer modules starting with '_'.
+  //   - File extension precedence: .scss, .sass, .css.
+  const basename = path.basename(request);
+
+  if (basename.charAt(0) === '_') {
+    return [`${request}.scss`, `${request}.sass`, `${request}.css`, url];
+  }
+
+  const dirname = path.dirname(request);
+
+  return [
+    `${dirname}/_${basename}.scss`,
+    `${dirname}/_${basename}.sass`,
+    `${dirname}/_${basename}.css`,
+    `${request}.scss`,
+    `${request}.sass`,
+    `${request}.css`,
+    url,
+  ];
 }
 
 module.exports = importsToResolve;

package/lib/loader.js

@@ -1,104 +1,206 @@
-"use strict";
+'use strict';
 
-const path = require("path");
-const async = require("neo-async");
-const formatSassError = require("./formatSassError");
-const webpackImporter = require("./webpackImporter");
-const normalizeOptions = require("./normalizeOptions");
-const pify = require("pify");
+const path = require('path');
 
-// This queue makes sure node-sass leaves one thread available for executing
-// fs tasks when running the custom importer code.
-// This can be removed as soon as node-sass implements a fix for this.
-const threadPoolSize = process.env.UV_THREADPOOL_SIZE || 4;
-let asyncSassJobQueue = null;
+const async = require('neo-async');
+const pify = require('pify');
+const semver = require('semver');
+
+const formatSassError = require('./formatSassError');
+const webpackImporter = require('./webpackImporter');
+const normalizeOptions = require('./normalizeOptions');
+
+let nodeSassJobQueue = null;
+
+// Very hacky check
+function hasGetResolve(loaderContext) {
+  return (
+    loaderContext.getResolve &&
+    // eslint-disable-next-line no-underscore-dangle
+    loaderContext._compiler &&
+    // eslint-disable-next-line no-underscore-dangle
+    loaderContext._compiler.resolverFactory &&
+    // eslint-disable-next-line no-underscore-dangle
+    loaderContext._compiler.resolverFactory._create &&
+    /cachedCleverMerge/.test(
+      // eslint-disable-next-line no-underscore-dangle
+      loaderContext._compiler.resolverFactory._create.toString()
+    )
+  );
+}
 
 /**
- * The sass-loader makes node-sass available to webpack modules.
+ * The sass-loader makes node-sass and dart-sass available to webpack modules.
  *
  * @this {LoaderContext}
  * @param {string} content
  */
 function sassLoader(content) {
-    if (asyncSassJobQueue === null) {
-        let sass;
-        let sassVersion;
-
-        try {
-            sass = require("node-sass");
-            sassVersion = /^(\d+)/.exec(require("node-sass/package.json").version).pop();
-        } catch (e) {
-            throw new Error(
-                "`sass-loader` requires `node-sass` >=4. Please install a compatible version."
-            );
-        }
-
-        if (Number(sassVersion) < 4) {
-            throw new Error(
-                "The installed version of `node-sass` is not compatible (expected: >= 4, actual: " + sassVersion + ")."
-            );
-        }
-
-        asyncSassJobQueue = async.queue(sass.render, threadPoolSize - 1);
+  const callback = this.async();
+  const isSync = typeof callback !== 'function';
+  const self = this;
+  const { resourcePath } = this;
+
+  function addNormalizedDependency(file) {
+    // node-sass returns POSIX paths
+    self.dependency(path.normalize(file));
+  }
+
+  if (isSync) {
+    throw new Error(
+      'Synchronous compilation is not supported anymore. See https://github.com/webpack-contrib/sass-loader/issues/333'
+    );
+  }
+
+  let resolve = pify(this.resolve);
+
+  // Supported since v4.36.0
+  if (hasGetResolve(self)) {
+    resolve = this.getResolve({
+      mainFields: ['sass', 'style', '...'],
+      extensions: ['.scss', '.sass', '.css', '...'],
+    });
+  }
+
+  const options = normalizeOptions(
+    this,
+    content,
+    webpackImporter(resourcePath, resolve, addNormalizedDependency)
+  );
+
+  // Skip empty files, otherwise it will stop webpack, see issue #21
+  if (options.data.trim() === '') {
+    callback(null, '');
+    return;
+  }
+
+  const render = getRenderFuncFromSassImpl(
+    // eslint-disable-next-line import/no-extraneous-dependencies, global-require
+    options.implementation || getDefaultSassImpl()
+  );
+
+  render(options, (err, result) => {
+    if (err) {
+      formatSassError(err, this.resourcePath);
+
+      if (err.file) {
+        this.dependency(err.file);
+      }
+
+      callback(err);
+      return;
+    }
+
+    if (result.map && 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
+      delete result.map.file;
+      // One of the sources is 'stdin' according to dart-sass/node-sass because we've used the data input.
+      // Now let's override that value with the correct relative path.
+      // Since we specified options.sourceMap = path.join(process.cwd(), "/sass.map"); in normalizeOptions,
+      // we know that this path is relative to process.cwd(). This is how node-sass works.
+      // eslint-disable-next-line no-param-reassign
+      const stdinIndex = result.map.sources.findIndex(
+        (source) => source.indexOf('stdin') !== -1
+      );
+
+      if (stdinIndex !== -1) {
+        // eslint-disable-next-line no-param-reassign
+        result.map.sources[stdinIndex] = path.relative(
+          process.cwd(),
+          resourcePath
+        );
+      }
+      // 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.normalize(result.map.sourceRoot);
+      // eslint-disable-next-line no-param-reassign
+      result.map.sources = result.map.sources.map(path.normalize);
+    } else {
+      // eslint-disable-next-line no-param-reassign
+      result.map = null;
     }
 
-    const callback = this.async();
-    const isSync = typeof callback !== "function";
-    const self = this;
-    const resourcePath = this.resourcePath;
+    result.stats.includedFiles.forEach(addNormalizedDependency);
+
+    callback(null, result.css.toString(), result.map);
+  });
+}
+
+/**
+ * Verifies that the implementation and version of Sass is supported by this loader.
+ *
+ * @param {Object} module
+ * @returns {Function}
+ */
+function getRenderFuncFromSassImpl(module) {
+  const { info } = module;
+  const components = info.split('\t');
+
+  if (components.length < 2) {
+    throw new Error(`Unknown Sass implementation "${info}".`);
+  }
+
+  const [implementation, version] = components;
 
-    function addNormalizedDependency(file) {
-        // node-sass returns POSIX paths
-        self.dependency(path.normalize(file));
+  if (!semver.valid(version)) {
+    throw new Error(`Invalid Sass version "${version}".`);
+  }
+
+  if (implementation === 'dart-sass') {
+    if (!semver.satisfies(version, '^1.3.0')) {
+      throw new Error(
+        `Dart Sass version ${version} is incompatible with ^1.3.0.`
+      );
     }
 
-    if (isSync) {
-        throw new Error("Synchronous compilation is not supported anymore. See https://github.com/webpack-contrib/sass-loader/issues/333");
+    return module.render.bind(module);
+  } else if (implementation === 'node-sass') {
+    if (!semver.satisfies(version, '^4.0.0')) {
+      throw new Error(
+        `Node Sass version ${version} is incompatible with ^4.0.0.`
+      );
     }
 
-    const options = normalizeOptions(this, content, webpackImporter(
-        resourcePath,
-        pify(this.resolve.bind(this)),
-        addNormalizedDependency
-    ));
+    // There is an issue with node-sass when async custom importers are used
+    // See https://github.com/sass/node-sass/issues/857#issuecomment-93594360
+    // We need to use a job queue to make sure that one thread is always available to the UV lib
+    if (nodeSassJobQueue === null) {
+      const threadPoolSize = Number(process.env.UV_THREADPOOL_SIZE || 4);
 
-    // Skip empty files, otherwise it will stop webpack, see issue #21
-    if (options.data.trim() === "") {
-        callback(null, "");
-        return;
+      nodeSassJobQueue = async.queue(
+        module.render.bind(module),
+        threadPoolSize - 1
+      );
     }
 
-    // start the actual rendering
-    asyncSassJobQueue.push(options, (err, result) => {
-        if (err) {
-            formatSassError(err, this.resourcePath);
-            err.file && this.dependency(err.file);
-            callback(err);
-            return;
-        }
-
-        if (result.map && result.map !== "{}") {
-            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.
-            delete result.map.file;
-            // The first source is 'stdin' according to node-sass because we've used the data input.
-            // Now let's override that value with the correct relative path.
-            // Since we specified options.sourceMap = path.join(process.cwd(), "/sass.map"); in normalizeOptions,
-            // we know that this path is relative to process.cwd(). This is how node-sass works.
-            result.map.sources[0] = path.relative(process.cwd(), resourcePath);
-            // 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
-            result.map.sourceRoot = path.normalize(result.map.sourceRoot);
-            result.map.sources = result.map.sources.map(path.normalize);
-        } else {
-            result.map = null;
-        }
-
-        result.stats.includedFiles.forEach(addNormalizedDependency);
-        callback(null, result.css.toString(), result.map);
-    });
+    return nodeSassJobQueue.push.bind(nodeSassJobQueue);
+  }
+
+  throw new Error(`Unknown Sass implementation "${implementation}".`);
+}
+
+function getDefaultSassImpl() {
+  let sassImplPkg = 'node-sass';
+
+  try {
+    require.resolve('node-sass');
+  } catch (error) {
+    try {
+      require.resolve('sass');
+      sassImplPkg = 'sass';
+    } catch (ignoreError) {
+      sassImplPkg = 'node-sass';
+    }
+  }
+
+  // eslint-disable-next-line import/no-dynamic-require, global-require
+  return require(sassImplPkg);
 }
 
 module.exports = sassLoader;

package/lib/normalizeOptions.js

@@ -1,10 +1,12 @@
-"use strict";
+'use strict';
 
-const os = require("os");
-const utils = require("loader-utils");
-const cloneDeep = require("clone-deep");
-const path = require("path");
-const proxyCustomImporters = require("./proxyCustomImporters");
+const os = require('os');
+const path = require('path');
+
+const utils = require('loader-utils');
+const cloneDeep = require('clone-deep');
+
+const proxyCustomImporters = require('./proxyCustomImporters');
 
 /**
  * Derives the sass options from the loader context and normalizes its values with sane defaults.
@@ -18,61 +20,78 @@ const proxyCustomImporters = require("./proxyCustomImporters");
  * @returns {Object}
  */
 function normalizeOptions(loaderContext, content, webpackImporter) {
-    const options = cloneDeep(utils.getOptions(loaderContext)) || {};
-    const resourcePath = loaderContext.resourcePath;
+  const options = cloneDeep(utils.getOptions(loaderContext)) || {};
+  const { resourcePath } = loaderContext;
 
-    options.data = options.data ? (options.data + os.EOL + content) : content;
+  // allow opt.functions to be configured WRT loaderContext
+  if (typeof options.functions === 'function') {
+    options.functions = options.functions(loaderContext);
+  }
 
-    // opt.outputStyle
-    if (!options.outputStyle && loaderContext.minimize) {
-        options.outputStyle = "compressed";
-    }
+  let { data } = options;
 
-    // opt.sourceMap
-    // Not using the `this.sourceMap` flag because css source maps are different
-    // @see https://github.com/webpack/css-loader/pull/40
-    if (options.sourceMap) {
-        // 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.
-        // In case it is a string, options.sourceMap should be a path where the source map is written.
-        // 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.join(process.cwd(), "/sass.map");
-        if ("sourceMapRoot" in options === false) {
-            options.sourceMapRoot = process.cwd();
-        }
-        if ("omitSourceMapUrl" in options === false) {
-            // The source map url doesn't make sense because we don't know the output path
-            // The css-loader will handle that for us
-            options.omitSourceMapUrl = true;
-        }
-        if ("sourceMapContents" in options === false) {
-            // If sourceMapContents option is not set, set it to true otherwise maps will be empty/null
-            // when exported by webpack-extract-text-plugin.
-            options.sourceMapContents = true;
-        }
-    }
+  if (typeof options.data === 'function') {
+    data = options.data(loaderContext);
+  }
+
+  options.data = data ? data + os.EOL + content : content;
 
-    // indentedSyntax is a boolean flag.
-    const ext = path.extname(resourcePath);
+  // opt.outputStyle
+  if (!options.outputStyle && loaderContext.minimize) {
+    options.outputStyle = 'compressed';
+  }
 
-    // If we are compiling sass and indentedSyntax isn't set, automatically set it.
-    if (ext && ext.toLowerCase() === ".sass" && "indentedSyntax" in options === false) {
-        options.indentedSyntax = true;
-    } else {
-        options.indentedSyntax = Boolean(options.indentedSyntax);
+  // opt.sourceMap
+  // Not using the `this.sourceMap` flag because css source maps are different
+  // @see https://github.com/webpack/css-loader/pull/40
+  if (options.sourceMap) {
+    // 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.
+    // In case it is a string, options.sourceMap should be a path where the source map is written.
+    // 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.join(process.cwd(), '/sass.map');
+    if ('sourceMapRoot' in options === false) {
+      options.sourceMapRoot = process.cwd();
     }
+    if ('omitSourceMapUrl' in options === false) {
+      // The source map url doesn't make sense because we don't know the output path
+      // The css-loader will handle that for us
+      options.omitSourceMapUrl = true;
+    }
+    if ('sourceMapContents' in options === false) {
+      // If sourceMapContents option is not set, set it to true otherwise maps will be empty/null
+      // when exported by webpack-extract-text-plugin.
+      options.sourceMapContents = true;
+    }
+  }
+
+  // indentedSyntax is a boolean flag.
+  const ext = path.extname(resourcePath);
+
+  // If we are compiling sass and indentedSyntax isn't set, automatically set it.
+  if (
+    ext &&
+    ext.toLowerCase() === '.sass' &&
+    'indentedSyntax' in options === false
+  ) {
+    options.indentedSyntax = true;
+  } else {
+    options.indentedSyntax = Boolean(options.indentedSyntax);
+  }
 
-    // Allow passing custom importers to `node-sass`. Accepts `Function` or an array of `Function`s.
-    options.importer = options.importer ? proxyCustomImporters(options.importer, resourcePath) : [];
-    options.importer.push(webpackImporter);
+  // Allow passing custom importers to `node-sass`. Accepts `Function` or an array of `Function`s.
+  options.importer = options.importer
+    ? proxyCustomImporters(options.importer, resourcePath)
+    : [];
+  options.importer.push(webpackImporter);
 
-    // `node-sass` uses `includePaths` to resolve `@import` paths. Append the currently processed file.
-    options.includePaths = options.includePaths || [];
-    options.includePaths.push(path.dirname(resourcePath));
+  // `node-sass` uses `includePaths` to resolve `@import` paths. Append the currently processed file.
+  options.includePaths = options.includePaths || [];
+  options.includePaths.push(path.dirname(resourcePath));
 
-    return options;
+  return options;
 }
 
 module.exports = normalizeOptions;

package/lib/proxyCustomImporters.js

@@ -1,4 +1,4 @@
-"use strict";
+'use strict';
 
 /**
  * Creates new custom importers that use the given `resourcePath` if libsass calls the custom importer with `prev`
@@ -10,20 +10,24 @@
  *
  * We have to fix this behavior in order to provide a consistent experience to the webpack user.
  *
- * @param {function|Array<function>} importer
+ * @param {Function|Array<Function>} importer
  * @param {string} resourcePath
- * @returns {Array<function>}
+ * @returns {Array<Function>}
  */
 function proxyCustomImporters(importer, resourcePath) {
-    return [].concat(importer).map((importer) => {
-        return function (url, prev, done) {
-            return importer.apply(
-                this, // eslint-disable-line no-invalid-this
-                Array.from(arguments)
-                    .map((arg, i) => i === 1 && arg === "stdin" ? resourcePath : arg)
-            );
-        };
-    });
+  return [].concat(importer).map(
+    // eslint-disable-next-line no-shadow
+    (importer) =>
+      function customImporter() {
+        return importer.apply(
+          this,
+          // eslint-disable-next-line prefer-rest-params
+          Array.from(arguments).map((arg, i) =>
+            i === 1 && arg === 'stdin' ? resourcePath : arg
+          )
+        );
+      }
+  );
 }
 
 module.exports = proxyCustomImporters;

package/lib/webpackImporter.js

@@ -1,4 +1,4 @@
-"use strict";
+'use strict';
 
 /**
  * @name PromisedResolve
@@ -16,9 +16,9 @@
  * @param {Function<Error, string>} done
  */
 
-const path = require("path");
-const tail = require("lodash.tail");
-const importsToResolve = require("./importsToResolve");
+const path = require('path');
+
+const importsToResolve = require('./importsToResolve');
 
 const matchCss = /\.css$/;
 
@@ -34,39 +34,45 @@ const matchCss = /\.css$/;
  * @returns {Importer}
  */
 function webpackImporter(resourcePath, resolve, addNormalizedDependency) {
-    function dirContextFrom(fileContext) {
-        return path.dirname(
-            // The first file is 'stdin' when we're using the data option
-            fileContext === "stdin" ? resourcePath : fileContext
-        );
-    }
+  function dirContextFrom(fileContext) {
+    return path.dirname(
+      // The first file is 'stdin' when we're using the data option
+      fileContext === 'stdin' ? resourcePath : fileContext
+    );
+  }
 
-    function startResolving(dir, importsToResolve) {
-        return importsToResolve.length === 0 ?
-            Promise.reject() :
-            resolve(dir, importsToResolve[0])
-                .then(resolvedFile => {
-                    // Add the resolvedFilename 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.
-                    addNormalizedDependency(resolvedFile);
-                    return {
-                        // By removing the CSS file extension, we trigger node-sass to include the CSS file instead of just linking it.
-                        file: resolvedFile.replace(matchCss, "")
-                    };
-                }, () => startResolving(
-                    dir,
-                    tail(importsToResolve)
-                ));
-    }
+  // eslint-disable-next-line no-shadow
+  function startResolving(dir, importsToResolve) {
+    return importsToResolve.length === 0
+      ? Promise.reject()
+      : resolve(dir, importsToResolve[0]).then(
+          (resolvedFile) => {
+            // Add the resolvedFilename 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.
+            addNormalizedDependency(resolvedFile);
+            return {
+              // By removing the CSS file extension, we trigger node-sass to include the CSS file instead of just linking it.
+              file: resolvedFile.replace(matchCss, ''),
+            };
+          },
+          () => {
+            const [, ...tailResult] = importsToResolve;
+
+            return startResolving(dir, tailResult);
+          }
+        );
+  }
 
-    return (url, prev, done) => {
-        startResolving(
-            dirContextFrom(prev),
-            importsToResolve(url)
-        ) // Catch all resolving errors, return the original file and pass responsibility back to other custom importers
-            .catch(() => ({ file: url }))
-            .then(done);
-    };
+  return (url, prev, done) => {
+    startResolving(dirContextFrom(prev), importsToResolve(url))
+      // Catch all resolving errors, return the original file and pass responsibility back to other custom importers
+      .catch(() => {
+        return {
+          file: url,
+        };
+      })
+      .then(done);
+  };
 }
 
 module.exports = webpackImporter;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sass-loader",
-  "version": "7.0.1",
+  "version": "7.2.0",
   "description": "Sass loader for webpack",
   "author": "J. Tangelder",
   "license": "MIT",
@@ -12,13 +12,14 @@
     "appveyor:test": "npm test",
     "create-spec": "node test/tools/runCreateSpec.js",
     "lint": "eslint lib test",
-    "test": "nyc --all mocha -R spec -t 10000",
+    "test": "nyc mocha -R spec -t 10000",
     "test-bootstrap-sass": "webpack-dev-server --config test/bootstrapSass/webpack.config.js --content-base ./test/bootstrapSass",
     "test-source-map": "webpack-dev-server --config test/sourceMap/webpack.config.js --content-base ./test/sourceMap --inline",
     "test-watch": "webpack --config test/watch/webpack.config.js",
     "test-extract-text": "webpack --config test/extractText/webpack.config.js",
     "test-hmr": "webpack-dev-server --config test/hmr/webpack.config.js --content-base ./test/hmr --hot --inline",
-    "travis:lint": "npm run lint",
+    "travis:lint:commits": "commitlint --from=${TRAVIS_BRANCH} --to=${TRAVIS_COMMIT}",
+    "travis:lint": "npm run lint && npm run travis:lint:commits",
     "travis:test": "npm run test",
     "travis:coverage": "npm run test",
     "pretest": "npm run create-spec",
@@ -26,33 +27,43 @@
     "release": "standard-version"
   },
   "dependencies": {
-    "clone-deep": "^2.0.1",
+    "clone-deep": "^4.0.1",
     "loader-utils": "^1.0.1",
-    "lodash.tail": "^4.1.1",
     "neo-async": "^2.5.0",
-    "pify": "^3.0.0"
+    "pify": "^4.0.1",
+    "semver": "^5.5.0"
   },
   "devDependencies": {
+    "@commitlint/cli": "^7.2.1",
+    "@commitlint/config-conventional": "^7.1.2",
+    "@webpack-contrib/eslint-config-webpack": "^3.0.0",
     "bootstrap-sass": "^3.3.5",
-    "css-loader": "^0.28.4",
-    "eslint": "^3.16.0",
-    "eslint-config-peerigon": "^9.0.0",
-    "eslint-plugin-jsdoc": "^2.4.0",
-    "file-loader": "^0.11.2",
-    "mocha": "^3.0.2",
+    "css-loader": "^2.0.0",
+    "eslint": "^5.10.0",
+    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-jsdoc": "^4.4.3",
+    "eslint-plugin-prettier": "^3.0.0",
+    "file-loader": "^3.0.1",
+    "husky": "^1.2.0",
+    "lint-staged": "^8.1.0",
+    "mocha": "^6.0.2",
     "mock-require": "^3.0.1",
     "node-sass": "^4.5.0",
-    "nyc": "^11.0.2",
-    "raw-loader": "^0.5.1",
-    "should": "^11.2.0",
-    "standard-version": "^4.2.0",
-    "style-loader": "^0.18.2",
+    "nyc": "^13.1.0",
+    "raw-loader": "^1.0.0",
+    "prettier": "^1.15.2",
+    "sass": "^1.3.0",
+    "should": "^13.2.3",
+    "standard-version": "^5.0.2",
+    "style-loader": "^0.23.1",
     "webpack": "^4.5.0",
-    "webpack-dev-server": "^2.4.1",
-    "webpack-merge": "^4.0.0"
+    "webpack-cli": "^3.1.0",
+    "webpack-dev-server": "^3.1.4",
+    "webpack-merge": "^4.0.0",
+    "chokidar": "^2.1.6"
   },
   "engines": {
-    "node": ">= 6.9.0 || >= 8.9.0"
+    "node": ">= 6.9.0"
   },
   "peerDependencies": {
     "webpack": "^3.0.0 || ^4.0.0"
@@ -65,5 +76,21 @@
   ],
   "repository": "https://github.com/webpack-contrib/sass-loader.git",
   "bugs": "https://github.com/webpack-contrib/sass-loader/issues",
-  "homepage": "https://github.com/webpack-contrib/sass-loader"
+  "homepage": "https://github.com/webpack-contrib/sass-loader",
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.js": [
+      "eslint --fix",
+      "git add"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  }
 }