sass-loader 12.0.0 → 12.4.0

package/README.md

@@ -119,17 +119,18 @@ Thankfully there are a two solutions to this problem:
 
 ## Options
 
-|                   Name                    |         Type         |                 Default                 | Description                                                       |
-| :---------------------------------------: | :------------------: | :-------------------------------------: | :---------------------------------------------------------------- |
-|  **[`implementation`](#implementation)**  |      `{Object}`      |                 `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.                    |
+|                     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.                    |
+| **[`warnRuleAsWarning`](#warnruleaswarning)** |     `{Boolean}`      |                 `false`                 | Treats the `@warn` rule as a webpack warning.                     |
 
 ### `implementation`
 
-Type: `Object`
+Type: `Object | String`
 Default: `sass`
 
 The special `implementation` option determines which implementation of Sass to use.
@@ -168,6 +169,8 @@ 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
+
 For example, to use Dart Sass, you'd pass:
 
 ```js
@@ -193,6 +196,33 @@ module.exports = {
 };
 ```
 
+#### String
+
+For example, to use Dart Sass, you'd pass:
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.s[ac]ss$/i,
+        use: [
+          "style-loader",
+          "css-loader",
+          {
+            loader: "sass-loader",
+            options: {
+              // Prefer `dart-sass`
+              implementation: require.resolve("sass"),
+            },
+          },
+        ],
+      },
+    ],
+  },
+};
+```
+
 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.
 
@@ -277,11 +307,13 @@ 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.
 
@@ -573,6 +605,65 @@ module.exports = {
 };
 ```
 
+### `warnRuleAsWarning`
+
+Type: `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,
+            },
+          },
+        ],
+      },
+    ],
+  },
+};
+```
+
 ## Examples
 
 ### Extracts CSS into separate files

package/dist/SassError.js

@@ -8,7 +8,8 @@ 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,

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/options.json

@@ -3,11 +3,20 @@
   "type": "object",
   "properties": {
     "implementation": {
-      "description": "The implementation of the sass to be used (https://github.com/webpack-contrib/sass-loader#implementation).",
-      "type": "object"
+      "description": "The implementation of the sass to be used.",
+      "link": "https://github.com/webpack-contrib/sass-loader#implementation",
+      "anyOf": [
+        {
+          "type": "string"
+        },
+        {
+          "type": "object"
+        }
+      ]
     },
     "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",
@@ -19,7 +28,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"
@@ -30,11 +40,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,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getRenderFunctionFromSassImplementation = getRenderFunctionFromSassImplementation;
 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 +19,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() {
@@ -56,6 +58,17 @@ function getSassImplementation(loaderContext, implementation) {
     }
   }
 
+  if (typeof resolvedImplementation === "string") {
+    try {
+      // eslint-disable-next-line import/no-dynamic-require, global-require
+      resolvedImplementation = require(resolvedImplementation);
+    } catch (error) {
+      loaderContext.emitError(error); // eslint-disable-next-line consistent-return
+
+      return;
+    }
+  }
+
   const {
     info
   } = resolvedImplementation;
@@ -185,6 +198,57 @@ async function getSassOptions(loaderContext, loaderOptions, content, implementat
   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;
+  }
+
+  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");
+
+    const formatSpan = span => `${span.url || "-"}:${span.start.line}:${span.start.column}: `;
+
+    options.logger = {
+      debug(message, loggerOptions) {
+        let builtMessage = "";
+
+        if (loggerOptions.span) {
+          builtMessage = formatSpan(loggerOptions.span);
+        }
+
+        builtMessage += message;
+        logger.debug(builtMessage);
+      },
+
+      warn(message, loggerOptions) {
+        let builtMessage = "";
+
+        if (loggerOptions.deprecation) {
+          builtMessage += "Deprecation ";
+        }
+
+        if (loggerOptions.span && !loggerOptions.stack) {
+          builtMessage = formatSpan(loggerOptions.span);
+        }
+
+        builtMessage += message;
+
+        if (loggerOptions.stack) {
+          builtMessage += `\n\n${loggerOptions.stack}`;
+        }
+
+        if (needEmitWarning) {
+          loaderContext.emitWarning(new _SassWarning.default(builtMessage, loggerOptions));
+        } else {
+          logger.warn(builtMessage);
+        }
+      }
+
+    };
+  }
+
   return options;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sass-loader",
-  "version": "12.0.0",
+  "version": "12.4.0",
   "description": "Sass loader for webpack",
   "license": "MIT",
   "repository": "webpack-contrib/sass-loader",
@@ -21,7 +21,7 @@
     "prebuild": "npm run clean",
     "build": "cross-env NODE_ENV=production babel src -d dist --copy-files",
     "commitlint": "commitlint --from=master",
-    "security": "npm audit",
+    "security": "npm audit --production",
     "lint:prettier": "prettier --list-different .",
     "lint:js": "eslint --cache .",
     "lint": "npm-run-all -l -p \"lint:**\"",
@@ -39,7 +39,7 @@
   ],
   "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",
     "webpack": "^5.0.0"
   },
@@ -59,41 +59,41 @@
     "neo-async": "^2.6.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.14.3",
-    "@babel/core": "^7.14.3",
-    "@babel/preset-env": "^7.14.2",
-    "@commitlint/cli": "^12.1.4",
-    "@commitlint/config-conventional": "^12.1.4",
+    "@babel/cli": "^7.14.5",
+    "@babel/core": "^7.14.6",
+    "@babel/preset-env": "^7.14.7",
+    "@commitlint/cli": "^15.0.0",
+    "@commitlint/config-conventional": "^15.0.0",
     "@webpack-contrib/eslint-config-webpack": "^3.0.0",
-    "babel-jest": "^27.0.1",
+    "babel-jest": "^27.0.6",
     "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.2.0",
     "del": "^6.0.0",
-    "del-cli": "^3.0.1",
+    "del-cli": "^4.0.1",
     "enhanced-resolve": "^5.8.2",
-    "eslint": "^7.27.0",
+    "eslint": "^8.1.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-import": "^2.23.3",
     "fibers": "^5.0.0",
     "file-loader": "^6.2.0",
     "foundation-sites": "^6.6.3",
-    "husky": "^6.0.0",
-    "jest": "^27.0.1",
-    "lint-staged": "^11.0.0",
+    "husky": "^7.0.1",
+    "jest": "^27.0.6",
+    "lint-staged": "^12.1.2",
     "material-components-web": "^8.0.0",
     "memfs": "^3.2.2",
-    "node-sass": "^6.0.0",
+    "node-sass": "^7.0.0",
     "node-sass-glob-importer": "^5.3.2",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.3.0",
-    "sass": "^1.34.0",
+    "prettier": "^2.3.2",
+    "sass": "^1.35.2",
     "semver": "^7.3.5",
-    "standard-version": "^9.3.0",
-    "style-loader": "^2.0.0",
-    "webpack": "^5.37.1"
+    "standard-version": "^9.3.1",
+    "style-loader": "^3.2.1",
+    "webpack": "^5.45.1"
   },
   "keywords": [
     "sass",