sass-loader 6.0.7 → 7.0.3

package/CHANGELOG.md

@@ -2,6 +2,55 @@
 
 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.
 
+<a name="7.0.3"></a>
+## [7.0.3](https://github.com/webpack-contrib/sass-loader/compare/v7.0.2...v7.0.3) (2018-06-05)
+
+
+### Bug Fixes
+
+* Bare imports not working sometimes (#579) ([c348281](https://github.com/webpack-contrib/sass-loader/commit/c348281)), closes [#566](https://github.com/webpack-contrib/sass-loader/issues/566)
+
+
+
+<a name="7.0.2"></a>
+## [7.0.2](https://github.com/webpack-contrib/sass-loader/compare/v7.0.1...v7.0.2) (2018-06-02)
+
+
+### Bug Fixes
+
+* Errors being swallowed when trying to load node-sass (#576) ([6dfb274](https://github.com/webpack-contrib/sass-loader/commit/6dfb274)), closes [#563](https://github.com/webpack-contrib/sass-loader/issues/563)
+* Report error to user for problems loading node-sass (#562) ([2529c07](https://github.com/webpack-contrib/sass-loader/commit/2529c07))
+
+
+
+<a name="7.0.1"></a>
+## [7.0.1](https://github.com/webpack-contrib/sass-loader/compare/v7.0.0...v7.0.1) (2018-04-13)
+
+
+### Bug Fixes
+
+* Wrong import precedence (#557) ([f4eeff1](https://github.com/webpack-contrib/sass-loader/commit/f4eeff1))
+
+
+
+<a name="7.0.0"></a>
+# [7.0.0](https://github.com/webpack-contrib/sass-loader/compare/v6.0.7...v7.0.0) (2018-04-13)
+
+
+### Features
+
+* Refactor resolving and simplify webpack config aliases (#479) ([e0fde1a](https://github.com/webpack-contrib/sass-loader/commit/e0fde1a))
+* Remove `node-sass` from `peerDependencies` (#533) ([6439cef](https://github.com/webpack-contrib/sass-loader/commit/6439cef))
+
+
+### BREAKING CHANGES
+
+* Drop official node 4 support
+* This slightly changes the resolving algorithm. Should not break in normal usage, but might break in complex configurations.
+* The sass-loader throws an error at runtime now and refuses to compile if the peer dependency is wrong. This could break applications where npm's peer dependency warning was just ignored.
+
+
+
 <a name="6.0.7"></a>
 ## [6.0.7](https://github.com/webpack-contrib/sass-loader/compare/v6.0.6...v6.0.7) (2018-03-03)
 

package/README.md

@@ -14,11 +14,11 @@
     <img width="200" height="200"
       src="https://webpack.js.org/assets/icon-square-big.svg">
   </a>
-  <h1>SASS Loader</h1>
-  <p>Loads a SASS/SCSS file and compiles it to CSS.</p>
+  <h1>Sass Loader</h1>
+  <p>Loads a Sass/SCSS file and compiles it to CSS.</p>
 </div>
 
-Use the [css-loader](https://github.com/webpack-contrib/css-loader) or the [raw-loader](https://github.com/webpack-contrib/raw-loader) to turn it into a JS module and the [ExtractTextPlugin](https://github.com/webpack-contrib/extract-text-webpack-plugin) to extract it into a separate file.
+Use the [css-loader](https://github.com/webpack-contrib/css-loader) or the [raw-loader](https://github.com/webpack-contrib/raw-loader) to turn it into a JS module and the [MiniCssExtractPlugin](https://github.com/webpack-contrib/mini-css-extract-plugin) to extract it into a separate file.
 Looking for the webpack 1 loader? Check out the [archive/webpack-1 branch](https://github.com/webpack-contrib/sass-loader/tree/archive/webpack-1).
 
 <h2 align="center">Install</h2>
@@ -45,13 +45,11 @@ module.exports = {
     module: {
         rules: [{
             test: /\.scss$/,
-            use: [{
-                loader: "style-loader" // creates style nodes from JS strings
-            }, {
-                loader: "css-loader" // translates CSS into CommonJS
-            }, {
-                loader: "sass-loader" // compiles Sass to CSS
-            }]
+            use: [
+                "style-loader", // creates style nodes from JS strings
+                "css-loader", // translates CSS into CommonJS
+                "sass-loader" // compiles Sass to CSS
+            ]
         }]
     }
 };
@@ -85,34 +83,31 @@ See [node-sass](https://github.com/andrew/node-sass) for all available Sass opti
 
 ### In production
 
-Usually, it's recommended to extract the style sheets into a dedicated file in production using the [ExtractTextPlugin](https://github.com/webpack-contrib/extract-text-webpack-plugin). This way your styles are not dependent on JavaScript:
+Usually, it's recommended to extract the style sheets into a dedicated file in production using the [MiniCssExtractPlugin](https://github.com/webpack-contrib/mini-css-extract-plugin). This way your styles are not dependent on JavaScript:
 
 ```js
-const ExtractTextPlugin = require("extract-text-webpack-plugin");
-
-const extractSass = new ExtractTextPlugin({
-    filename: "[name].[contenthash].css",
-    disable: process.env.NODE_ENV === "development"
-});
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 module.exports = {
 	...
     module: {
         rules: [{
             test: /\.scss$/,
-            use: extractSass.extract({
-                use: [{
-                    loader: "css-loader"
-                }, {
-                    loader: "sass-loader"
-                }],
-                // use style-loader in development
-                fallback: "style-loader"
-            })
+            use: [
+                // fallback to style-loader in development
+                process.env.NODE_ENV !== 'production' ? 'style-loader' : MiniCssExtractPlugin.loader,
+                "css-loader",
+                "sass-loader"
+            ]
         }]
     },
     plugins: [
-        extractSass
+        new MiniCssExtractPlugin({
+            // Options similar to the same options in webpackOptions.output
+            // both options are optional
+            filename: "[name].css",
+            chunkFilename: "[id].css"
+        })
     ]
 };
 ```

package/lib/importsToResolve.js

@@ -1,58 +1,60 @@
 "use strict";
 
 const path = require("path");
+const utils = require("loader-utils");
 
-// libsass uses this precedence when importing files without extension
-const extPrecedence = [".scss", ".sass", ".css"];
+const matchModuleImport = /^~([^\/]+|@[^\/]+[\/][^\/]+)$/;
 
 /**
  * When libsass tries to resolve an import, it uses a special algorithm.
  * Since the sass-loader uses webpack to resolve the modules, we need to simulate that algorithm. This function
- * returns an array of import paths to try.
+ * returns an array of import paths to try. The last entry in the array is always the original url
+ * to enable straight-forward webpack.config aliases.
  *
- * @param {string} request
+ * @param {string} url
  * @returns {Array<string>}
  */
-function importsToResolve(request) {
+function importsToResolve(url) {
+    const request = utils.urlToRequest(url);
+    // Keep in mind: ext can also be something like '.datepicker' when the true extension is omitted and the filename contains a dot.
+    // @see https://github.com/webpack-contrib/sass-loader/issues/167
+    const ext = path.extname(request);
+
+    if (matchModuleImport.test(url)) {
+        return [request, url];
+    }
+
     // libsass' import algorithm works like this:
-    // In case there is no file extension...
-    //   - Prefer modules starting with '_'.
-    //   - File extension precedence: .scss, .sass, .css.
+
     // In case there is a file extension...
     //   - If the file is a CSS-file, do not include it all, but just link it via @import url().
     //   - The exact file name must match (no auto-resolving of '_'-modules).
+    if (ext === ".css") {
+        return [];
+    }
+    if (ext === ".scss" || ext === ".sass") {
+        return [request, url];
+    }
 
-    // Keep in mind: ext can also be something like '.datepicker' when the true extension is omitted and the filename contains a dot.
-    // @see https://github.com/webpack-contrib/sass-loader/issues/167
-    const ext = path.extname(request);
+    // In case there is no file extension...
+    //   - Prefer modules starting with '_'.
+    //   - File extension precedence: .scss, .sass, .css.
     const basename = path.basename(request);
-    const dirname = path.dirname(request);
-    const startsWithUnderscore = basename.charAt(0) === "_";
-    const hasCssExt = ext === ".css";
-    const hasSassExt = ext === ".scss" || ext === ".sass";
-
-    // a module import is an identifier like 'bootstrap-sass'
-    // We also need to check for dirname since it might also be a deep import like 'bootstrap-sass/something'
-    let isModuleImport = request.charAt(0) !== "." && dirname === ".";
-
-    if (dirname.charAt(0) === "@") {
-        // Check whether it is a deep import from scoped npm package
-        // (i.e. @pkg/foo/file), if so, process import as file import;
-        // otherwise, if we import from root npm scoped package (i.e. @pkg/foo)
-        // process import as a module import.
-        isModuleImport = !(dirname.indexOf("/") > -1);
+
+    if (basename.charAt(0) === "_") {
+        return [
+            `${ request }.scss`, `${ request }.sass`, `${ request }.css`,
+            url
+        ];
     }
 
-    return (isModuleImport && [request]) || // Do not modify module imports
-        (hasCssExt && []) || // Do not import css files
-        (hasSassExt && [request]) || // Do not modify imports with explicit extensions
-        (startsWithUnderscore ? [] : extPrecedence) // Do not add underscore imports if there is already an underscore
-            .map(ext => "_" + basename + ext)
-            .concat(
-                extPrecedence.map(ext => basename + ext)
-            ).map(
-                file => dirname + "/" + file // No path.sep required here, because imports inside SASS are usually with /
-            );
+    const dirname = path.dirname(request);
+
+    return [
+        `${ dirname }/_${ basename }.scss`, `${ dirname }/_${ basename }.sass`, `${ dirname }/_${ basename }.css`,
+        `${ request }.scss`, `${ request }.sass`, `${ request }.css`,
+        url
+    ];
 }
 
 module.exports = importsToResolve;

package/lib/loader.js

@@ -1,6 +1,5 @@
 "use strict";
 
-const sass = require("node-sass");
 const path = require("path");
 const async = require("neo-async");
 const formatSassError = require("./formatSassError");
@@ -12,7 +11,7 @@ const pify = require("pify");
 // fs tasks when running the custom importer code.
 // This can be removed as soon as node-sass implements a fix for this.
 const threadPoolSize = process.env.UV_THREADPOOL_SIZE || 4;
-const asyncSassJobQueue = async.queue(sass.render, threadPoolSize - 1);
+let asyncSassJobQueue = null;
 
 /**
  * The sass-loader makes node-sass available to webpack modules.
@@ -21,6 +20,19 @@ const asyncSassJobQueue = async.queue(sass.render, threadPoolSize - 1);
  * @param {string} content
  */
 function sassLoader(content) {
+    if (asyncSassJobQueue === null) {
+        const sass = require("node-sass");
+        const sassVersion = /^(\d+)/.exec(require("node-sass/package.json").version).pop();
+
+        if (Number(sassVersion) < 4) {
+            throw new Error(
+                "The installed version of `node-sass` is not compatible (expected: >= 4, actual: " + sassVersion + ")."
+            );
+        }
+
+        asyncSassJobQueue = async.queue(sass.render, threadPoolSize - 1);
+    }
+
     const callback = this.async();
     const isSync = typeof callback !== "function";
     const self = this;

package/lib/webpackImporter.js

@@ -17,7 +17,6 @@
  */
 
 const path = require("path");
-const utils = require("loader-utils");
 const tail = require("lodash.tail");
 const importsToResolve = require("./importsToResolve");
 
@@ -63,7 +62,7 @@ function webpackImporter(resourcePath, resolve, addNormalizedDependency) {
     return (url, prev, done) => {
         startResolving(
             dirContextFrom(prev),
-            importsToResolve(utils.urlToRequest(url))
+            importsToResolve(url)
         ) // Catch all resolving errors, return the original file and pass responsibility back to other custom importers
             .catch(() => ({ file: url }))
             .then(done);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sass-loader",
-  "version": "6.0.7",
+  "version": "7.0.3",
   "description": "Sass loader for webpack",
   "author": "J. Tangelder",
   "license": "MIT",
@@ -40,21 +40,22 @@
     "eslint-plugin-jsdoc": "^2.4.0",
     "file-loader": "^0.11.2",
     "mocha": "^3.0.2",
+    "mock-require": "^3.0.1",
     "node-sass": "^4.5.0",
     "nyc": "^11.0.2",
     "raw-loader": "^0.5.1",
     "should": "^11.2.0",
     "standard-version": "^4.2.0",
     "style-loader": "^0.18.2",
+    "webpack": "^4.5.0",
     "webpack-dev-server": "^2.4.1",
     "webpack-merge": "^4.0.0"
   },
   "engines": {
-    "node": ">= 4.3 < 5.0.0 || >= 5.10"
+    "node": ">= 6.9.0 || >= 8.9.0"
   },
   "peerDependencies": {
-    "node-sass": "^4.0.0",
-    "webpack": "^2.0.0 || ^3.0.0 || ^4.0.0"
+    "webpack": "^3.0.0 || ^4.0.0"
   },
   "keywords": [
     "sass",