Skip to content

Commit 96184e1

Browse files
feat: automatically use the fibers package if it is possible (#744)
1 parent ac14fd5 commit 96184e1

11 files changed

+554
-6
lines changed

README.md

Lines changed: 44 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,50 @@ module.exports = {
172172
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.
173173
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.
174174

175-
To enable this, pass the `Fiber` class to the `sassOptions.fiber` option:
175+
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).
176+
177+
**package.json**
178+
179+
```json
180+
{
181+
"devDependencies": {
182+
"sass-loader": "^7.2.0",
183+
"sass": "^1.22.10",
184+
"fibers": "^4.0.1"
185+
}
186+
}
187+
```
188+
189+
You can disable automatically inject the [`fibers`](https://github.com/laverdet/node-fibers) package pass the `false` value for the `sassOptions.fiber` option.
190+
191+
**webpack.config.js**
192+
193+
```js
194+
module.exports = {
195+
module: {
196+
rules: [
197+
{
198+
test: /\.s[ac]ss$/i,
199+
use: [
200+
'style-loader',
201+
'css-loader',
202+
{
203+
loader: 'sass-loader',
204+
options: {
205+
implementation: require('sass'),
206+
sassOptions: {
207+
fiber: false,
208+
},
209+
},
210+
},
211+
],
212+
},
213+
],
214+
},
215+
};
216+
```
217+
218+
Also you can pass own the `fiber` value using this code:
176219

177220
**webpack.config.js**
178221

src/getSassOptions.js

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,13 @@ function isProductionLikeMode(loaderContext) {
1616
/**
1717
* Derives the sass options from the loader context and normalizes its values with sane defaults.
1818
*
19-
* @param {LoaderContext} loaderContext
19+
* @param {object} loaderContext
2020
* @param {object} loaderOptions
2121
* @param {string} content
22+
* @param {object} implementation
2223
* @returns {Object}
2324
*/
24-
function getSassOptions(loaderContext, loaderOptions, content) {
25+
function getSassOptions(loaderContext, loaderOptions, content, implementation) {
2526
const options = cloneDeep(
2627
loaderOptions.sassOptions
2728
? typeof loaderOptions.sassOptions === 'function'
@@ -30,6 +31,33 @@ function getSassOptions(loaderContext, loaderOptions, content) {
3031
: {}
3132
);
3233

34+
const isDartSass = implementation.info.includes('dart-sass');
35+
36+
if (isDartSass) {
37+
const shouldTryToResolveFibers = !options.fiber && options.fiber !== false;
38+
39+
if (shouldTryToResolveFibers) {
40+
let fibers;
41+
42+
try {
43+
fibers = require.resolve('fibers');
44+
} catch (_error) {
45+
// Nothing
46+
}
47+
48+
if (fibers) {
49+
// eslint-disable-next-line global-require, import/no-dynamic-require
50+
options.fiber = require(fibers);
51+
}
52+
} else if (options.fiber === false) {
53+
// Don't pass the `fiber` option for `sass` (`Dart Sass`)
54+
delete options.fiber;
55+
}
56+
} else {
57+
// Don't pass the `fiber` option for `node-sass`
58+
delete options.fiber;
59+
}
60+
3361
options.data = loaderOptions.prependData
3462
? typeof loaderOptions.prependData === 'function'
3563
? loaderOptions.prependData(loaderContext) + os.EOL + content

src/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import SassError from './SassError';
1313
/**
1414
* The sass-loader makes node-sass and dart-sass available to webpack modules.
1515
*
16-
* @this {LoaderContext}
16+
* @this {object}
1717
* @param {string} content
1818
*/
1919
function loader(content) {
@@ -32,7 +32,7 @@ function loader(content) {
3232
this.addDependency(path.normalize(file));
3333
};
3434

35-
const sassOptions = getSassOptions(this, options, content);
35+
const sassOptions = getSassOptions(this, options, content, implementation);
3636

3737
const shouldUseWebpackImporter =
3838
typeof options.webpackImporter === 'boolean'

0 commit comments

Comments
 (0)