refactor: move all sass options to the sassOptions option

README.md

@@ -107,46 +107,6 @@ Thankfully there are a two solutions to this problem:
 
 ## Options
 
-By default all options passed to loader also passed to to [Node Sass](https://github.com/sass/node-sass) or [Dart Sass](http://sass-lang.com/dart-sass)
-
-> ℹ️ The `indentedSyntax` option has `true` value for the `sass` extension.
-
-> ℹ️ Options such as `file` and `outFile` are unavailable.
-
-> ℹ️ Only the "expanded" and "compressed" values of outputStyle are supported for `dart-sass`.
-
-> ℹ We recommend don't use `sourceMapContents`, `sourceMapEmbed`, `sourceMapRoot` options because loader automatically setup this options.
-
-There is a slight difference between the `node-sass` and `sass` options. We recommend look documentation before used them:
-
-- [the Node Sass documentation](https://github.com/sass/node-sass/#options) for all available `node-sass` options.
-- [the Dart Sass documentation](https://github.com/sass/dart-sass#javascript-api) for all available `sass` options.
-
-**webpack.config.js**
-
-```js
-module.exports = {
-  module: {
-    rules: [
-      {
-        test: /\.s[ac]ss$/i,
-        use: [
-          'style-loader',
-          'css-loader',
-          {
-            loader: 'sass-loader',
-            options: {
-              indentWidth: 4,
-              includePaths: ['absolute/path/a', 'absolute/path/b'],
-            },
-          },
-        ],
-      },
-    ],
-  },
-};
-```
-
 ### `implementation`
 
 The special `implementation` option determines which implementation of Sass to use.
@@ -239,6 +199,95 @@ module.exports = {
 };
 ```
 
+### `sassOptions`
+
+Type: `Object|Function`
+
+Setups options for [Node Sass](https://github.com/sass/node-sass) or [Dart Sass](http://sass-lang.com/dart-sass).
+
+> ℹ️ The `indentedSyntax` option has `true` value for the `sass` extension.
+
+> ℹ️ Options such as `file` and `outFile` are unavailable.
+
+> ℹ We recommend don't use `sourceMapContents`, `sourceMapEmbed`, `sourceMapRoot` options because loader automatically setup this options.
+
+There is a slight difference between the `node-sass` and `sass` (`Dart Sass`) options.
+We recommend look documentation before used them:
+
+- [the Node Sass documentation](https://github.com/sass/node-sass/#options) for all available `node-sass` options.
+- [the Dart Sass documentation](https://github.com/sass/dart-sass#javascript-api) for all available `sass` options.
+
+#### `Object`
+
+Setups option as object for sass implementation.
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.s[ac]ss$/i,
+        use: [
+          'style-loader',
+          'css-loader',
+          {
+            loader: 'sass-loader',
+            options: {
+              sassOptions: {
+                indentWidth: 4,
+                includePaths: ['absolute/path/a', 'absolute/path/b'],
+              },
+            },
+          },
+        ],
+      },
+    ],
+  },
+};
+```
+
+#### `Function`
+
+Allows setup difference options based on loader context.
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.s[ac]ss$/i,
+        use: [
+          'style-loader',
+          'css-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') {
+                  return {
+                    includePaths: ['absolute/path/c', 'absolute/path/d'],
+                  };
+                }
+
+                return {
+                  includePaths: ['absolute/path/a', 'absolute/path/b'],
+                };
+              },
+            },
+          },
+        ],
+      },
+    ],
+  },
+};
+```
+
 ### `prependData`
 
 Type: `String|Function`

src/getSassOptions.js

@@ -16,30 +16,25 @@ function isProductionLikeMode(loaderContext) {
 /**
  * Derives the sass options from the loader context and normalizes its values with sane defaults.
  *
- * Please note: If loaderContext.query is an options object, it will be re-used across multiple invocations.
- * That's why we must not modify the object directly.
- *
  * @param {LoaderContext} loaderContext
- * @param {string} loaderOptions
- * @param {object} content
+ * @param {object} loaderOptions
+ * @param {string} content
  * @returns {Object}
  */
 function getSassOptions(loaderContext, loaderOptions, content) {
-  const options = cloneDeep(loaderOptions);
-  const { resourcePath } = loaderContext;
-
-  // allow opt.functions to be configured WRT loaderContext
-  if (typeof options.functions === 'function') {
-    options.functions = options.functions(loaderContext);
-  }
-
-  let { prependData } = options;
-
-  if (typeof prependData === 'function') {
-    prependData = prependData(loaderContext);
-  }
+  const options = cloneDeep(
+    loaderOptions.sassOptions
+      ? typeof loaderOptions.sassOptions === 'function'
+        ? loaderOptions.sassOptions(loaderContext)
+        : loaderOptions.sassOptions
+      : {}
+  );
 
-  options.data = prependData ? prependData + os.EOL + content : content;
+  options.data = loaderOptions.prependData
+    ? typeof loaderOptions.prependData === 'function'
+      ? loaderOptions.prependData(loaderContext) + os.EOL + content
+      : loaderOptions.prependData + os.EOL + content
+    : content;
 
   // opt.outputStyle
   if (!options.outputStyle && isProductionLikeMode(loaderContext)) {
@@ -49,7 +44,7 @@ function getSassOptions(loaderContext, loaderOptions, content) {
   // opt.sourceMap
   // Not using the `this.sourceMap` flag because css source maps are different
   // @see https://github.com/webpack/css-loader/pull/40
-  if (options.sourceMap) {
+  if (loaderOptions.sourceMap) {
     // 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.
@@ -75,7 +70,7 @@ function getSassOptions(loaderContext, loaderOptions, content) {
     }
   }
 
-  // indentedSyntax is a boolean flag.
+  const { resourcePath } = loaderContext;
   const ext = path.extname(resourcePath);
 
   // If we are compiling sass and indentedSyntax isn't set, automatically set it.

test/__snapshots__/loader.test.js.snap

@@ -657,83 +657,3 @@ exports[`loader should work with the "bootstrap-sass" package, import as a packa
 exports[`loader should work with the "bootstrap-sass" package, import as a package (node-sass) (scss): errors 1`] = `Array []`;
 
 exports[`loader should work with the "bootstrap-sass" package, import as a package (node-sass) (scss): warnings 1`] = `Array []`;
-
-exports[`loader should work with the "functions" option as a function (dart-sass) (sass): errors 1`] = `Array []`;
-
-exports[`loader should work with the "functions" option as a function (dart-sass) (sass): warnings 1`] = `Array []`;
-
-exports[`loader should work with the "functions" option as a function (dart-sass) (scss): errors 1`] = `Array []`;
-
-exports[`loader should work with the "functions" option as a function (dart-sass) (scss): warnings 1`] = `Array []`;
-
-exports[`loader should work with the "functions" option as a function (node-sass) (sass): errors 1`] = `Array []`;
-
-exports[`loader should work with the "functions" option as a function (node-sass) (sass): warnings 1`] = `Array []`;
-
-exports[`loader should work with the "functions" option as a function (node-sass) (scss): errors 1`] = `Array []`;
-
-exports[`loader should work with the "functions" option as a function (node-sass) (scss): warnings 1`] = `Array []`;
-
-exports[`loader should work with the "functions" option as an object (dart-sass) (sass): errors 1`] = `Array []`;
-
-exports[`loader should work with the "functions" option as an object (dart-sass) (sass): errors 2`] = `Array []`;
-
-exports[`loader should work with the "functions" option as an object (dart-sass) (sass): warnings 1`] = `Array []`;
-
-exports[`loader should work with the "functions" option as an object (dart-sass) (sass): warnings 2`] = `Array []`;
-
-exports[`loader should work with the "functions" option as an object (dart-sass) (scss): errors 1`] = `Array []`;
-
-exports[`loader should work with the "functions" option as an object (dart-sass) (scss): errors 2`] = `Array []`;
-
-exports[`loader should work with the "functions" option as an object (dart-sass) (scss): warnings 1`] = `Array []`;
-
-exports[`loader should work with the "functions" option as an object (dart-sass) (scss): warnings 2`] = `Array []`;
-
-exports[`loader should work with the "functions" option as an object (node-sass) (sass): errors 1`] = `Array []`;
-
-exports[`loader should work with the "functions" option as an object (node-sass) (sass): errors 2`] = `Array []`;
-
-exports[`loader should work with the "functions" option as an object (node-sass) (sass): warnings 1`] = `Array []`;
-
-exports[`loader should work with the "functions" option as an object (node-sass) (sass): warnings 2`] = `Array []`;
-
-exports[`loader should work with the "functions" option as an object (node-sass) (scss): errors 1`] = `Array []`;
-
-exports[`loader should work with the "functions" option as an object (node-sass) (scss): errors 2`] = `Array []`;
-
-exports[`loader should work with the "functions" option as an object (node-sass) (scss): warnings 1`] = `Array []`;
-
-exports[`loader should work with the "functions" option as an object (node-sass) (scss): warnings 2`] = `Array []`;
-
-exports[`loader should work with the "importer" option (dart-sass) (sass): errors 1`] = `Array []`;
-
-exports[`loader should work with the "importer" option (dart-sass) (sass): warnings 1`] = `Array []`;
-
-exports[`loader should work with the "importer" option (dart-sass) (scss): errors 1`] = `Array []`;
-
-exports[`loader should work with the "importer" option (dart-sass) (scss): warnings 1`] = `Array []`;
-
-exports[`loader should work with the "importer" option (node-sass) (sass): errors 1`] = `Array []`;
-
-exports[`loader should work with the "importer" option (node-sass) (sass): warnings 1`] = `Array []`;
-
-exports[`loader should work with the "importer" option (node-sass) (scss): errors 1`] = `Array []`;
-
-exports[`loader should work with the "importer" option (node-sass) (scss): warnings 1`] = `Array []`;
-
-exports[`loader should work with the "includePaths" option (dart-sass) (sass): errors 1`] = `Array []`;
-
-exports[`loader should work with the "includePaths" option (dart-sass) (sass): warnings 1`] = `Array []`;
-
-exports[`loader should work with the "includePaths" option (dart-sass) (scss): errors 1`] = `Array []`;
-
-exports[`loader should work with the "includePaths" option (dart-sass) (scss): warnings 1`] = `Array []`;
-
-exports[`loader should work with the "includePaths" option (node-sass) (sass): errors 1`] = `Array []`;
-
-exports[`loader should work with the "includePaths" option (node-sass) (sass): warnings 1`] = `Array []`;
-
-exports[`loader should work with the "includePaths" option (node-sass) (scss): errors 1`] = `Array []`;
-
-exports[`loader should work with the "includePaths" option (node-sass) (scss): warnings 1`] = `Array []`;

test/__snapshots__/sassOptions-option.test.js.snap

@@ -0,0 +1,81 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`sassOptions option should work when the option like "Function" (dart-sass) (sass): errors 1`] = `Array []`;
+
+exports[`sassOptions option should work when the option like "Function" (dart-sass) (sass): warnings 1`] = `Array []`;
+
+exports[`sassOptions option should work when the option like "Function" (dart-sass) (scss): errors 1`] = `Array []`;
+
+exports[`sassOptions option should work when the option like "Function" (dart-sass) (scss): warnings 1`] = `Array []`;
+
+exports[`sassOptions option should work when the option like "Function" (node-sass) (sass): errors 1`] = `Array []`;
+
+exports[`sassOptions option should work when the option like "Function" (node-sass) (sass): warnings 1`] = `Array []`;
+
+exports[`sassOptions option should work when the option like "Function" (node-sass) (scss): errors 1`] = `Array []`;
+
+exports[`sassOptions option should work when the option like "Function" (node-sass) (scss): warnings 1`] = `Array []`;
+
+exports[`sassOptions option should work when the option like "Object" (dart-sass) (sass): errors 1`] = `Array []`;
+
+exports[`sassOptions option should work when the option like "Object" (dart-sass) (sass): warnings 1`] = `Array []`;
+
+exports[`sassOptions option should work when the option like "Object" (dart-sass) (scss): errors 1`] = `Array []`;
+
+exports[`sassOptions option should work when the option like "Object" (dart-sass) (scss): warnings 1`] = `Array []`;
+
+exports[`sassOptions option should work when the option like "Object" (node-sass) (sass): errors 1`] = `Array []`;
+
+exports[`sassOptions option should work when the option like "Object" (node-sass) (sass): warnings 1`] = `Array []`;
+
+exports[`sassOptions option should work when the option like "Object" (node-sass) (scss): errors 1`] = `Array []`;
+
+exports[`sassOptions option should work when the option like "Object" (node-sass) (scss): warnings 1`] = `Array []`;
+
+exports[`sassOptions option should work with the "functions" option (dart-sass) (sass): errors 1`] = `Array []`;
+
+exports[`sassOptions option should work with the "functions" option (dart-sass) (sass): warnings 1`] = `Array []`;
+
+exports[`sassOptions option should work with the "functions" option (dart-sass) (scss): errors 1`] = `Array []`;
+
+exports[`sassOptions option should work with the "functions" option (dart-sass) (scss): warnings 1`] = `Array []`;
+
+exports[`sassOptions option should work with the "functions" option (node-sass) (sass): errors 1`] = `Array []`;
+
+exports[`sassOptions option should work with the "functions" option (node-sass) (sass): warnings 1`] = `Array []`;
+
+exports[`sassOptions option should work with the "functions" option (node-sass) (scss): errors 1`] = `Array []`;
+
+exports[`sassOptions option should work with the "functions" option (node-sass) (scss): warnings 1`] = `Array []`;
+
+exports[`sassOptions option should work with the "importer" option (dart-sass) (sass): errors 1`] = `Array []`;
+
+exports[`sassOptions option should work with the "importer" option (dart-sass) (sass): warnings 1`] = `Array []`;
+
+exports[`sassOptions option should work with the "importer" option (dart-sass) (scss): errors 1`] = `Array []`;
+
+exports[`sassOptions option should work with the "importer" option (dart-sass) (scss): warnings 1`] = `Array []`;
+
+exports[`sassOptions option should work with the "importer" option (node-sass) (sass): errors 1`] = `Array []`;
+
+exports[`sassOptions option should work with the "importer" option (node-sass) (sass): warnings 1`] = `Array []`;
+
+exports[`sassOptions option should work with the "importer" option (node-sass) (scss): errors 1`] = `Array []`;
+
+exports[`sassOptions option should work with the "importer" option (node-sass) (scss): warnings 1`] = `Array []`;
+
+exports[`sassOptions option should work with the "includePaths" option (dart-sass) (sass): errors 1`] = `Array []`;
+
+exports[`sassOptions option should work with the "includePaths" option (dart-sass) (sass): warnings 1`] = `Array []`;
+
+exports[`sassOptions option should work with the "includePaths" option (dart-sass) (scss): errors 1`] = `Array []`;
+
+exports[`sassOptions option should work with the "includePaths" option (dart-sass) (scss): warnings 1`] = `Array []`;
+
+exports[`sassOptions option should work with the "includePaths" option (node-sass) (sass): errors 1`] = `Array []`;
+
+exports[`sassOptions option should work with the "includePaths" option (node-sass) (sass): warnings 1`] = `Array []`;
+
+exports[`sassOptions option should work with the "includePaths" option (node-sass) (scss): errors 1`] = `Array []`;
+
+exports[`sassOptions option should work with the "includePaths" option (node-sass) (scss): warnings 1`] = `Array []`;