feat: added the warnRuleAsWarning option, allow to emit a warning o…

…n the `@warn` rule (#992)
webpack-contrib · Oct 27, 2021 · c652c79 · c652c79
1 parent bb7cef9
commit c652c79
Show file tree

Hide file tree

Showing 9 changed files with 457 additions and 16 deletions.
diff --git a/README.md b/README.md
@@ -119,13 +119,14 @@ 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.                    |
+|                     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`
 
@@ -604,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

diff --git a/src/SassError.js b/src/SassError.js
@@ -3,6 +3,7 @@ class SassError extends Error {
     super();
 
     this.name = "SassError";
+    // TODO remove me in the next major release
     this.originalSassError = sassError;
     this.loc = {
       line: sassError.line,

diff --git a/src/SassWarning.js b/src/SassWarning.js
@@ -0,0 +1,17 @@
+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,
+      };
+    }
+  }
+}
+
+export default SassWarning;
diff --git a/src/options.json b/src/options.json
@@ -48,6 +48,11 @@
       "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"
     }
   },
   "additionalProperties": false

diff --git a/src/utils.js b/src/utils.js
@@ -4,6 +4,8 @@ import path from "path";
 import { klona } from "klona/full";
 import async from "neo-async";
 
+import SassWarning from "./SassWarning";
+
 function getDefaultSassImplementation() {
   let sassImplPkg = "sass";
 
@@ -229,6 +231,9 @@ async function getSassOptions(
   }
 
   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}: `;
@@ -262,7 +267,13 @@ async function getSassOptions(
           builtMessage += `\n\n${loggerOptions.stack}`;
         }
 
-        logger.warn(builtMessage);
+        if (needEmitWarning) {
+          loaderContext.emitWarning(
+            new SassWarning(builtMessage, loggerOptions)
+          );
+        } else {
+          logger.warn(builtMessage);
+        }
       },
     };
   }

diff --git a/test/__snapshots__/validate-options.test.js.snap b/test/__snapshots__/validate-options.test.js.snap
@@ -69,49 +69,56 @@ exports[`validate options should throw an error on the "sourceMap" option with "
 exports[`validate options should throw an error on the "unknown" option with "/test/" value 1`] = `
 "Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
  - options has an unknown property 'unknown'. These properties are valid:
-   object { implementation?, sassOptions?, additionalData?, sourceMap?, webpackImporter? }"
+   object { implementation?, sassOptions?, additionalData?, sourceMap?, webpackImporter?, warnRuleAsWarning? }"
 `;
 
 exports[`validate options should throw an error on the "unknown" option with "[]" value 1`] = `
 "Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
  - options has an unknown property 'unknown'. These properties are valid:
-   object { implementation?, sassOptions?, additionalData?, sourceMap?, webpackImporter? }"
+   object { implementation?, sassOptions?, additionalData?, sourceMap?, webpackImporter?, warnRuleAsWarning? }"
 `;
 
 exports[`validate options should throw an error on the "unknown" option with "{"foo":"bar"}" value 1`] = `
 "Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
  - options has an unknown property 'unknown'. These properties are valid:
-   object { implementation?, sassOptions?, additionalData?, sourceMap?, webpackImporter? }"
+   object { implementation?, sassOptions?, additionalData?, sourceMap?, webpackImporter?, warnRuleAsWarning? }"
 `;
 
 exports[`validate options should throw an error on the "unknown" option with "{}" value 1`] = `
 "Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
  - options has an unknown property 'unknown'. These properties are valid:
-   object { implementation?, sassOptions?, additionalData?, sourceMap?, webpackImporter? }"
+   object { implementation?, sassOptions?, additionalData?, sourceMap?, webpackImporter?, warnRuleAsWarning? }"
 `;
 
 exports[`validate options should throw an error on the "unknown" option with "1" value 1`] = `
 "Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
  - options has an unknown property 'unknown'. These properties are valid:
-   object { implementation?, sassOptions?, additionalData?, sourceMap?, webpackImporter? }"
+   object { implementation?, sassOptions?, additionalData?, sourceMap?, webpackImporter?, warnRuleAsWarning? }"
 `;
 
 exports[`validate options should throw an error on the "unknown" option with "false" value 1`] = `
 "Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
  - options has an unknown property 'unknown'. These properties are valid:
-   object { implementation?, sassOptions?, additionalData?, sourceMap?, webpackImporter? }"
+   object { implementation?, sassOptions?, additionalData?, sourceMap?, webpackImporter?, warnRuleAsWarning? }"
 `;
 
 exports[`validate options should throw an error on the "unknown" option with "test" value 1`] = `
 "Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
  - options has an unknown property 'unknown'. These properties are valid:
-   object { implementation?, sassOptions?, additionalData?, sourceMap?, webpackImporter? }"
+   object { implementation?, sassOptions?, additionalData?, sourceMap?, webpackImporter?, warnRuleAsWarning? }"
 `;
 
 exports[`validate options should throw an error on the "unknown" option with "true" value 1`] = `
 "Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
  - options has an unknown property 'unknown'. These properties are valid:
-   object { implementation?, sassOptions?, additionalData?, sourceMap?, webpackImporter? }"
+   object { implementation?, sassOptions?, additionalData?, sourceMap?, webpackImporter?, warnRuleAsWarning? }"
+`;
+
+exports[`validate options should throw an error on the "warnRuleAsWarning" option with "string" value 1`] = `
+"Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
+ - options.warnRuleAsWarning should be a boolean.
+   -> Treats the '@warn' rule as a webpack warning.
+   -> Read more at https://github.com/webpack-contrib/sass-loader#warnruleaswarning"
 `;
 
 exports[`validate options should throw an error on the "webpackImporter" option with "string" value 1`] = `