feat: automatically use the fibers package if it is possible (#744)

README.md

@@ -172,7 +172,50 @@ 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.
 
-To enable this, pass the `Fiber` class to the `sassOptions.fiber` option:
+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",
+    "fibers": "^4.0.1"
+  }
+}
+```
+
+You can disable automatically inject the [`fibers`](https://github.com/laverdet/node-fibers) package pass the `false` value for the `sassOptions.fiber` option.
+
+**webpack.config.js**
+
+```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,
+              },
+            },
+          },
+        ],
+      },
+    ],
+  },
+};
+```
+
+Also you can pass own the `fiber` value using this code:
 
 **webpack.config.js**
 

src/getSassOptions.js

@@ -16,12 +16,13 @@ function isProductionLikeMode(loaderContext) {
 /**
  * Derives the sass options from the loader context and normalizes its values with sane defaults.
  *
- * @param {LoaderContext} loaderContext
+ * @param {object} loaderContext
  * @param {object} loaderOptions
  * @param {string} content
+ * @param {object} implementation
  * @returns {Object}
  */
-function getSassOptions(loaderContext, loaderOptions, content) {
+function getSassOptions(loaderContext, loaderOptions, content, implementation) {
   const options = cloneDeep(
     loaderOptions.sassOptions
       ? typeof loaderOptions.sassOptions === 'function'
@@ -30,6 +31,33 @@ function getSassOptions(loaderContext, loaderOptions, content) {
       : {}
   );
 
+  const isDartSass = implementation.info.includes('dart-sass');
+
+  if (isDartSass) {
+    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;
+  }
+
   options.data = loaderOptions.prependData
     ? typeof loaderOptions.prependData === 'function'
       ? loaderOptions.prependData(loaderContext) + os.EOL + content

src/index.js

@@ -13,7 +13,7 @@ import SassError from './SassError';
 /**
  * The sass-loader makes node-sass and dart-sass available to webpack modules.
  *
- * @this {LoaderContext}
+ * @this {object}
  * @param {string} content
  */
 function loader(content) {
@@ -32,7 +32,7 @@ function loader(content) {
     this.addDependency(path.normalize(file));
   };
 
-  const sassOptions = getSassOptions(this, options, content);
+  const sassOptions = getSassOptions(this, options, content, implementation);
 
   const shouldUseWebpackImporter =
     typeof options.webpackImporter === 'boolean'