sass-loader 12.5.0 → 13.0.1

package/README.md

@@ -9,7 +9,6 @@
 
 [![npm][npm]][npm-url]
 [![node][node]][node-url]
-[![deps][deps]][deps-url]
 [![tests][tests]][tests-url]
 [![coverage][cover]][cover-url]
 [![chat][chat]][chat-url]
@@ -43,11 +42,17 @@ pnpm add -D sass-loader sass webpack
 
 This allows you to control the versions of all your dependencies, and to choose which Sass implementation to use.
 
-> ℹ️ We highly recommend using [Dart Sass](https://github.com/sass/dart-sass).
+> **Note**
+>
+> We highly recommend using [Dart Sass](https://github.com/sass/dart-sass).
 
-> ⚠ [Node Sass](https://github.com/sass/node-sass) does not work with [Yarn PnP](https://classic.yarnpkg.com/en/docs/pnp/) feature and doesn't support [@use rule](https://sass-lang.com/documentation/at-rules/use).
+> **Warning**
+>
+> [Node Sass](https://github.com/sass/node-sass) does not work with [Yarn PnP](https://classic.yarnpkg.com/en/docs/pnp/) feature and doesn't support [@use rule](https://sass-lang.com/documentation/at-rules/use).
 
-> ⚠ [Sass Embedded](https://github.com/sass/embedded-host-node) is experimental and in `beta`, therefore some features may not work
+> **Warning**
+>
+> [Sass Embedded](https://github.com/sass/embedded-host-node) is experimental and in `beta`, therefore some features may not work
 
 Chain the `sass-loader` with the [css-loader](https://github.com/webpack-contrib/css-loader) and the [style-loader](https://github.com/webpack-contrib/style-loader) to immediately apply all styles to the DOM or the [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) to extract it into a separate file.
 
@@ -245,7 +250,9 @@ To avoid this overhead, you can use the [fibers](https://www.npmjs.com/package/f
 
 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)).
+> **Warning**
+>
+> Fibers is not compatible with `Node.js` v16.0.0 or later. Unfortunately, v8 commit [dacc2fee0f](https://github.com/v8/v8/commit/dacc2fee0f815823782a7e432c79c2a7767a4765) is a breaking change and workarounds are non-trivial. ([see introduction to readme](https://github.com/laverdet/node-fibers)).
 
 **package.json**
 
@@ -335,21 +342,29 @@ Default: defaults values for Sass implementation
 
 Options for [Dart Sass](http://sass-lang.com/dart-sass) or [Node Sass](https://github.com/sass/node-sass) implementation.
 
-> ℹ️ The `charset` option has `true` value by default for `dart-sass`, we strongly discourage change value to `false`, because webpack doesn't support files other than `utf-8`.
+> **Note**
+>
+> The `charset` option has `true` value by default for `dart-sass`, we strongly discourage change value to `false`, because webpack doesn't support files other than `utf-8`.
 
-> ℹ️ The `indentedSyntax` option has `true` value for the `sass` extension.
+> **Note**
+>
+> The `indentedSyntax` option has `true` value for the `sass` extension.
 
-> ℹ️ Options such as `data` and `file` are unavailable and will be ignored.
+> **Note**
+>
+> Options such as `data` and `file` are unavailable and will be ignored.
 
 > ℹ We strongly discourage change `outFile`, `sourceMapContents`, `sourceMapEmbed`, `sourceMapRoot` options because `sass-loader` automatically sets these options when the `sourceMap` option is `true`.
 
-> ℹ️ Access to the [loader context](https://webpack.js.org/api/loaders/#the-loader-context) inside the custom importer can be done using the `this.webpackLoaderContext` property.
+> **Note**
+>
+> Access to the [loader context](https://webpack.js.org/api/loaders/#the-loader-context) inside the custom importer can be done using the `this.webpackLoaderContext` property.
 
 There is a slight difference between the `sass` (`dart-sass`) and `node-sass` options.
 
 Please consult documentation before using them:
 
-- [Dart Sass documentation](https://github.com/sass/dart-sass#javascript-api) for all available `sass` options.
+- [Dart Sass documentation](https://sass-lang.com/documentation/js-api/interfaces/Options) for all available `sass` options.
 - [Node Sass documentation](https://github.com/sass/node-sass/#options) for all available `node-sass` options.
 
 #### `object`
@@ -662,7 +677,9 @@ Default: `false`
 
 Treats the `@warn` rule as a webpack warning.
 
-> ℹ️ It will be `true` by default in the next major release.
+> **Note**
+>
+> It will be `true` by default in the next major release.
 
 **style.scss**
 
@@ -726,9 +743,13 @@ Default: `"legacy"`
 
 Allows you to switch between `legacy` and `modern` API. You can find more information [here](https://sass-lang.com/documentation/js-api).
 
-> ⚠ "modern" API is experimental, so some features may not work (known: built-in `importer` is not working and files with errors is not watching on initial run), you can follow this [here](https://github.com/webpack-contrib/sass-loader/issues/774).
+> **Warning**
+>
+> "modern" API is experimental, so some features may not work (known: built-in `importer` is not working and files with errors is not watching on initial run), you can follow this [here](https://github.com/webpack-contrib/sass-loader/issues/774).
 
-> ⚠ The sass options are different for `modern` and `old` APIs. Please look at [docs](https://sass-lang.com/documentation/js-api) how to migrate on new options.
+> **Warning**
+>
+> The sass options are different for `modern` and `old` APIs. Please look at [docs](https://sass-lang.com/documentation/js-api) how to migrate on new options.
 
 **webpack.config.js**
 
@@ -757,6 +778,20 @@ module.exports = {
 };
 ```
 
+## How to enable `@debug` output
+
+Defaults, the output of `@debug` messages is disabled.
+To enable it, add to **webpack.config.js** following:
+
+```js
+module.exports = {
+  stats: {
+    loggingDebug: ["sass-loader"],
+  },
+  // ...
+};
+```
+
 ## Examples
 
 ### Extracts CSS into separate files
@@ -852,8 +887,6 @@ Please take a moment to read our contributing guidelines if you haven't yet done
 [npm-url]: https://npmjs.com/package/sass-loader
 [node]: https://img.shields.io/node/v/sass-loader.svg
 [node-url]: https://nodejs.org
-[deps]: https://david-dm.org/webpack-contrib/sass-loader.svg
-[deps-url]: https://david-dm.org/webpack-contrib/sass-loader
 [tests]: https://github.com/webpack-contrib/sass-loader/workflows/sass-loader/badge.svg
 [tests-url]: https://github.com/webpack-contrib/sass-loader/actions
 [cover]: https://codecov.io/gh/webpack-contrib/sass-loader/branch/master/graph/badge.svg

package/dist/SassError.js

@@ -8,9 +8,7 @@ exports.default = void 0;
 class SassError extends Error {
   constructor(sassError) {
     super();
-    this.name = "SassError"; // TODO remove me in the next major release
-
-    this.originalSassError = sassError;
+    this.name = "SassError";
 
     if (typeof sassError.line !== "undefined" || typeof sassError.column !== "undefined") {
       this.loc = {
@@ -20,10 +18,10 @@ class SassError extends Error {
     } // Keep original error if `sassError.formatted` is unavailable
 
 
-    this.message = `${this.name}: ${typeof this.originalSassError.message !== "undefined" ? this.originalSassError.message : this.originalSassError}`;
+    this.message = `${this.name}: ${typeof sassError.message !== "undefined" ? sassError.message : sassError}`;
 
-    if (this.originalSassError.formatted) {
-      this.message = `${this.name}: ${this.originalSassError.formatted.replace(/^Error: /, "")}`; // Instruct webpack to hide the JS stack from the console.
+    if (sassError.formatted) {
+      this.message = `${this.name}: ${sassError.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/utils.js

@@ -29,13 +29,19 @@ function getDefaultSassImplementation() {
 
   try {
     require.resolve("sass");
-  } catch (error) {
+  } catch (ignoreError) {
     try {
       require.resolve("node-sass");
 
       sassImplPkg = "node-sass";
-    } catch (ignoreError) {
-      sassImplPkg = "sass";
+    } catch (_ignoreError) {
+      try {
+        require.resolve("sass-embedded");
+
+        sassImplPkg = "sass-embedded";
+      } catch (__ignoreError) {
+        sassImplPkg = "sass";
+      }
     }
   } // eslint-disable-next-line import/no-dynamic-require, global-require
 
@@ -143,18 +149,19 @@ async function getSassOptions(loaderContext, loaderOptions, content, implementat
   options.data = loaderOptions.additionalData ? typeof loaderOptions.additionalData === "function" ? await loaderOptions.additionalData(content, loaderContext) : `${loaderOptions.additionalData}\n${content}` : content;
 
   if (!options.logger) {
-    // TODO set me to `true` by default in the next major release
-    const needEmitWarning = loaderOptions.warnRuleAsWarning === true;
+    const needEmitWarning = loaderOptions.warnRuleAsWarning !== false;
     const logger = loaderContext.getLogger("sass-loader");
 
     const formatSpan = span => `${span.url || "-"}:${span.start.line}:${span.start.column}: `;
 
+    const formatDebugSpan = span => `[debug:${span.start.line}:${span.start.column}] `;
+
     options.logger = {
       debug(message, loggerOptions) {
         let builtMessage = "";
 
         if (loggerOptions.span) {
-          builtMessage = formatSpan(loggerOptions.span);
+          builtMessage = formatDebugSpan(loggerOptions.span);
         }
 
         builtMessage += message;
@@ -216,7 +223,7 @@ async function getSassOptions(loaderContext, loaderOptions, content, implementat
       }
     }
 
-    options.importers = options.importers ? proxyCustomImporters(Array.isArray(options.importers) ? options.importers : [options.importers], loaderContext) : [];
+    options.importers = options.importers ? Array.isArray(options.importers) ? options.importers : [options.importers] : [];
   } else {
     options.file = resourcePath;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sass-loader",
-  "version": "12.5.0",
+  "version": "13.0.1",
   "description": "Sass loader for webpack",
   "license": "MIT",
   "repository": "webpack-contrib/sass-loader",
@@ -13,7 +13,7 @@
   },
   "main": "dist/cjs.js",
   "engines": {
-    "node": ">= 12.13.0"
+    "node": ">= 14.15.0"
   },
   "scripts": {
     "start": "npm run build -- -w",
@@ -63,43 +63,43 @@
     "neo-async": "^2.6.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.17.0",
-    "@babel/core": "^7.17.0",
-    "@babel/preset-env": "^7.16.11",
-    "@commitlint/cli": "^16.2.1",
-    "@commitlint/config-conventional": "^16.2.1",
+    "@babel/cli": "^7.17.10",
+    "@babel/core": "^7.18.2",
+    "@babel/preset-env": "^7.18.2",
+    "@commitlint/cli": "^17.0.2",
+    "@commitlint/config-conventional": "^17.0.2",
     "@webpack-contrib/eslint-config-webpack": "^3.0.0",
-    "babel-jest": "^27.5.0",
+    "babel-jest": "^28.1.0",
     "bootstrap-sass": "^3.4.1",
     "bootstrap-v4": "npm:bootstrap@^4.5.3",
     "bootstrap-v5": "npm:bootstrap@^5.0.1",
     "cross-env": "^7.0.3",
     "css-loader": "^6.6.0",
-    "del": "^6.0.0",
+    "del": "^6.1.1",
     "del-cli": "^4.0.1",
     "enhanced-resolve": "^5.8.2",
-    "eslint": "^8.8.0",
+    "eslint": "^8.16.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-import": "^2.25.4",
     "fibers": "^5.0.1",
     "file-loader": "^6.2.0",
     "foundation-sites": "^6.6.3",
-    "husky": "^7.0.1",
-    "jest": "^27.5.0",
-    "jest-environment-node-single-context": "^27.2.0",
-    "lint-staged": "^12.3.3",
+    "husky": "^8.0.1",
+    "jest": "^28.1.0",
+    "jest-environment-node-single-context": "^28.0.0",
+    "lint-staged": "^12.5.0",
     "material-components-web": "^8.0.0",
-    "memfs": "^3.4.1",
+    "memfs": "^3.4.4",
     "node-sass": "^7.0.1",
     "node-sass-glob-importer": "^5.3.2",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.3.2",
-    "sass": "^1.49.7",
-    "sass-embedded": "^1.49.7",
+    "sass": "^1.52.1",
+    "sass-embedded": "^1.52.1",
     "semver": "^7.3.5",
     "standard-version": "^9.3.1",
     "style-loader": "^3.2.1",
-    "webpack": "^5.68.0"
+    "webpack": "^5.73.0"
   },
   "keywords": [
     "sass",