Skip to content

Commit

Permalink
refactor: move all sass options to the sassOptions option (#736)
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: move all sass (`includePaths`, `importer`, `functions`) options to the `sassOptions` option. The `functions` option can't be used as `Function`, you should use `sassOption` as `Function` to achieve this.
  • Loading branch information
@evilebottnawi
evilebottnawi committed Aug 20, 2019
1 parent 7df0107 commit 9c5028b
Show file tree
Hide file tree
Showing 7 changed files with 323 additions and 238 deletions.
129 changes: 89 additions & 40 deletions README.md
View file
Expand Up @@ -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.
Expand Down Expand Up @@ -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`
Expand Down
37 changes: 16 additions & 21 deletions src/getSassOptions.js
View file
Expand Up @@ -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)) {
Expand All @@ -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.
Expand All @@ -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.
Expand Down
80 changes: 0 additions & 80 deletions test/__snapshots__/loader.test.js.snap
View file
Expand Up @@ -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 []`;
81 changes: 81 additions & 0 deletions test/__snapshots__/sassOptions-option.test.js.snap
View file
@@ -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 []`;

0 comments on commit 9c5028b

Please sign in to comment.