Skip to content

Commit

Permalink
refactor!: remove fibers support
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexander-akait
alexander-akait committed Jan 15, 2024
1 parent 8f1514f commit b4d28bb
Show file tree
Hide file tree
Showing 15 changed files with 174 additions and 616 deletions.
81 changes: 1 addition & 80 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -249,85 +249,6 @@ 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.

We automatically inject the [`fibers`](https://github.com/laverdet/node-fibers) package (setup `sassOptions.fiber`) for `Node.js` less v16.0.0 if is possible (i.e. you need install the [`fibers`](https://github.com/laverdet/node-fibers) package).

> **Warning**
>
> Fibers is not compatible with `Node.js` v16.0.0 or later. Unfortunately, v8 commit [dacc2fee0f](https://github.com/v8/v8/commit/dacc2fee0f815823782a7e432c79c2a7767a4765) is a breaking change and workarounds are non-trivial. ([see introduction to readme](https://github.com/laverdet/node-fibers)).
**package.json**

```json
{
"devDependencies": {
"sass-loader": "^7.2.0",
"sass": "^1.22.10",
"fibers": "^4.0.1"
}
}
```

You can disable automatically injecting the [`fibers`](https://github.com/laverdet/node-fibers) package by passing a `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,
},
},
},
],
},
],
},
};
```

You can also pass the `fiber` value using this code:

**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: require("fibers"),
},
},
},
],
},
],
},
};
```

### `sassOptions`

Type:
Expand All @@ -338,7 +259,7 @@ type sassOptions =
| ((
content: string | Buffer,
loaderContext: LoaderContext,
meta: any
meta: any,
) => import("sass").LegacyOptions<"async">);
```

Expand Down
12 changes: 6 additions & 6 deletions src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ async function loader(content) {
options,
content,
implementation,
useSourceMap
useSourceMap,
);
const shouldUseWebpackImporter =
typeof options.webpackImporter === "boolean"
Expand All @@ -53,11 +53,11 @@ async function loader(content) {
const { includePaths } = sassOptions;

sassOptions.importer.push(
getWebpackImporter(this, implementation, includePaths)
getWebpackImporter(this, implementation, includePaths),
);
} else {
sassOptions.importers.push(
getModernWebpackImporter(this, implementation)
getModernWebpackImporter(this, implementation),
);
}
}
Expand Down Expand Up @@ -97,8 +97,8 @@ async function loader(content) {
result.sourceMap
? result.sourceMap
: result.map
? JSON.parse(result.map)
: null;
? JSON.parse(result.map)
: null;

// Modify source paths only for webpack, otherwise we do nothing
if (map && useSourceMap) {
Expand All @@ -108,7 +108,7 @@ async function loader(content) {
// Modern API
if (typeof result.loadedUrls !== "undefined") {
result.loadedUrls
.filter((url) => url.protocol === "file:")
.filter((loadedUrl) => loadedUrl.protocol === "file:")
.forEach((includedFile) => {
const normalizedIncludedFile = url.fileURLToPath(includedFile);

Expand Down
80 changes: 23 additions & 57 deletions src/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,16 +82,10 @@ function proxyCustomImporters(importers, loaderContext) {
const self = { ...this, webpackLoaderContext: loaderContext };

return importer.apply(self, args);
}
},
);
}

function isSupportedFibers() {
const [nodeVersion] = process.versions.node.split(".");

return Number(nodeVersion) < 16;
}

/**
* Derives the sass options from the loader context and normalizes its values with sane defaults.
*
Expand All @@ -107,7 +101,7 @@ async function getSassOptions(
loaderOptions,
content,
implementation,
useSourceMap
useSourceMap,
) {
const options = loaderOptions.sassOptions
? typeof loaderOptions.sassOptions === "function"
Expand Down Expand Up @@ -216,34 +210,6 @@ async function getSassOptions(
} else {
sassOptions.file = resourcePath;

const isDartSass = implementation.info.includes("dart-sass");

if (isDartSass && isSupportedFibers()) {
const shouldTryToResolveFibers =
!sassOptions.fiber && sassOptions.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
sassOptions.fiber = require(fibers);
}
} else if (sassOptions.fiber === false) {
// Don't pass the `fiber` option for `sass` (`Dart Sass`)
delete sassOptions.fiber;
}
} else {
// Don't pass the `fiber` option for `node-sass`
delete sassOptions.fiber;
}

// opt.outputStyle
if (!sassOptions.outputStyle && isProductionLikeMode(loaderContext)) {
sassOptions.outputStyle = "compressed";
Expand All @@ -259,7 +225,7 @@ async function getSassOptions(
sassOptions.sourceMap = true;
sassOptions.outFile = path.join(
loaderContext.rootContext,
"style.css.map"
"style.css.map",
);
sassOptions.sourceMapContents = true;
sassOptions.omitSourceMapUrl = true;
Expand All @@ -285,7 +251,7 @@ async function getSassOptions(
Array.isArray(sassOptions.importer)
? sassOptions.importer.slice()
: [sassOptions.importer],
loaderContext
loaderContext,
)
: [];

Expand All @@ -294,6 +260,7 @@ async function getSassOptions(
loaderOptions.webpackImporter === false &&
sassOptions.importer.length === 0
) {
// eslint-disable-next-line no-undefined
sassOptions.importer = undefined;
}

Expand All @@ -305,15 +272,15 @@ async function getSassOptions(
(includePath) =>
path.isAbsolute(includePath)
? includePath
: path.join(process.cwd(), includePath)
)
: path.join(process.cwd(), includePath),
),
)
.concat(
process.env.SASS_PATH
? process.env.SASS_PATH.split(
process.platform === "win32" ? ";" : ":"
process.platform === "win32" ? ";" : ":",
)
: []
: [],
);

if (typeof sassOptions.charset === "undefined") {
Expand Down Expand Up @@ -354,7 +321,7 @@ function getPossibleRequests(
// eslint-disable-next-line no-shadow
url,
forWebpackResolver = false,
fromImport = false
fromImport = false,
) {
let request = url;

Expand Down Expand Up @@ -401,13 +368,13 @@ function getPossibleRequests(
`${normalizedDirname}_${basenameWithoutExtension}.import${extension}`,
`${normalizedDirname}${basenameWithoutExtension}.import${extension}`,
]
: []
: [],
)
.concat([
`${normalizedDirname}_${basename}`,
`${normalizedDirname}${basename}`,
])
.concat(forWebpackResolver ? [url] : [])
.concat(forWebpackResolver ? [url] : []),
),
];
}
Expand Down Expand Up @@ -480,7 +447,7 @@ const IS_NATIVE_WIN32_PATH = /^[a-z]:[/\\]|^\\\\/i;
function getWebpackResolver(
resolverFactory,
implementation,
includePaths = []
includePaths = [],
) {
const isDartSass =
implementation && implementation.info.includes("dart-sass");
Expand All @@ -505,7 +472,7 @@ function getWebpackResolver(
modules: [],
restrictions: [/\.((sa|sc|c)ss)$/i],
preferRelative: true,
})
}),
);
const sassImportResolve = promiseResolve(
resolverFactory({
Expand All @@ -520,7 +487,7 @@ function getWebpackResolver(
modules: [],
restrictions: [/\.((sa|sc|c)ss)$/i],
preferRelative: true,
})
}),
);
const webpackModuleResolve = promiseResolve(
resolverFactory({
Expand All @@ -531,7 +498,7 @@ function getWebpackResolver(
extensions: [".sass", ".scss", ".css"],
restrictions: [/\.((sa|sc|c)ss)$/i],
preferRelative: true,
})
}),
);
const webpackImportResolve = promiseResolve(
resolverFactory({
Expand All @@ -542,7 +509,7 @@ function getWebpackResolver(
extensions: [".sass", ".scss", ".css"],
restrictions: [/\.((sa|sc|c)ss)$/i],
preferRelative: true,
})
}),
);

return (context, request, fromImport) => {
Expand Down Expand Up @@ -592,7 +559,7 @@ function getWebpackResolver(
const sassPossibleRequests = getPossibleRequests(
request,
false,
fromImport
fromImport,
);

// `node-sass` calls our importer before `1. Filesystem imports relative to the base file.`, so we need emulate this too
Expand All @@ -612,14 +579,14 @@ function getWebpackResolver(
context,
possibleRequests: sassPossibleRequests,
};
})
}),
);
}

const webpackPossibleRequests = getPossibleRequests(
request,
true,
fromImport
fromImport,
);

resolutionMap = resolutionMap.concat({
Expand Down Expand Up @@ -649,7 +616,7 @@ function getWebpackImporter(loaderContext, implementation, includePaths) {
const resolve = getWebpackResolver(
loaderContext.getResolve,
implementation,
includePaths
includePaths,
);

return function importer(originalUrl, prev, done) {
Expand Down Expand Up @@ -724,7 +691,7 @@ function getCompileFn(implementation, options) {

nodeSassJobQueue = async.queue(
implementation.render.bind(implementation),
threadPoolSize - 1
threadPoolSize - 1,
);
}

Expand All @@ -740,7 +707,7 @@ function getCompileFn(implementation, options) {
}

resolve(result);
}
},
);
});
}
Expand Down Expand Up @@ -825,6 +792,5 @@ export {
getWebpackImporter,
getCompileFn,
normalizeSourceMap,
isSupportedFibers,
errorFactory,
};
Loading

0 comments on commit b4d28bb

Please sign in to comment.