sass-loader 8.0.1 → 9.0.2

package/CHANGELOG.md

@@ -2,6 +2,52 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [9.0.2](https://github.com/webpack-contrib/sass-loader/compare/v9.0.1...v9.0.2) (2020-07-07)
+
+
+### Bug Fixes
+
+* resolution algorithm for `node-sass` ([#866](https://github.com/webpack-contrib/sass-loader/issues/866)) ([4584c90](https://github.com/webpack-contrib/sass-loader/commit/4584c9054befbc56661e2781a55df96fb9f94673))
+
+### [9.0.1](https://github.com/webpack-contrib/sass-loader/compare/v9.0.0...v9.0.1) (2020-07-03)
+
+
+### Bug Fixes
+
+* do not crash on errors ([#860](https://github.com/webpack-contrib/sass-loader/issues/860)) ([e854933](https://github.com/webpack-contrib/sass-loader/commit/e8549330f8d9373ff8baccffbfd3e0c3b6f3ef61))
+
+## [9.0.0](https://github.com/webpack-contrib/sass-loader/compare/v8.0.2...v9.0.0) (2020-07-02)
+
+
+### ⚠ BREAKING CHANGES
+
+* minimum supported Nodejs version is `10.13`
+* prefer `sass` (`dart-sass`) by default, it is strongly recommended to migrate on `sass` (`dart-sass`)
+* the `prependData` option was removed in favor the `additionalData` option, see [docs](https://github.com/webpack-contrib/sass-loader#additionaldata)
+* when the `sourceMap` is `true`, `sassOptions.sourceMap`, `sassOptions.sourceMapContents`, `sassOptions.sourceMapEmbed`, `sassOptions.sourceMapRoot` and `sassOptions.omitSourceMapUrl` will be ignored.
+
+### Features
+
+* pass the loader context to custom importers under the `this.webpackLoaderContext` property ([#853](https://github.com/webpack-contrib/sass-loader/issues/853)) ([d487683](https://github.com/webpack-contrib/sass-loader/commit/d487683221fcd1e5a173e083b4b40644751c8cb1))
+* supports for `process.cwd()` resolution logic by default ([#837](https://github.com/webpack-contrib/sass-loader/issues/837)) ([0c8d3b3](https://github.com/webpack-contrib/sass-loader/commit/0c8d3b3fb1cf371779b4a886cfc4e60facf68759))
+* supports for `SASS-PATH` env variable resolution logic by default ([#836](https://github.com/webpack-contrib/sass-loader/issues/836)) ([8376179](https://github.com/webpack-contrib/sass-loader/commit/83761798380dcccc5a2badde3b3affe2bac385e8))
+* supports for the `sass` property for the `exports` field from `package.json` (conditional exports, for more information read [docs](https://nodejs.org/api/esm.html))
+
+### Bug Fixes
+
+* avoid different content on different os ([#832](https://github.com/webpack-contrib/sass-loader/issues/832)) ([68dd278](https://github.com/webpack-contrib/sass-loader/commit/68dd27883ce0536adc5bc170816242c67fb118ff))
+* resolution logic when the `includePaths` option used was improved ([#827](https://github.com/webpack-contrib/sass-loader/issues/827)) ([cbe5ad4](https://github.com/webpack-contrib/sass-loader/commit/cbe5ad407582a617be097d3eadd3ad8619e52507))
+* resolution logic for `file://` scheme was improved ([17832fd](https://github.com/webpack-contrib/sass-loader/commit/17832fdb11f91593f4e2995003d67aebefb3be90))
+* resolution logic for absolute paths and server relative URLs was improved
+* source maps generation was improved
+
+### [8.0.2](https://github.com/webpack-contrib/sass-loader/compare/v8.0.1...v8.0.2) (2020-01-13)
+
+
+### Bug Fixes
+
+* compatibility with node@8 ([#798](https://github.com/webpack-contrib/sass-loader/issues/798)) ([6f3852f](https://github.com/webpack-contrib/sass-loader/commit/6f3852f7d393dd0bc8f8d264d81ecc941bc72511))
+
 ### [8.0.1](https://github.com/webpack-contrib/sass-loader/compare/v8.0.0...v8.0.1) (2020-01-10)
 
 

package/README.md

@@ -24,12 +24,17 @@ Loads a Sass/SCSS file and compiles it to CSS.
 To begin, you'll need to install `sass-loader`:
 
 ```console
-npm install sass-loader node-sass webpack --save-dev
+npm install sass-loader sass webpack --save-dev
 ```
 
-`sass-loader` requires you to install either [Node Sass](https://github.com/sass/node-sass) or [Dart Sass](https://github.com/sass/dart-sass) on your own (more documentation can be found below).
+`sass-loader` requires you to install either [Dart Sass](https://github.com/sass/dart-sass) or [Node Sass](https://github.com/sass/node-sass) on your own (more documentation can be found below).
+
 This allows you to control the versions of all your dependencies, and to choose which Sass implementation to use.
 
+> ℹ️ We recommend using [Dart Sass](https://github.com/sass/dart-sass).
+
+> ⚠ [Node Sass](https://github.com/sass/node-sass) does not work with [Yarn PnP](https://classic.yarnpkg.com/en/docs/pnp/) feature.
+
 Chain the `sass-loader` with the [css-loader](https://github.com/webpack-contrib/css-loader) and the [style-loader](https://github.com/webpack-contrib/style-loader) to immediately apply all styles to the DOM or the [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) to extract it into a separate file.
 
 Then add the loader to your Webpack configuration. For example:
@@ -104,12 +109,23 @@ Thankfully there are a two solutions to this problem:
 
 ## Options
 
+|                   Name                    |         Type         |                 Default                 | Description                                                       |
+| :---------------------------------------: | :------------------: | :-------------------------------------: | :---------------------------------------------------------------- |
+|  **[`implementation`](#implementation)**  |      `{Object}`      |                 `sass`                  | Setup Sass implementation to use.                                 |
+|     **[`sassOptions`](#sassoptions)**     | `{Object\|Function}` | defaults values for Sass implementation | Options for Sass.                                                 |
+|       **[`sourceMap`](#sourcemap)**       |     `{Boolean}`      |           `compiler.devtool`            | Enables/Disables generation of source maps.                       |
+|  **[`additionalData`](#additionaldata)**  | `{String\|Function}` |               `undefined`               | Prepends/Appends `Sass`/`SCSS` code before the actual entry file. |
+| **[`webpackImporter`](#webpackimporter)** |     `{Boolean}`      |                 `true`                  | Enables/Disables the default Webpack importer.                    |
+
 ### `implementation`
 
+Type: `Object`
+Default: `sass`
+
 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.
+Just add required implementation to `package.json` (`sass` or `node-sass` package) and install dependencies.
 
 Example where the `sass-loader` loader uses the `sass` (`dart-sass`) implementation:
 
@@ -137,9 +153,10 @@ Example where the `sass-loader` loader uses the `node-sass` implementation:
 }
 ```
 
-Beware the situation when `node-sass` and `sass` were installed! By default the `sass-loader` prefers `node-sass`. In order to avoid this situation you can use the `implementation` option.
+Beware the situation when `node-sass` and `sass` were installed! By default the `sass-loader` prefers `sass`.
+In order to avoid this situation you can use the `implementation` option.
 
-The `implementation` options either accepts `node-sass` or `sass` (`Dart Sass`) as a module.
+The `implementation` options either accepts `sass` (`Dart Sass`) or `node-sass` as a module.
 
 For example, to use Dart Sass, you'd pass:
 
@@ -244,20 +261,24 @@ module.exports = {
 ### `sassOptions`
 
 Type: `Object|Function`
+Default: defaults values for Sass implementation
 
-Options for [Node Sass](https://github.com/sass/node-sass) or [Dart Sass](http://sass-lang.com/dart-sass) implementation.
+Options for [Dart Sass](http://sass-lang.com/dart-sass) or [Node Sass](https://github.com/sass/node-sass) implementation.
 
 > ℹ️ The `indentedSyntax` option has `true` value for the `sass` extension.
 
-> ℹ️ Options such as `file` and `outFile` are unavailable.
+> ℹ️ Options such as `data` and `file` are unavailable and will be ignored.
 
-> ℹ We recommend not to use the `sourceMapContents`, `sourceMapEmbed`, `sourceMapRoot` options because `sass-loader` automatically sets these options.
+> ℹ We recommend not to set the `outFile`, `sourceMapContents`, `sourceMapEmbed`, `sourceMapRoot` options because `sass-loader` automatically sets these options when the `sourceMap` option is `true`.
+
+> ℹ️ Access to the [loader context](https://webpack.js.org/api/loaders/#the-loader-context) inside the custom importer can be done using the `this.webpackLoaderContext` property.
+
+There is a slight difference between the `sass` (`dart-sass`) and `node-sass` options.
 
-There is a slight difference between the `node-sass` and `sass` (`Dart Sass`) options.
 Please consult documentation before using them:
 
-- [Node Sass documentation](https://github.com/sass/node-sass/#options) for all available `node-sass` options.
 - [Dart Sass documentation](https://github.com/sass/dart-sass#javascript-api) for all available `sass` options.
+- [Node Sass documentation](https://github.com/sass/node-sass/#options) for all available `node-sass` options.
 
 #### `Object`
 
@@ -330,19 +351,19 @@ module.exports = {
 };
 ```
 
-### `prependData`
+### `sourceMap`
 
-Type: `String|Function`
-Default: `undefined`
+Type: `Boolean`
+Default: depends on the `compiler.devtool` value
 
-Prepends `Sass`/`SCSS` code before the actual entry file.
-In this case, the `sass-loader` will not override the `data` option but just append the entry's content.
+Enables/Disables generation of source maps.
 
-This is especially useful when some of your Sass variables depend on the environment:
+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.
 
-> ℹ Since you're injecting code, this will break the source mappings in your entry file. Often there's a simpler solution than this, like multiple Sass entry files.
+> ℹ If a `true` the `sourceMap`, `sourceMapRoot`, `sourceMapEmbed`, `sourceMapContents` and `omitSourceMapUrl` from `sassOptions` will be ignored.
 
-#### `String`
+**webpack.config.js**
 
 ```js
 module.exports = {
@@ -352,11 +373,16 @@ module.exports = {
         test: /\.s[ac]ss$/i,
         use: [
           'style-loader',
-          'css-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              sourceMap: true,
+            },
+          },
           {
             loader: 'sass-loader',
             options: {
-              prependData: '$env: ' + process.env.NODE_ENV + ';',
+              sourceMap: true,
             },
           },
         ],
@@ -366,7 +392,11 @@ module.exports = {
 };
 ```
 
-#### `Function`
+> ℹ In some rare cases `node-sass` can output invalid source maps (it is a `node-sass` bug).
+
+> > In order to avoid this, you can try to update `node-sass` to latest version or you can try to set within `sassOptions` the `outputStyle` option to `compressed`.
+
+**webpack.config.js**
 
 ```js
 module.exports = {
@@ -380,16 +410,9 @@ module.exports = {
           {
             loader: 'sass-loader',
             options: {
-              prependData: (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 '$value: 100px;';
-                }
-
-                return '$value: 200px;';
+              sourceMap: true,
+              sassOptions: {
+                outputStyle: 'compressed',
               },
             },
           },
@@ -400,16 +423,17 @@ module.exports = {
 };
 ```
 
-### `sourceMap`
+### `additionalData`
 
-Type: `Boolean`
-Default: depends on the `compiler.devtool` value
+Type: `String|Function`
+Default: `undefined`
 
-Enables/Disables generation of source maps.
+Prepends `Sass`/`SCSS` code before the actual entry file.
+In this case, the `sass-loader` will not override the `data` option but just **prepend** the entry's content.
 
-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.
+This is especially useful when some of your Sass variables depend on the environment:
 
-**webpack.config.js**
+#### `String`
 
 ```js
 module.exports = {
@@ -419,16 +443,11 @@ module.exports = {
         test: /\.s[ac]ss$/i,
         use: [
           'style-loader',
-          {
-            loader: 'css-loader',
-            options: {
-              sourceMap: true,
-            },
-          },
+          'css-loader',
           {
             loader: 'sass-loader',
             options: {
-              sourceMap: true,
+              additionalData: '$env: ' + process.env.NODE_ENV + ';',
             },
           },
         ],
@@ -438,10 +457,7 @@ module.exports = {
 };
 ```
 
-> ℹ In some rare cases `node-sass` can output invalid source maps (it is a `node-sass` bug).
-> In order to avoid this, you can try to update `node-sass` to latest version or you can try to set within `sassOptions` the `outputStyle` option to `compressed`.
-
-**webpack.config.js**
+#### `Function`
 
 ```js
 module.exports = {
@@ -454,9 +470,18 @@ module.exports = {
           'css-loader',
           {
             loader: 'sass-loader',
-            sourceMap: true,
-            sassOptions: {
-              outputStyle: 'compressed',
+            options: {
+              additionalData: (content, 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 '$value: 100px;' + content;
+                }
+
+                return '$value: 200px;' + content;
+              },
             },
           },
         ],
@@ -473,7 +498,8 @@ Default: `true`
 
 Enables/Disables the default Webpack importer.
 
-This can improve performance in some cases. Use it with caution because aliases and `@import` at-rules starting with `~` will not work. You can pass own `importer` to solve this (see [`importer docs`](https://github.com/sass/node-sass#importer--v200---experimental)).
+This can improve performance in some cases. Use it with caution because aliases and `@import` at-rules starting with `~` will not work.
+You can pass own `importer` to solve this (see [`importer docs`](https://github.com/sass/node-sass#importer--v200---experimental)).
 
 **webpack.config.js**
 
@@ -556,7 +582,7 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.scss$/,
+        test: /\.s[ac]ss$/i,
         use: [
           'style-loader',
           {
@@ -596,11 +622,11 @@ Please take a moment to read our contributing guidelines if you haven't yet done
 [node-url]: https://nodejs.org
 [deps]: https://david-dm.org/webpack-contrib/sass-loader.svg
 [deps-url]: https://david-dm.org/webpack-contrib/sass-loader
-[tests]: https://dev.azure.com/webpack-contrib/sass-loader/_apis/build/status/webpack-contrib.sass-loader?branchName=master
-[tests-url]: https://dev.azure.com/webpack-contrib/sass-loader/_build/latest?definitionId=21&branchName=master
+[tests]: https://github.com/webpack-contrib/sass-loader/workflows/sass-loader/badge.svg
+[tests-url]: https://github.com/webpack-contrib/sass-loader/actions
 [cover]: https://codecov.io/gh/webpack-contrib/sass-loader/branch/master/graph/badge.svg
 [cover-url]: https://codecov.io/gh/webpack-contrib/sass-loader
 [chat]: https://badges.gitter.im/webpack/webpack.svg
 [chat-url]: https://gitter.im/webpack/webpack
-[size]: https://packagephobia.now.sh/badge?p=css-loader
-[size-url]: https://packagephobia.now.sh/result?p=css-loader
+[size]: https://packagephobia.now.sh/badge?p=sass-loader
+[size-url]: https://packagephobia.now.sh/result?p=sass-loader

package/dist/SassError.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 
 class SassError extends Error {
-  constructor(sassError, resourcePath) {
+  constructor(sassError) {
     super();
     this.name = 'SassError';
     this.originalSassError = sassError;
@@ -18,9 +18,8 @@ class SassError extends Error {
     this.message = `${this.name}: ${this.originalSassError.message}`;
 
     if (this.originalSassError.formatted) {
-      this.message = `${this.name}: ${this.originalSassError.formatted.replace(/^Error: /, '').replace(/(\s*)stdin(\s*)/, `$1${resourcePath}$2`)}`; // Instruct webpack to hide the JS stack from the console.
+      this.message = `${this.name}: ${this.originalSassError.formatted.replace(/^Error: /, '')}`; // Instruct webpack to hide the JS stack from the console.
       // Usually you're only interested in the SASS stack in this case.
-      // eslint-disable-next-line no-param-reassign
 
       this.hideStack = true;
       Error.captureStackTrace(this, this.constructor);

package/dist/index.js

@@ -13,13 +13,7 @@ var _loaderUtils = require("loader-utils");
 
 var _options = _interopRequireDefault(require("./options.json"));
 
-var _getSassImplementation = _interopRequireDefault(require("./getSassImplementation"));
-
-var _getSassOptions = _interopRequireDefault(require("./getSassOptions"));
-
-var _webpackImporter = _interopRequireDefault(require("./webpackImporter"));
-
-var _getRenderFunctionFromSassImplementation = _interopRequireDefault(require("./getRenderFunctionFromSassImplementation"));
+var _utils = require("./utils");
 
 var _SassError = _interopRequireDefault(require("./SassError"));
 
@@ -32,80 +26,55 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * @param {string} content
  */
 function loader(content) {
-  const options = (0, _loaderUtils.getOptions)(this) || {};
+  const options = (0, _loaderUtils.getOptions)(this);
   (0, _schemaUtils.default)(_options.default, options, {
     name: 'Sass Loader',
     baseDataPath: 'options'
   });
-  const implementation = (0, _getSassImplementation.default)(options.implementation);
-  const callback = this.async();
-
-  const addNormalizedDependency = file => {
-    // node-sass returns POSIX paths
-    this.addDependency(_path.default.normalize(file));
-  };
-
-  const sassOptions = (0, _getSassOptions.default)(this, options, content, implementation);
+  const implementation = (0, _utils.getSassImplementation)(options.implementation);
+  const sassOptions = (0, _utils.getSassOptions)(this, options, content, implementation);
   const shouldUseWebpackImporter = typeof options.webpackImporter === 'boolean' ? options.webpackImporter : true;
 
   if (shouldUseWebpackImporter) {
-    const resolve = this.getResolve({
-      mainFields: ['sass', 'style', 'main', '...'],
-      mainFiles: ['_index', 'index', '...'],
-      extensions: ['.scss', '.sass', '.css', '...']
-    });
-    sassOptions.importer.push((0, _webpackImporter.default)(this.resourcePath, resolve, addNormalizedDependency));
-  } // Skip empty files, otherwise it will stop webpack, see issue #21
-
-
-  if (sassOptions.data.trim() === '') {
-    callback(null, '');
-    return;
+    const {
+      includePaths
+    } = sassOptions;
+    sassOptions.importer.push((0, _utils.getWebpackImporter)(this, implementation, includePaths));
   }
 
-  const render = (0, _getRenderFunctionFromSassImplementation.default)(implementation);
+  const callback = this.async();
+  const render = (0, _utils.getRenderFunctionFromSassImplementation)(implementation);
   render(sassOptions, (error, result) => {
     if (error) {
+      // There are situations when the `file` property do not exist
       if (error.file) {
-        addNormalizedDependency(error.file);
+        // `node-sass` returns POSIX paths
+        this.addDependency(_path.default.normalize(error.file));
       }
 
-      callback(new _SassError.default(error, this.resourcePath));
+      callback(new _SassError.default(error));
       return;
     }
 
-    if (result.map && result.map !== '{}') {
+    if (result.map) {
       // eslint-disable-next-line no-param-reassign
       result.map = JSON.parse(result.map); // result.map.file is an optional property that provides the output filename.
       // Since we don't know the final filename in the webpack build chain yet, it makes no sense to have it.
       // eslint-disable-next-line no-param-reassign
 
-      delete result.map.file; // One of the sources is 'stdin' according to dart-sass/node-sass because we've used the data input.
-      // Now let's override that value with the correct relative path.
-      // Since we specified options.sourceMap = path.join(process.cwd(), "/sass.map"); in getSassOptions,
-      // we know that this path is relative to process.cwd(). This is how node-sass works.
-      // eslint-disable-next-line no-param-reassign
-
-      const stdinIndex = result.map.sources.findIndex(source => source.includes('stdin'));
-
-      if (stdinIndex !== -1) {
-        // eslint-disable-next-line no-param-reassign
-        result.map.sources[stdinIndex] = _path.default.relative(process.cwd(), this.resourcePath);
-      } // node-sass returns POSIX paths, that's why we need to transform them back to native paths.
+      delete result.map.file; // node-sass returns POSIX paths, that's why we need to transform them back to native paths.
       // This fixes an error on windows where the source-map module cannot resolve the source maps.
       // @see https://github.com/webpack-contrib/sass-loader/issues/366#issuecomment-279460722
       // eslint-disable-next-line no-param-reassign
 
-
       result.map.sourceRoot = _path.default.normalize(result.map.sourceRoot); // eslint-disable-next-line no-param-reassign
 
       result.map.sources = result.map.sources.map(_path.default.normalize);
-    } else {
-      // eslint-disable-next-line no-param-reassign
-      result.map = null;
     }
 
-    result.stats.includedFiles.forEach(addNormalizedDependency);
+    result.stats.includedFiles.forEach(includedFile => {
+      this.addDependency(_path.default.normalize(includedFile));
+    });
     callback(null, result.css.toString(), result.map);
   });
 }

package/dist/options.json

@@ -17,8 +17,8 @@
         }
       ]
     },
-    "prependData": {
-      "description": "Prepends `Sass`/`SCSS` code before the actual entry file (https://github.com/webpack-contrib/sass-loader#prependdata).",
+    "additionalData": {
+      "description": "Prepends/Appends `Sass`/`SCSS` code before the actual entry file (https://github.com/webpack-contrib/sass-loader#additionaldata).",
       "anyOf": [
         {
           "type": "string"