sass-loader 12.1.0 → 12.5.0

package/README.md

@@ -27,7 +27,19 @@ To begin, you'll need to install `sass-loader`:
 npm install sass-loader sass webpack --save-dev
 ```
 
-`sass-loader` requires you to install either [Dart Sass](https://github.com/sass/dart-sass) or [Node Sass](https://github.com/sass/node-sass) on your own (more documentation can be found below).
+or
+
+```console
+yarn add -D sass-loader sass webpack
+```
+
+or
+
+```console
+pnpm add -D sass-loader sass webpack
+```
+
+`sass-loader` requires you to install either [Dart Sass](https://github.com/sass/dart-sass), [Node Sass](https://github.com/sass/node-sass) on your own (more documentation can be found below) or [Sass Embedded](https://github.com/sass/embedded-host-node).
 
 This allows you to control the versions of all your dependencies, and to choose which Sass implementation to use.
 
@@ -35,6 +47,8 @@ This allows you to control the versions of all your dependencies, and to choose
 
 > ⚠ [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
+
 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.
 
 Then add the loader to your Webpack configuration. For example:
@@ -119,17 +133,21 @@ Thankfully there are a two solutions to this problem:
 
 ## Options
 
-|                   Name                    |         Type         |                 Default                 | Description                                                       |
-| :---------------------------------------: | :------------------: | :-------------------------------------: | :---------------------------------------------------------------- |
-|  **[`implementation`](#implementation)**  |  `{Object\|String}`  |                 `sass`                  | Setup Sass implementation to use.                                 |
-|     **[`sassOptions`](#sassoptions)**     | `{Object\|Function}` | defaults values for Sass implementation | Options for Sass.                                                 |
-|       **[`sourceMap`](#sourcemap)**       |     `{Boolean}`      |           `compiler.devtool`            | Enables/Disables generation of source maps.                       |
-|  **[`additionalData`](#additionaldata)**  | `{String\|Function}` |               `undefined`               | Prepends/Appends `Sass`/`SCSS` code before the actual entry file. |
-| **[`webpackImporter`](#webpackimporter)** |     `{Boolean}`      |                 `true`                  | Enables/Disables the default Webpack importer.                    |
+- **[`implementation`](#implementation)**
+- **[`sassOptions`](#sassoptions)**
+- **[`sourceMap`](#sourcemap)**
+- **[`additionalData`](#additionaldata)**
+- **[`webpackImporter`](#webpackimporter)**
+- **[`warnRuleAsWarning`](#warnruleaswarning)**
 
 ### `implementation`
 
-Type: `Object | String`
+Type:
+
+```ts
+type implementation = object | string;
+```
+
 Default: `sass`
 
 The special `implementation` option determines which implementation of Sass to use.
@@ -168,7 +186,7 @@ In order to avoid this situation you can use the `implementation` option.
 
 The `implementation` options either accepts `sass` (`Dart Sass`) or `node-sass` as a module.
 
-#### Object
+#### `object`
 
 For example, to use Dart Sass, you'd pass:
 
@@ -195,7 +213,7 @@ module.exports = {
 };
 ```
 
-#### String
+#### `string`
 
 For example, to use Dart Sass, you'd pass:
 
@@ -301,16 +319,29 @@ module.exports = {
 
 ### `sassOptions`
 
-Type: `Object|Function`
+Type:
+
+```ts
+type sassOptions =
+  | import("sass").LegacyOptions<"async">
+  | ((
+      content: string | Buffer,
+      loaderContext: LoaderContext,
+      meta: any
+    ) => import("sass").LegacyOptions<"async">);
+```
+
 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`.
+
 > ℹ️ The `indentedSyntax` option has `true` value for the `sass` extension.
 
 > ℹ️ Options such as `data` and `file` are unavailable and will be ignored.
 
-> ℹ We recommend not to set the `outFile`, `sourceMapContents`, `sourceMapEmbed`, `sourceMapRoot` options because `sass-loader` automatically sets these options when the `sourceMap` option is `true`.
+> ℹ 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.
 
@@ -321,9 +352,9 @@ Please consult documentation before using them:
 - [Dart Sass documentation](https://github.com/sass/dart-sass#javascript-api) for all available `sass` options.
 - [Node Sass documentation](https://github.com/sass/node-sass/#options) for all available `node-sass` options.
 
-#### `Object`
+#### `object`
 
-Use and object for the Sass implementation setup.
+Use an object for the Sass implementation setup.
 
 **webpack.config.js**
 
@@ -352,7 +383,7 @@ module.exports = {
 };
 ```
 
-#### `Function`
+#### `function`
 
 Allows to setup the Sass implementation by setting different options based on the loader context.
 
@@ -394,7 +425,12 @@ module.exports = {
 
 ### `sourceMap`
 
-Type: `Boolean`
+Type:
+
+```ts
+type sourceMap = boolean;
+```
+
 Default: depends on the `compiler.devtool` value
 
 Enables/Disables generation of source maps.
@@ -466,7 +502,14 @@ module.exports = {
 
 ### `additionalData`
 
-Type: `String|Function`
+Type:
+
+```ts
+type additionalData =
+  | string
+  | ((content: string | Buffer, loaderContext: LoaderContext) => string);
+```
+
 Default: `undefined`
 
 Prepends `Sass`/`SCSS` code before the actual entry file.
@@ -474,7 +517,7 @@ In this case, the `sass-loader` will not override the `data` option but just **p
 
 This is especially useful when some of your Sass variables depend on the environment:
 
-#### `String`
+#### `string`
 
 ```js
 module.exports = {
@@ -498,7 +541,7 @@ module.exports = {
 };
 ```
 
-#### `Function`
+#### `function`
 
 ##### Sync
 
@@ -570,7 +613,12 @@ module.exports = {
 
 ### `webpackImporter`
 
-Type: `Boolean`
+Type:
+
+```ts
+type webpackImporter = boolean;
+```
+
 Default: `true`
 
 Enables/Disables the default Webpack importer.
@@ -602,6 +650,113 @@ module.exports = {
 };
 ```
 
+### `warnRuleAsWarning`
+
+Type:
+
+```ts
+type warnRuleAsWarning = boolean;
+```
+
+Default: `false`
+
+Treats the `@warn` rule as a webpack warning.
+
+> ℹ️ It will be `true` by default in the next major release.
+
+**style.scss**
+
+```scss
+$known-prefixes: webkit, moz, ms, o;
+
+@mixin prefix($property, $value, $prefixes) {
+  @each $prefix in $prefixes {
+    @if not index($known-prefixes, $prefix) {
+      @warn "Unknown prefix #{$prefix}.";
+    }
+
+    -#{$prefix}-#{$property}: $value;
+  }
+  #{$property}: $value;
+}
+
+.tilt {
+  // Oops, we typo'd "webkit" as "wekbit"!
+  @include prefix(transform, rotate(15deg), wekbit ms);
+}
+```
+
+The presented code will throw webpack warning instead logging.
+
+To ignore unnecessary warnings you can use the [ignoreWarnings](https://webpack.js.org/configuration/other-options/#ignorewarnings) option.
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.s[ac]ss$/i,
+        use: [
+          "style-loader",
+          "css-loader",
+          {
+            loader: "sass-loader",
+            options: {
+              warnRuleAsWarning: true,
+            },
+          },
+        ],
+      },
+    ],
+  },
+};
+```
+
+### `api`
+
+Type:
+
+```ts
+type api = "legacy" | "modern";
+```
+
+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).
+
+> ⚠ 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**
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.s[ac]ss$/i,
+        use: [
+          "style-loader",
+          "css-loader",
+          {
+            loader: "sass-loader",
+            options: {
+              api: "modern",
+              sassOptions: {
+                // Your sass options
+              },
+            },
+          },
+        ],
+      },
+    ],
+  },
+};
+```
+
 ## Examples
 
 ### Extracts CSS into separate files

package/dist/SassError.js

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

package/dist/SassWarning.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+class SassWarning extends Error {
+  constructor(warning, options) {
+    super(warning);
+    this.name = "SassWarning";
+    this.hideStack = true;
+
+    if (options.span) {
+      this.loc = {
+        line: options.span.start.line,
+        column: options.span.start.column
+      };
+    }
+  }
+
+}
+
+var _default = SassWarning;
+exports.default = _default;

package/dist/index.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _url = _interopRequireDefault(require("url"));
+
 var _path = _interopRequireDefault(require("path"));
 
 var _options = _interopRequireDefault(require("./options.json"));
@@ -36,31 +38,57 @@ async function loader(content) {
   const shouldUseWebpackImporter = typeof options.webpackImporter === "boolean" ? options.webpackImporter : true;
 
   if (shouldUseWebpackImporter) {
-    const {
-      includePaths
-    } = sassOptions;
-    sassOptions.importer.push((0, _utils.getWebpackImporter)(this, implementation, includePaths));
+    const isModernAPI = options.api === "modern";
+
+    if (!isModernAPI) {
+      const {
+        includePaths
+      } = sassOptions;
+      sassOptions.importer.push((0, _utils.getWebpackImporter)(this, implementation, includePaths));
+    } else {
+      sassOptions.importers.push((0, _utils.getModernWebpackImporter)(this, implementation));
+    }
   }
 
-  const render = (0, _utils.getRenderFunctionFromSassImplementation)(implementation);
-  render(sassOptions, (error, result) => {
-    if (error) {
-      // There are situations when the `file` property do not exist
-      if (error.file) {
-        // `node-sass` returns POSIX paths
-        this.addDependency(_path.default.normalize(error.file));
-      }
-
-      callback(new _SassError.default(error));
-      return;
+  const compile = (0, _utils.getCompileFn)(implementation, options);
+  let result;
+
+  try {
+    result = await compile(sassOptions, options);
+  } catch (error) {
+    // There are situations when the `file`/`span.url` property do not exist
+    // Modern API
+    if (error.span && typeof error.span.url !== "undefined") {
+      this.addDependency(_url.default.fileURLToPath(error.span.url));
+    } // Legacy API
+    else if (typeof error.file !== "undefined") {
+      // `node-sass` returns POSIX paths
+      this.addDependency(_path.default.normalize(error.file));
     }
 
-    let map = result.map ? JSON.parse(result.map) : null; // Modify source paths only for webpack, otherwise we do nothing
+    callback(new _SassError.default(error));
+    return;
+  }
+
+  let map = // Modern API, then legacy API
+  result.sourceMap ? result.sourceMap : result.map ? JSON.parse(result.map) : null; // Modify source paths only for webpack, otherwise we do nothing
+
+  if (map && useSourceMap) {
+    map = (0, _utils.normalizeSourceMap)(map, this.rootContext);
+  } // Modern API
 
-    if (map && useSourceMap) {
-      map = (0, _utils.normalizeSourceMap)(map, this.rootContext);
-    }
 
+  if (typeof result.loadedUrls !== "undefined") {
+    result.loadedUrls.forEach(includedFile => {
+      const normalizedIncludedFile = _url.default.fileURLToPath(includedFile); // Custom `importer` can return only `contents` so includedFile will be relative
+
+
+      if (_path.default.isAbsolute(normalizedIncludedFile)) {
+        this.addDependency(normalizedIncludedFile);
+      }
+    });
+  } // Legacy API
+  else if (typeof result.stats !== "undefined" && typeof result.stats.includedFiles !== "undefined") {
     result.stats.includedFiles.forEach(includedFile => {
       const normalizedIncludedFile = _path.default.normalize(includedFile); // Custom `importer` can return only `contents` so includedFile will be relative
 
@@ -69,8 +97,9 @@ async function loader(content) {
         this.addDependency(normalizedIncludedFile);
       }
     });
-    callback(null, result.css.toString(), map);
-  });
+  }
+
+  callback(null, result.css.toString(), map);
 }
 
 var _default = loader;

package/dist/options.json

@@ -3,7 +3,8 @@
   "type": "object",
   "properties": {
     "implementation": {
-      "description": "The implementation of the sass to be used (https://github.com/webpack-contrib/sass-loader#implementation).",
+      "description": "The implementation of the sass to be used.",
+      "link": "https://github.com/webpack-contrib/sass-loader#implementation",
       "anyOf": [
         {
           "type": "string"
@@ -13,8 +14,14 @@
         }
       ]
     },
+    "api": {
+      "description": "Switch between old and modern API for `sass` (`Dart Sass`) and `Sass Embedded` implementations.",
+      "link": "https://github.com/webpack-contrib/sass-loader#sassoptions",
+      "enum": ["legacy", "modern"]
+    },
     "sassOptions": {
-      "description": "Options for `node-sass` or `sass` (`Dart Sass`) implementation. (https://github.com/webpack-contrib/sass-loader#implementation).",
+      "description": "Options for `node-sass` or `sass` (`Dart Sass`) implementation.",
+      "link": "https://github.com/webpack-contrib/sass-loader#sassoptions",
       "anyOf": [
         {
           "type": "object",
@@ -26,7 +33,8 @@
       ]
     },
     "additionalData": {
-      "description": "Prepends/Appends `Sass`/`SCSS` code before the actual entry file (https://github.com/webpack-contrib/sass-loader#additionaldata).",
+      "description": "Prepends/Appends `Sass`/`SCSS` code before the actual entry file.",
+      "link": "https://github.com/webpack-contrib/sass-loader#additionaldata",
       "anyOf": [
         {
           "type": "string"
@@ -37,11 +45,18 @@
       ]
     },
     "sourceMap": {
-      "description": "Enables/Disables generation of source maps (https://github.com/webpack-contrib/sass-loader#sourcemap).",
+      "description": "Enables/Disables generation of source maps.",
+      "link": "https://github.com/webpack-contrib/sass-loader#sourcemap",
       "type": "boolean"
     },
     "webpackImporter": {
-      "description": "Enables/Disables default `webpack` importer (https://github.com/webpack-contrib/sass-loader#webpackimporter).",
+      "description": "Enables/Disables default `webpack` importer.",
+      "link": "https://github.com/webpack-contrib/sass-loader#webpackimporter",
+      "type": "boolean"
+    },
+    "warnRuleAsWarning": {
+      "description": "Treats the '@warn' rule as a webpack warning.",
+      "link": "https://github.com/webpack-contrib/sass-loader#warnruleaswarning",
       "type": "boolean"
     }
   },

package/dist/utils.js

@@ -3,13 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getCompileFn = getCompileFn;
+exports.getModernWebpackImporter = getModernWebpackImporter;
 exports.getSassImplementation = getSassImplementation;
 exports.getSassOptions = getSassOptions;
-exports.getWebpackResolver = getWebpackResolver;
 exports.getWebpackImporter = getWebpackImporter;
-exports.getRenderFunctionFromSassImplementation = getRenderFunctionFromSassImplementation;
-exports.normalizeSourceMap = normalizeSourceMap;
+exports.getWebpackResolver = getWebpackResolver;
 exports.isSupportedFibers = isSupportedFibers;
+exports.normalizeSourceMap = normalizeSourceMap;
 
 var _url = _interopRequireDefault(require("url"));
 
@@ -19,6 +20,8 @@ var _full = require("klona/full");
 
 var _neoAsync = _interopRequireDefault(require("neo-async"));
 
+var _SassWarning = _interopRequireDefault(require("./SassWarning"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function getDefaultSassImplementation() {
@@ -91,6 +94,9 @@ function getSassImplementation(loaderContext, implementation) {
   } else if (implementationName === "node-sass") {
     // eslint-disable-next-line consistent-return
     return resolvedImplementation;
+  } else if (implementationName === "sass-embedded") {
+    // eslint-disable-next-line consistent-return
+    return resolvedImplementation;
   }
 
   loaderContext.emitError(new Error(`Unknown Sass implementation "${implementationName}".`));
@@ -133,69 +139,149 @@ function isSupportedFibers() {
 async 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");
+  const isModernAPI = loaderOptions.api === "modern";
+  options.data = loaderOptions.additionalData ? typeof loaderOptions.additionalData === "function" ? await loaderOptions.additionalData(content, loaderContext) : `${loaderOptions.additionalData}\n${content}` : content;
 
-  if (isDartSass && isSupportedFibers()) {
-    const shouldTryToResolveFibers = !options.fiber && options.fiber !== false;
+  if (!options.logger) {
+    // TODO set me to `true` by default in the next major release
+    const needEmitWarning = loaderOptions.warnRuleAsWarning === true;
+    const logger = loaderContext.getLogger("sass-loader");
 
-    if (shouldTryToResolveFibers) {
-      let fibers;
+    const formatSpan = span => `${span.url || "-"}:${span.start.line}:${span.start.column}: `;
 
-      try {
-        fibers = require.resolve("fibers");
-      } catch (_error) {// Nothing
-      }
+    options.logger = {
+      debug(message, loggerOptions) {
+        let builtMessage = "";
 
-      if (fibers) {
-        // eslint-disable-next-line global-require, import/no-dynamic-require
-        options.fiber = require(fibers);
-      }
-    } else if (options.fiber === false) {
-      // Don't pass the `fiber` option for `sass` (`Dart Sass`)
-      delete options.fiber;
-    }
-  } else {
-    // Don't pass the `fiber` option for `node-sass`
-    delete options.fiber;
-  }
+        if (loggerOptions.span) {
+          builtMessage = formatSpan(loggerOptions.span);
+        }
 
-  options.file = loaderContext.resourcePath;
-  options.data = loaderOptions.additionalData ? typeof loaderOptions.additionalData === "function" ? await loaderOptions.additionalData(content, loaderContext) : `${loaderOptions.additionalData}\n${content}` : content; // opt.outputStyle
+        builtMessage += message;
+        logger.debug(builtMessage);
+      },
 
-  if (!options.outputStyle && isProductionLikeMode(loaderContext)) {
-    options.outputStyle = "compressed";
-  }
+      warn(message, loggerOptions) {
+        let builtMessage = "";
+
+        if (loggerOptions.deprecation) {
+          builtMessage += "Deprecation ";
+        }
+
+        if (loggerOptions.span && !loggerOptions.stack) {
+          builtMessage = formatSpan(loggerOptions.span);
+        }
+
+        builtMessage += message;
 
-  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.
-    // 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 = true;
-    options.outFile = _path.default.join(loaderContext.rootContext, "style.css.map");
-    options.sourceMapContents = true;
-    options.omitSourceMapUrl = true;
-    options.sourceMapEmbed = false;
+        if (loggerOptions.stack) {
+          builtMessage += `\n\n${loggerOptions.stack}`;
+        }
+
+        if (needEmitWarning) {
+          loaderContext.emitWarning(new _SassWarning.default(builtMessage, loggerOptions));
+        } else {
+          logger.warn(builtMessage);
+        }
+      }
+
+    };
   }
 
   const {
     resourcePath
   } = loaderContext;
 
-  const ext = _path.default.extname(resourcePath); // If we are compiling sass and indentedSyntax isn't set, automatically set it.
+  if (isModernAPI) {
+    options.url = _url.default.pathToFileURL(resourcePath); // opt.outputStyle
+
+    if (!options.style && isProductionLikeMode(loaderContext)) {
+      options.style = "compressed";
+    }
 
+    if (useSourceMap) {
+      options.sourceMap = true;
+    } // If we are compiling sass and indentedSyntax isn't set, automatically set it.
 
-  if (ext && ext.toLowerCase() === ".sass" && typeof options.indentedSyntax === "undefined") {
-    options.indentedSyntax = true;
+
+    if (typeof options.syntax === "undefined") {
+      const ext = _path.default.extname(resourcePath);
+
+      if (ext && ext.toLowerCase() === ".scss") {
+        options.syntax = "scss";
+      } else if (ext && ext.toLowerCase() === ".sass") {
+        options.syntax = "indented";
+      } else if (ext && ext.toLowerCase() === ".css") {
+        options.syntax = "css";
+      }
+    }
+
+    options.importers = options.importers ? proxyCustomImporters(Array.isArray(options.importers) ? options.importers : [options.importers], loaderContext) : [];
   } else {
-    options.indentedSyntax = Boolean(options.indentedSyntax);
-  } // Allow passing custom importers to `sass`/`node-sass`. Accepts `Function` or an array of `Function`s.
+    options.file = resourcePath;
+
+    if (isDartSass && isSupportedFibers()) {
+      const shouldTryToResolveFibers = !options.fiber && options.fiber !== false;
+
+      if (shouldTryToResolveFibers) {
+        let fibers;
+
+        try {
+          fibers = require.resolve("fibers");
+        } catch (_error) {// Nothing
+        }
+
+        if (fibers) {
+          // eslint-disable-next-line global-require, import/no-dynamic-require
+          options.fiber = require(fibers);
+        }
+      } else if (options.fiber === false) {
+        // Don't pass the `fiber` option for `sass` (`Dart Sass`)
+        delete options.fiber;
+      }
+    } else {
+      // Don't pass the `fiber` option for `node-sass`
+      delete options.fiber;
+    } // opt.outputStyle
+
+
+    if (!options.outputStyle && isProductionLikeMode(loaderContext)) {
+      options.outputStyle = "compressed";
+    }
+
+    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.
+      // 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 = true;
+      options.outFile = _path.default.join(loaderContext.rootContext, "style.css.map");
+      options.sourceMapContents = true;
+      options.omitSourceMapUrl = true;
+      options.sourceMapEmbed = false;
+    }
 
+    const ext = _path.default.extname(resourcePath); // If we are compiling sass and indentedSyntax isn't set, automatically set it.
+
+
+    if (ext && ext.toLowerCase() === ".sass" && typeof options.indentedSyntax === "undefined") {
+      options.indentedSyntax = true;
+    } else {
+      options.indentedSyntax = Boolean(options.indentedSyntax);
+    } // Allow passing custom importers to `sass`/`node-sass`. Accepts `Function` or an array of `Function`s.
+
+
+    options.importer = options.importer ? proxyCustomImporters(Array.isArray(options.importer) ? options.importer : [options.importer], loaderContext) : [];
+    options.includePaths = [].concat(process.cwd()).concat( // We use `includePaths` in context for resolver, so it should be always absolute
+    (options.includePaths || []).map(includePath => _path.default.isAbsolute(includePath) ? includePath : _path.default.join(process.cwd(), includePath))).concat(process.env.SASS_PATH ? process.env.SASS_PATH.split(process.platform === "win32" ? ";" : ":") : []);
+
+    if (typeof options.charset === "undefined") {
+      options.charset = true;
+    }
+  }
 
-  options.importer = options.importer ? proxyCustomImporters(Array.isArray(options.importer) ? options.importer : [options.importer], loaderContext) : [];
-  options.includePaths = [].concat(process.cwd()).concat( // We use `includePaths` in context for resolver, so it should be always absolute
-  (options.includePaths || []).map(includePath => _path.default.isAbsolute(includePath) ? includePath : _path.default.join(process.cwd(), includePath))).concat(process.env.SASS_PATH ? process.env.SASS_PATH.split(process.platform === "win32" ? ";" : ":") : []);
   return options;
 }
 
@@ -277,6 +363,40 @@ function promiseResolve(callbackResolve) {
   });
 }
 
+async function startResolving(resolutionMap) {
+  if (resolutionMap.length === 0) {
+    return Promise.reject();
+  }
+
+  const [{
+    possibleRequests
+  }] = resolutionMap;
+
+  if (possibleRequests.length === 0) {
+    return Promise.reject();
+  }
+
+  const [{
+    resolve,
+    context
+  }] = resolutionMap;
+
+  try {
+    return await resolve(context, possibleRequests[0]);
+  } catch (_ignoreError) {
+    const [, ...tailResult] = possibleRequests;
+
+    if (tailResult.length === 0) {
+      const [, ...tailResolutionMap] = resolutionMap;
+      return startResolving(tailResolutionMap);
+    } // eslint-disable-next-line no-param-reassign
+
+
+    resolutionMap[0].possibleRequests = tailResult;
+    return startResolving(resolutionMap);
+  }
+}
+
 const IS_SPECIAL_MODULE_IMPORT = /^~[^/]+$/; // `[drive_letter]:\` + `\\[server]\[sharename]\`
 
 const IS_NATIVE_WIN32_PATH = /^[a-z]:[/\\]|^\\\\/i;
@@ -299,41 +419,7 @@ const IS_NATIVE_WIN32_PATH = /^[a-z]:[/\\]|^\\\\/i;
  */
 
 function getWebpackResolver(resolverFactory, implementation, includePaths = []) {
-  async function startResolving(resolutionMap) {
-    if (resolutionMap.length === 0) {
-      return Promise.reject();
-    }
-
-    const [{
-      possibleRequests
-    }] = resolutionMap;
-
-    if (possibleRequests.length === 0) {
-      return Promise.reject();
-    }
-
-    const [{
-      resolve,
-      context
-    }] = resolutionMap;
-
-    try {
-      return await resolve(context, possibleRequests[0]);
-    } catch (_ignoreError) {
-      const [, ...tailResult] = possibleRequests;
-
-      if (tailResult.length === 0) {
-        const [, ...tailResolutionMap] = resolutionMap;
-        return startResolving(tailResolutionMap);
-      } // eslint-disable-next-line no-param-reassign
-
-
-      resolutionMap[0].possibleRequests = tailResult;
-      return startResolving(resolutionMap);
-    }
-  }
-
-  const isDartSass = implementation.info.includes("dart-sass"); // We only have one difference with the built-in sass resolution logic and out resolution logic:
+  const isDartSass = implementation && implementation.info.includes("dart-sass"); // We only have one difference with the built-in sass resolution logic and out resolution logic:
   // First, we look at the files starting with `_`, then without `_` (i.e. `_name.sass`, `_name.scss`, `_name.css`, `name.sass`, `name.scss`, `name.css`),
   // although `sass` look together by extensions (i.e. `_name.sass`/`name.sass`/`_name.scss`/`name.scss`/`_name.css`/`name.css`).
   // It shouldn't be a problem because `sass` throw errors:
@@ -457,6 +543,18 @@ function getWebpackResolver(resolverFactory, implementation, includePaths = [])
 
 const MATCH_CSS = /\.css$/i;
 
+function getModernWebpackImporter() {
+  return {
+    async canonicalize() {
+      return null;
+    },
+
+    load() {// TODO implement
+    }
+
+  };
+}
+
 function getWebpackImporter(loaderContext, implementation, includePaths) {
   const resolve = getWebpackResolver(loaderContext.getResolve, implementation, includePaths);
   return function importer(originalUrl, prev, done) {
@@ -486,14 +584,38 @@ let nodeSassJobQueue = null;
  * Verifies that the implementation and version of Sass is supported by this loader.
  *
  * @param {Object} implementation
+ * @param {Object} options
  * @returns {Function}
  */
 
-function getRenderFunctionFromSassImplementation(implementation) {
-  const isDartSass = implementation.info.includes("dart-sass");
+function getCompileFn(implementation, options) {
+  const isNewSass = implementation.info.includes("dart-sass") || implementation.info.includes("sass-embedded");
+
+  if (isNewSass) {
+    if (options.api === "modern") {
+      return sassOptions => {
+        const {
+          data,
+          ...rest
+        } = sassOptions;
+        return implementation.compileStringAsync(data, rest);
+      };
+    }
+
+    return sassOptions => new Promise((resolve, reject) => {
+      implementation.render(sassOptions, (error, result) => {
+        if (error) {
+          reject(error);
+          return;
+        }
 
-  if (isDartSass) {
-    return implementation.render.bind(implementation);
+        resolve(result);
+      });
+    });
+  }
+
+  if (options.api === "modern") {
+    throw new Error("Modern API is not supported for 'node-sass'");
   } // 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
@@ -504,7 +626,16 @@ function getRenderFunctionFromSassImplementation(implementation) {
     nodeSassJobQueue = _neoAsync.default.queue(implementation.render.bind(implementation), threadPoolSize - 1);
   }
 
-  return nodeSassJobQueue.push.bind(nodeSassJobQueue);
+  return sassOptions => new Promise((resolve, reject) => {
+    nodeSassJobQueue.push.bind(nodeSassJobQueue)(sassOptions, (error, result) => {
+      if (error) {
+        reject(error);
+        return;
+      }
+
+      resolve(result);
+    });
+  });
 }
 
 const ABSOLUTE_SCHEME = /^[A-Za-z0-9+\-.]+:/;
@@ -534,7 +665,10 @@ function normalizeSourceMap(map, rootContext) {
   // 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
+  if (typeof newMap.file !== "undefined") {
+    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.
@@ -542,9 +676,11 @@ function normalizeSourceMap(map, rootContext) {
   // 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
+    const sourceType = getURLType(source); // Do no touch `scheme-relative`, `path-absolute` and `absolute` types (except `file:`)
 
-    if (sourceType === "path-relative") {
+    if (sourceType === "absolute" && /^file:/i.test(source)) {
+      return _url.default.fileURLToPath(source);
+    } else if (sourceType === "path-relative") {
       return _path.default.resolve(rootContext, _path.default.normalize(source));
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sass-loader",
-  "version": "12.1.0",
+  "version": "12.5.0",
   "description": "Sass loader for webpack",
   "license": "MIT",
   "repository": "webpack-contrib/sass-loader",
@@ -39,8 +39,9 @@
   ],
   "peerDependencies": {
     "fibers": ">= 3.1.0",
-    "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0",
+    "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0",
     "sass": "^1.3.0",
+    "sass-embedded": "*",
     "webpack": "^5.0.0"
   },
   "peerDependenciesMeta": {
@@ -50,6 +51,9 @@
     "sass": {
       "optional": true
     },
+    "sass-embedded": {
+      "optional": true
+    },
     "fibers": {
       "optional": true
     }
@@ -59,41 +63,43 @@
     "neo-async": "^2.6.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.14.5",
-    "@babel/core": "^7.14.5",
-    "@babel/preset-env": "^7.14.5",
-    "@commitlint/cli": "^12.1.4",
-    "@commitlint/config-conventional": "^12.1.4",
+    "@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",
     "@webpack-contrib/eslint-config-webpack": "^3.0.0",
-    "babel-jest": "^27.0.2",
+    "babel-jest": "^27.5.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": "^5.2.6",
+    "css-loader": "^6.6.0",
     "del": "^6.0.0",
-    "del-cli": "^3.0.1",
+    "del-cli": "^4.0.1",
     "enhanced-resolve": "^5.8.2",
-    "eslint": "^7.28.0",
+    "eslint": "^8.8.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.23.3",
-    "fibers": "^5.0.0",
+    "eslint-plugin-import": "^2.25.4",
+    "fibers": "^5.0.1",
     "file-loader": "^6.2.0",
     "foundation-sites": "^6.6.3",
-    "husky": "^6.0.0",
-    "jest": "^27.0.4",
-    "lint-staged": "^11.0.0",
+    "husky": "^7.0.1",
+    "jest": "^27.5.0",
+    "jest-environment-node-single-context": "^27.2.0",
+    "lint-staged": "^12.3.3",
     "material-components-web": "^8.0.0",
-    "memfs": "^3.2.2",
-    "node-sass": "^6.0.0",
+    "memfs": "^3.4.1",
+    "node-sass": "^7.0.1",
     "node-sass-glob-importer": "^5.3.2",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.3.1",
-    "sass": "^1.34.1",
+    "prettier": "^2.3.2",
+    "sass": "^1.49.7",
+    "sass-embedded": "^1.49.7",
     "semver": "^7.3.5",
-    "standard-version": "^9.3.0",
-    "style-loader": "^2.0.0",
-    "webpack": "^5.38.1"
+    "standard-version": "^9.3.1",
+    "style-loader": "^3.2.1",
+    "webpack": "^5.68.0"
   },
   "keywords": [
     "sass",