sass-loader 10.0.5 → 10.2.1

package/README.md

@@ -42,7 +42,7 @@ Then add the loader to your Webpack configuration. For example:
 **app.js**
 
 ```js
-import './style.scss';
+import "./style.scss";
 ```
 
 **style.scss**
@@ -65,11 +65,11 @@ module.exports = {
         test: /\.s[ac]ss$/i,
         use: [
           // Creates `style` nodes from JS strings
-          'style-loader',
+          "style-loader",
           // Translates CSS into CommonJS
-          'css-loader',
+          "css-loader",
           // Compiles Sass to CSS
-          'sass-loader',
+          "sass-loader",
         ],
       },
     ],
@@ -86,7 +86,7 @@ Webpack provides an [advanced mechanism to resolve files](https://webpack.js.org
 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:
 
 ```scss
-@import '~bootstrap';
+@import "~bootstrap";
 ```
 
 It's important to only prepend it with `~`, because `~/` resolves to the home directory.
@@ -167,13 +167,13 @@ module.exports = {
       {
         test: /\.s[ac]ss$/i,
         use: [
-          'style-loader',
-          'css-loader',
+          "style-loader",
+          "css-loader",
           {
-            loader: 'sass-loader',
+            loader: "sass-loader",
             options: {
               // Prefer `dart-sass`
-              implementation: require('sass'),
+              implementation: require("sass"),
             },
           },
         ],
@@ -186,7 +186,9 @@ module.exports = {
 Note that when using `sass` (`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.
 
-We automatically inject the [`fibers`](https://github.com/laverdet/node-fibers) package (setup `sassOptions.fiber`) if is possible (i.e. you need install the [`fibers`](https://github.com/laverdet/node-fibers) package).
+We automatically inject the [`fibers`](https://github.com/laverdet/node-fibers) package (setup `sassOptions.fiber`) for `Node.js` less v16.0.0 if is possible (i.e. you need install the [`fibers`](https://github.com/laverdet/node-fibers) package).
+
+> Fibers is not compatible with `Node.js` v16.0.0 or later ([see introduction to readme](https://github.com/laverdet/node-fibers)).
 
 **package.json**
 
@@ -211,12 +213,12 @@ module.exports = {
       {
         test: /\.s[ac]ss$/i,
         use: [
-          'style-loader',
-          'css-loader',
+          "style-loader",
+          "css-loader",
           {
-            loader: 'sass-loader',
+            loader: "sass-loader",
             options: {
-              implementation: require('sass'),
+              implementation: require("sass"),
               sassOptions: {
                 fiber: false,
               },
@@ -240,14 +242,14 @@ module.exports = {
       {
         test: /\.s[ac]ss$/i,
         use: [
-          'style-loader',
-          'css-loader',
+          "style-loader",
+          "css-loader",
           {
-            loader: 'sass-loader',
+            loader: "sass-loader",
             options: {
-              implementation: require('sass'),
+              implementation: require("sass"),
               sassOptions: {
-                fiber: require('fibers'),
+                fiber: require("fibers"),
               },
             },
           },
@@ -293,14 +295,14 @@ module.exports = {
       {
         test: /\.s[ac]ss$/i,
         use: [
-          'style-loader',
-          'css-loader',
+          "style-loader",
+          "css-loader",
           {
-            loader: 'sass-loader',
+            loader: "sass-loader",
             options: {
               sassOptions: {
                 indentWidth: 4,
-                includePaths: ['absolute/path/a', 'absolute/path/b'],
+                includePaths: ["absolute/path/a", "absolute/path/b"],
               },
             },
           },
@@ -322,24 +324,24 @@ module.exports = {
       {
         test: /\.s[ac]ss$/i,
         use: [
-          'style-loader',
-          'css-loader',
+          "style-loader",
+          "css-loader",
           {
-            loader: 'sass-loader',
+            loader: "sass-loader",
             options: {
               sassOptions: (loaderContext) => {
                 // More information about available properties https://webpack.js.org/api/loaders/
                 const { resourcePath, rootContext } = loaderContext;
                 const relativePath = path.relative(rootContext, resourcePath);
 
-                if (relativePath === 'styles/foo.scss') {
+                if (relativePath === "styles/foo.scss") {
                   return {
-                    includePaths: ['absolute/path/c', 'absolute/path/d'],
+                    includePaths: ["absolute/path/c", "absolute/path/d"],
                   };
                 }
 
                 return {
-                  includePaths: ['absolute/path/a', 'absolute/path/b'],
+                  includePaths: ["absolute/path/a", "absolute/path/b"],
                 };
               },
             },
@@ -372,15 +374,15 @@ module.exports = {
       {
         test: /\.s[ac]ss$/i,
         use: [
-          'style-loader',
+          "style-loader",
           {
-            loader: 'css-loader',
+            loader: "css-loader",
             options: {
               sourceMap: true,
             },
           },
           {
-            loader: 'sass-loader',
+            loader: "sass-loader",
             options: {
               sourceMap: true,
             },
@@ -405,14 +407,14 @@ module.exports = {
       {
         test: /\.s[ac]ss$/i,
         use: [
-          'style-loader',
-          'css-loader',
+          "style-loader",
+          "css-loader",
           {
-            loader: 'sass-loader',
+            loader: "sass-loader",
             options: {
               sourceMap: true,
               sassOptions: {
-                outputStyle: 'compressed',
+                outputStyle: "compressed",
               },
             },
           },
@@ -442,12 +444,12 @@ module.exports = {
       {
         test: /\.s[ac]ss$/i,
         use: [
-          'style-loader',
-          'css-loader',
+          "style-loader",
+          "css-loader",
           {
-            loader: 'sass-loader',
+            loader: "sass-loader",
             options: {
-              additionalData: '$env: ' + process.env.NODE_ENV + ';',
+              additionalData: "$env: " + process.env.NODE_ENV + ";",
             },
           },
         ],
@@ -459,6 +461,8 @@ module.exports = {
 
 #### `Function`
 
+##### Sync
+
 ```js
 module.exports = {
   module: {
@@ -466,21 +470,55 @@ module.exports = {
       {
         test: /\.s[ac]ss$/i,
         use: [
-          'style-loader',
-          'css-loader',
+          "style-loader",
+          "css-loader",
           {
-            loader: 'sass-loader',
+            loader: "sass-loader",
             options: {
               additionalData: (content, loaderContext) => {
                 // More information about available properties https://webpack.js.org/api/loaders/
                 const { resourcePath, rootContext } = loaderContext;
                 const relativePath = path.relative(rootContext, resourcePath);
 
-                if (relativePath === 'styles/foo.scss') {
-                  return '$value: 100px;' + content;
+                if (relativePath === "styles/foo.scss") {
+                  return "$value: 100px;" + content;
+                }
+
+                return "$value: 200px;" + content;
+              },
+            },
+          },
+        ],
+      },
+    ],
+  },
+};
+```
+
+##### Async
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.s[ac]ss$/i,
+        use: [
+          "style-loader",
+          "css-loader",
+          {
+            loader: "sass-loader",
+            options: {
+              additionalData: async (content, loaderContext) => {
+                // More information about available properties https://webpack.js.org/api/loaders/
+                const { resourcePath, rootContext } = loaderContext;
+                const relativePath = path.relative(rootContext, resourcePath);
+
+                if (relativePath === "styles/foo.scss") {
+                  return "$value: 100px;" + content;
                 }
 
-                return '$value: 200px;' + content;
+                return "$value: 200px;" + content;
               },
             },
           },
@@ -510,10 +548,10 @@ module.exports = {
       {
         test: /\.s[ac]ss$/i,
         use: [
-          'style-loader',
-          'css-loader',
+          "style-loader",
+          "css-loader",
           {
-            loader: 'sass-loader',
+            loader: "sass-loader",
             options: {
               webpackImporter: false,
             },
@@ -539,7 +577,7 @@ There are two possibilities to extract a style sheet from the bundle:
 **webpack.config.js**
 
 ```js
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 module.exports = {
   module: {
@@ -548,11 +586,11 @@ module.exports = {
         test: /\.s[ac]ss$/i,
         use: [
           // fallback to style-loader in development
-          process.env.NODE_ENV !== 'production'
-            ? 'style-loader'
+          process.env.NODE_ENV !== "production"
+            ? "style-loader"
             : MiniCssExtractPlugin.loader,
-          'css-loader',
-          'sass-loader',
+          "css-loader",
+          "sass-loader",
         ],
       },
     ],
@@ -561,8 +599,8 @@ module.exports = {
     new MiniCssExtractPlugin({
       // Options similar to the same options in webpackOptions.output
       // both options are optional
-      filename: '[name].css',
-      chunkFilename: '[id].css',
+      filename: "[name].css",
+      chunkFilename: "[id].css",
     }),
   ],
 };
@@ -578,21 +616,21 @@ To enable CSS source maps, you'll need to pass the `sourceMap` option to the `sa
 
 ```javascript
 module.exports = {
-  devtool: 'source-map', // any "source-map"-like devtool is possible
+  devtool: "source-map", // any "source-map"-like devtool is possible
   module: {
     rules: [
       {
         test: /\.s[ac]ss$/i,
         use: [
-          'style-loader',
+          "style-loader",
           {
-            loader: 'css-loader',
+            loader: "css-loader",
             options: {
               sourceMap: true,
             },
           },
           {
-            loader: 'sass-loader',
+            loader: "sass-loader",
             options: {
               sourceMap: true,
             },

package/dist/SassError.js

@@ -8,7 +8,7 @@ exports.default = void 0;
 class SassError extends Error {
   constructor(sassError) {
     super();
-    this.name = 'SassError';
+    this.name = "SassError";
     this.originalSassError = sassError;
     this.loc = {
       line: sassError.line,
@@ -18,7 +18,7 @@ class SassError extends Error {
     this.message = `${this.name}: ${this.originalSassError.message}`;
 
     if (this.originalSassError.formatted) {
-      this.message = `${this.name}: ${this.originalSassError.formatted.replace(/^Error: /, '')}`; // Instruct webpack to hide the JS stack from the console.
+      this.message = `${this.name}: ${this.originalSassError.formatted.replace(/^Error: /, "")}`; // Instruct webpack to hide the JS stack from the console.
       // Usually you're only interested in the SASS stack in this case.
 
       this.hideStack = true;

package/dist/cjs.js

@@ -1,5 +1,5 @@
 "use strict";
 
-const loader = require('./index');
+const loader = require("./index");
 
 module.exports = loader.default;

package/dist/index.js

@@ -25,16 +25,23 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * @this {object}
  * @param {string} content
  */
-function loader(content) {
+async function loader(content) {
   const options = (0, _loaderUtils.getOptions)(this);
   (0, _schemaUtils.validate)(_options.default, options, {
-    name: 'Sass Loader',
-    baseDataPath: 'options'
+    name: "Sass Loader",
+    baseDataPath: "options"
   });
-  const implementation = (0, _utils.getSassImplementation)(options.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;
+  const callback = this.async();
+  const implementation = (0, _utils.getSassImplementation)(this, options.implementation);
+
+  if (!implementation) {
+    callback();
+    return;
+  }
+
+  const useSourceMap = typeof options.sourceMap === "boolean" ? options.sourceMap : this.sourceMap;
+  const sassOptions = await (0, _utils.getSassOptions)(this, options, content, implementation, useSourceMap);
+  const shouldUseWebpackImporter = typeof options.webpackImporter === "boolean" ? options.webpackImporter : true;
 
   if (shouldUseWebpackImporter) {
     const {
@@ -43,7 +50,6 @@ function loader(content) {
     sassOptions.importer.push((0, _utils.getWebpackImporter)(this, implementation, includePaths));
   }
 
-  const callback = this.async();
   const render = (0, _utils.getRenderFunctionFromSassImplementation)(implementation);
   render(sassOptions, (error, result) => {
     if (error) {
@@ -64,7 +70,12 @@ function loader(content) {
     }
 
     result.stats.includedFiles.forEach(includedFile => {
-      this.addDependency(_path.default.normalize(includedFile));
+      const normalizedIncludedFile = _path.default.normalize(includedFile); // Custom `importer` can return only `contents` so includedFile will be relative
+
+
+      if (_path.default.isAbsolute(normalizedIncludedFile)) {
+        this.addDependency(normalizedIncludedFile);
+      }
     });
     callback(null, result.css.toString(), map);
   });