Next

.eslintrc.js

@@ -10,7 +10,6 @@ module.exports = {
         'test/helpers/testLoader.js',
       ],
       rules: {
-        // temporary disable for test before we migrate on jest
         strict: 'off',
       },
     },

README.md

@@ -107,19 +107,44 @@ 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)
+### `implementation`
 
-> ℹ️ 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.
+The special `implementation` option determines which implementation of Sass to use.
 
-There is a slight difference between the `node-sass` and `sass` options. We recommend look documentation before used them:
+By default the loader resolve the implementation based on your dependencies.
+Just add required implementation to `package.json` (`node-sass` or `sass` package) and install dependencies.
 
-- [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.
+Example where the `sass-loader` loader uses the `sass` (`dart-sass`) implementation:
 
-**webpack.config.js**
+**package.json**
+
+```json
+{
+  "devDependencies": {
+    "sass-loader": "^7.2.0",
+    "sass": "^1.22.10"
+  }
+}
+```
+
+Example where the `sass-loader` loader uses the `node-sass` implementation:
+
+**package.json**
+
+```json
+{
+  "devDependencies": {
+    "sass-loader": "^7.2.0",
+    "node-sass": "^4.0.0"
+  }
+}
+```
+
+Beware the situation when `node-sass` and `sass` was installed, by default the `sass-loader` prefers `node-sass`, to avoid this situation use the `implementation` option.
+
+It takes either `node-sass` or `sass` (`Dart Sass`) module.
+
+For example, to use Dart Sass, you'd pass:
 
 ```js
 module.exports = {
@@ -133,8 +158,8 @@ module.exports = {
           {
             loader: 'sass-loader',
             options: {
-              indentWidth: 4,
-              includePaths: ['absolute/path/a', 'absolute/path/b'],
+              // Prefer `dart-sass`
+              implementation: require('sass'),
             },
           },
         ],
@@ -144,44 +169,55 @@ module.exports = {
 };
 ```
 
-### `implementation`
-
-The special `implementation` option determines which implementation of Sass to use.
-
-By default the loader resolve the implementation based on your dependencies.
-Just add required implementation to `package.json` (`node-sass` or `sass` package) and install dependencies.
+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.
 
-Example where the `sass-loader` loader uses the `sass` (`dart-sass`) implementation:
+We automatically inject the [`fibers`](https://github.com/laverdet/node-fibers) package (setup `sassOptions.fiber`) if is possible (i.e. you need install the [`fibers`](https://github.com/laverdet/node-fibers) package).
 
 **package.json**
 
 ```json
 {
   "devDependencies": {
     "sass-loader": "^7.2.0",
-    "sass": "^1.22.10"
+    "sass": "^1.22.10",
+    "fibers": "^4.0.1"
   }
 }
 ```
 
-Example where the `sass-loader` loader uses the `node-sass` implementation:
+You can disable automatically inject the [`fibers`](https://github.com/laverdet/node-fibers) package pass the `false` value for the `sassOptions.fiber` option.
 
-**package.json**
+**webpack.config.js**
 
-```json
-{
-  "devDependencies": {
-    "sass-loader": "^7.2.0",
-    "node-sass": "^4.0.0"
-  }
-}
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.s[ac]ss$/i,
+        use: [
+          'style-loader',
+          'css-loader',
+          {
+            loader: 'sass-loader',
+            options: {
+              implementation: require('sass'),
+              sassOptions: {
+                fiber: false,
+              },
+            },
+          },
+        ],
+      },
+    ],
+  },
+};
 ```
 
-Beware the situation when `node-sass` and `sass` was installed, by default the `sass-loader` prefers `node-sass`, to avoid this situation use the `implementation` option.
+Also you can pass own the `fiber` value using this code:
 
-It takes either `node-sass` or `sass` (`Dart Sass`) module.
-
-For example, to use Dart Sass, you'd pass:
+**webpack.config.js**
 
 ```js
 module.exports = {
@@ -195,8 +231,10 @@ module.exports = {
           {
             loader: 'sass-loader',
             options: {
-              // Prefer `dart-sass`
               implementation: require('sass'),
+              sassOptions: {
+                fiber: require('fibers'),
+              },
             },
           },
         ],
@@ -206,10 +244,27 @@ module.exports = {
 };
 ```
 
-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.
+### `sassOptions`
+
+Type: `Object|Function`
+
+Options for [Node Sass](https://github.com/sass/node-sass) or [Dart Sass](http://sass-lang.com/dart-sass) implementation.
+
+> ℹ️ 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`
 
-To enable this, pass the `Fiber` class to the `fiber` option:
+Setups option as object for sass implementation.
 
 **webpack.config.js**
 
@@ -225,8 +280,10 @@ module.exports = {
           {
             loader: 'sass-loader',
             options: {
-              implementation: require('sass'),
-              fiber: require('fibers'),
+              sassOptions: {
+                indentWidth: 4,
+                includePaths: ['absolute/path/a', 'absolute/path/b'],
+              },
             },
           },
         ],
@@ -236,7 +293,47 @@ module.exports = {
 };
 ```
 
-### `data`
+#### `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`
 Default: `undefined`
@@ -262,7 +359,7 @@ module.exports = {
           {
             loader: 'sass-loader',
             options: {
-              data: '$env: ' + process.env.NODE_ENV + ';',
+              prependData: '$env: ' + process.env.NODE_ENV + ';',
             },
           },
         ],
@@ -286,8 +383,8 @@ module.exports = {
           {
             loader: 'sass-loader',
             options: {
-              data: (loaderContext) => {
-                // More information about avalaible options https://webpack.js.org/api/loaders/
+              prependData: (loaderContext) => {
+                // More information about available properties https://webpack.js.org/api/loaders/
                 const { resourcePath, rootContext } = loaderContext;
                 const relativePath = path.relative(rootContext, resourcePath);
 
@@ -309,11 +406,11 @@ module.exports = {
 ### `sourceMap`
 
 Type: `Boolean`
-Default: `false`
+Default: depends on the `compiler.devtool` value
 
 Enables/Disables generation of source maps.
 
-They are not enabled by default because they expose a runtime overhead and increase in bundle size (JS source maps do not).
+By default generation of source maps depends on the [`devtool`](https://webpack.js.org/configuration/devtool/) option, all values enable source map generation except `eval` and `false` value.
 
 **webpack.config.js**
 
@@ -351,7 +448,7 @@ module.exports = {
 Type: `Boolean`
 Default: `true`
 
-Allows to disable default `webpack` importer.
+Enables/Disables default `webpack` importer.
 
 This can improve performance in some cases. Use it with caution because aliases and `@import` at-rules starts with `~` will not work, but you can pass own `importer` to solve this (see [`importer docs`](https://github.com/sass/node-sass#importer--v200---experimental)).
 
@@ -424,6 +521,8 @@ module.exports = {
 
 ### Source maps
 
+Enables/Disables generation of source maps.
+
 To enable CSS source maps, you'll need to pass the `sourceMap` option to the sass-loader _and_ the css-loader.
 
 **webpack.config.js**

azure-pipelines.yml

@@ -36,7 +36,7 @@ jobs:
     pool:
       vmImage: ubuntu-16.04
     strategy:
-      maxParallel: 5
+      maxParallel: 4
       matrix:
         node-12:
           node_version: ^12.0.0
@@ -47,9 +47,6 @@ jobs:
         node-8:
           node_version: ^8.9.0
           webpack_version: latest
-        node-6:
-          node_version: ^6.9.0
-          webpack_version: latest
         node-8-canary:
           node_version: ^8.9.0
           webpack_version: next
@@ -91,7 +88,7 @@ jobs:
     pool:
       vmImage: macOS-10.14
     strategy:
-      maxParallel: 5
+      maxParallel: 4
       matrix:
         node-12:
           node_version: ^12.0.0
@@ -102,9 +99,6 @@ jobs:
         node-8:
           node_version: ^8.9.0
           webpack_version: latest
-        node-6:
-          node_version: ^6.9.0
-          webpack_version: latest
         node-8-canary:
           node_version: ^8.9.0
           webpack_version: next
@@ -146,7 +140,7 @@ jobs:
     pool:
       vmImage: windows-2019
     strategy:
-      maxParallel: 5
+      maxParallel: 4
       matrix:
         node-12:
           node_version: ^12.0.0
@@ -157,9 +151,6 @@ jobs:
         node-8:
           node_version: ^8.9.0
           webpack_version: latest
-        node-6:
-          node_version: ^6.9.0
-          webpack_version: latest
         node-8-canary:
           node_version: ^8.9.0
           webpack_version: next

babel.config.js

@@ -10,7 +10,7 @@ module.exports = (api) => {
         '@babel/preset-env',
         {
           targets: {
-            node: '6.9.0',
+            node: '8.9.0',
           },
         },
       ],

jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  testEnvironment: 'node',
+};