sass-loader 7.0.0 → 7.1.0

package/CHANGELOG.md

@@ -2,6 +2,47 @@
 
 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.1.0"></a>
+# [7.1.0](https://github.com/webpack-contrib/sass-loader/compare/v7.0.3...v7.1.0) (2018-08-01)
+
+
+### Features
+
+* Make this package implementation-agnostic (#573) ([bed9fb5](https://github.com/webpack-contrib/sass-loader/commit/bed9fb5)), closes [#435](https://github.com/webpack-contrib/sass-loader/issues/435)
+
+
+
+<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)
 
@@ -14,6 +55,7 @@ All notable changes to this project will be documented in this file. See [standa
 
 ### 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.
 

package/README.md

@@ -18,7 +18,7 @@
   <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>
@@ -27,8 +27,14 @@ Looking for the webpack 1 loader? Check out the [archive/webpack-1 branch](https
 npm install sass-loader node-sass webpack --save-dev
 ```
 
-The sass-loader requires [node-sass](https://github.com/sass/node-sass) and [webpack](https://github.com/webpack)
-as [`peerDependency`](https://docs.npmjs.com/files/package.json#peerdependencies). Thus you are able to control the versions accurately.
+The sass-loader requires [webpack](https://github.com/webpack) as a
+[`peerDependency`](https://docs.npmjs.com/files/package.json#peerdependencies)
+and it requires you to install either [Node Sass][] or [Dart Sass][] on your
+own. This allows you to control the versions of all your dependencies, and to
+choose which Sass implementation to use.
+
+[Node Sass]: https://github.com/sass/node-sass
+[Dart Sass]: http://sass-lang.com/dart-sass
 
 <h2 align="center">Examples</h2>
 
@@ -38,6 +44,25 @@ Chain the sass-loader with the [css-loader](https://github.com/webpack-contrib/c
 npm install style-loader css-loader --save-dev
 ```
 
+```js
+// webpack.config.js
+module.exports = {
+	...
+    module: {
+        rules: [{
+            test: /\.scss$/,
+            use: [
+                "style-loader", // creates style nodes from JS strings
+                "css-loader", // translates CSS into CommonJS
+                "sass-loader" // compiles Sass to CSS, using Node Sass by default
+            ]
+        }]
+    }
+};
+```
+
+You can also pass options directly to [Node Sass][] or [Dart Sass][]:
+
 ```js
 // webpack.config.js
 module.exports = {
@@ -46,21 +71,48 @@ module.exports = {
         rules: [{
             test: /\.scss$/,
             use: [{
-                loader: "style-loader" // creates style nodes from JS strings
+                loader: "style-loader"
             }, {
-                loader: "css-loader" // translates CSS into CommonJS
+                loader: "css-loader"
             }, {
-                loader: "sass-loader" // compiles Sass to CSS
+                loader: "sass-loader",
+                options: {
+                    includePaths: ["absolute/path/a", "absolute/path/b"]
+                }
             }]
         }]
     }
 };
 ```
 
-You can also pass options directly to [node-sass](https://github.com/andrew/node-sass) by specifying an `options` property like this:
+See [the Node Sass documentation](https://github.com/sass/node-sass/blob/master/README.md#options) for all available Sass options.
+
+The special `implementation` option determines which implementation of Sass to
+use. It takes either a [Node Sass][] or a [Dart Sass][] module. For example, to
+use Dart Sass, you'd pass:
+
+```js
+// ...
+    {
+        loader: "sass-loader",
+        options: {
+            implementation: require("sass")
+        }
+    }
+// ...
+```
+
+Note that when using 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. To enable this, pass the `Fiber` class
+to the `fiber` option:
 
 ```js
 // webpack.config.js
+const Fiber = require('fibers');
+
 module.exports = {
 	...
     module: {
@@ -73,7 +125,8 @@ module.exports = {
             }, {
                 loader: "sass-loader",
                 options: {
-                    includePaths: ["absolute/path/a", "absolute/path/b"]
+                    implementation: require("sass"),
+                    fiber: Fiber
                 }
             }]
         }]
@@ -81,38 +134,33 @@ module.exports = {
 };
 ```
 
-See [node-sass](https://github.com/andrew/node-sass) for all available Sass options.
-
 ### 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"
+        })
     ]
 };
 ```
@@ -121,7 +169,7 @@ module.exports = {
 
 ### Imports
 
-webpack provides an [advanced mechanism to resolve files](https://webpack.js.org/concepts/module-resolution/). The sass-loader uses node-sass' custom importer feature to pass all queries to the webpack resolving engine. Thus you can import your Sass modules from `node_modules`. Just prepend them with a `~` to tell webpack that this is not a relative import:
+webpack provides an [advanced mechanism to resolve files](https://webpack.js.org/concepts/module-resolution/). The sass-loader uses Sass's custom importer feature to pass all queries to the webpack resolving engine. Thus you can import your Sass modules from `node_modules`. Just prepend them with a `~` to tell webpack that this is not a relative import:
 
 ```css
 @import "~bootstrap/dist/css/bootstrap";

package/lib/importsToResolve.js

@@ -3,12 +3,12 @@
 const path = require("path");
 const utils = require("loader-utils");
 
-const matchModuleImport = /^~([^\/]+|@[^\/]+[\/][^\/]+)$/g;
+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. The first entry in the array is always the original url
+ * 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} url
@@ -21,7 +21,7 @@ function importsToResolve(url) {
     const ext = path.extname(request);
 
     if (matchModuleImport.test(url)) {
-        return [url, request];
+        return [request, url];
     }
 
     // libsass' import algorithm works like this:
@@ -33,7 +33,7 @@ function importsToResolve(url) {
         return [];
     }
     if (ext === ".scss" || ext === ".sass") {
-        return [url, request];
+        return [request, url];
     }
 
     // In case there is no file extension...
@@ -43,17 +43,17 @@ function importsToResolve(url) {
 
     if (basename.charAt(0) === "_") {
         return [
-            url,
-            `${ request }.scss`, `${ request }.sass`, `${ request }.css`
+            `${ request }.scss`, `${ request }.sass`, `${ request }.css`,
+            url
         ];
     }
 
     const dirname = path.dirname(request);
 
     return [
-        url,
         `${ dirname }/_${ basename }.scss`, `${ dirname }/_${ basename }.sass`, `${ dirname }/_${ basename }.css`,
-        `${ request }.scss`, `${ request }.sass`, `${ request }.css`
+        `${ request }.scss`, `${ request }.sass`, `${ request }.css`,
+        url
     ];
 }
 

package/lib/loader.js

@@ -6,12 +6,9 @@ const formatSassError = require("./formatSassError");
 const webpackImporter = require("./webpackImporter");
 const normalizeOptions = require("./normalizeOptions");
 const pify = require("pify");
+const semver = require("semver");
 
-// This queue makes sure node-sass leaves one thread available for executing
-// 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;
-let asyncSassJobQueue = null;
+let nodeSassJobQueue = null;
 
 /**
  * The sass-loader makes node-sass available to webpack modules.
@@ -20,28 +17,6 @@ let asyncSassJobQueue = null;
  * @param {string} content
  */
 function sassLoader(content) {
-    if (asyncSassJobQueue === null) {
-        let sass;
-        let sassVersion;
-
-        try {
-            sass = require("node-sass");
-            sassVersion = /^(\d+)/.exec(require("node-sass/package.json").version).pop();
-        } catch (e) {
-            throw new Error(
-                "`sass-loader` requires `node-sass` >=4. Please install a compatible version."
-            );
-        }
-
-        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;
@@ -68,8 +43,9 @@ function sassLoader(content) {
         return;
     }
 
-    // start the actual rendering
-    asyncSassJobQueue.push(options, (err, result) => {
+    const render = getRenderFuncFromSassImpl(options.implementation || require("node-sass"));
+
+    render(options, (err, result) => {
         if (err) {
             formatSassError(err, this.resourcePath);
             err.file && this.dependency(err.file);
@@ -101,4 +77,48 @@ function sassLoader(content) {
     });
 }
 
+/**
+ * Verifies that the implementation and version of Sass is supported by this loader.
+ *
+ * @param {Object} module
+ * @returns {Function}
+ */
+function getRenderFuncFromSassImpl(module) {
+    const info = module.info;
+    const components = info.split("\t");
+
+    if (components.length < 2) {
+        throw new Error("Unknown Sass implementation \"" + info + "\".");
+    }
+
+    const implementation = components[0];
+    const version = components[1];
+
+    if (!semver.valid(version)) {
+        throw new Error("Invalid Sass version \"" + version + "\".");
+    }
+
+    if (implementation === "dart-sass") {
+        if (!semver.satisfies(version, "^1.3.0")) {
+            throw new Error("Dart Sass version " + version + " is incompatible with ^1.3.0.");
+        }
+        return module.render.bind(module);
+    } else if (implementation === "node-sass") {
+        if (!semver.satisfies(version, "^4.0.0")) {
+            throw new Error("Node Sass version " + version + " is incompatible with ^4.0.0.");
+        }
+        // There is an issue with node-sass when async custom importers are used
+        // See https://github.com/sass/node-sass/issues/857#issuecomment-93594360
+        // We need to use a job queue to make sure that one thread is always available to the UV lib
+        if (nodeSassJobQueue === null) {
+            const threadPoolSize = Number(process.env.UV_THREADPOOL_SIZE || 4);
+
+            nodeSassJobQueue = async.queue(module.render.bind(module), threadPoolSize - 1);
+        }
+
+        return nodeSassJobQueue.push.bind(nodeSassJobQueue);
+    }
+    throw new Error("Unknown Sass implementation \"" + implementation + "\".");
+}
+
 module.exports = sassLoader;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sass-loader",
-  "version": "7.0.0",
+  "version": "7.1.0",
   "description": "Sass loader for webpack",
   "author": "J. Tangelder",
   "license": "MIT",
@@ -30,7 +30,8 @@
     "loader-utils": "^1.0.1",
     "lodash.tail": "^4.1.1",
     "neo-async": "^2.5.0",
-    "pify": "^3.0.0"
+    "pify": "^3.0.0",
+    "semver": "^5.5.0"
   },
   "devDependencies": {
     "bootstrap-sass": "^3.3.5",
@@ -44,6 +45,7 @@
     "node-sass": "^4.5.0",
     "nyc": "^11.0.2",
     "raw-loader": "^0.5.1",
+    "sass": "^1.3.0",
     "should": "^11.2.0",
     "standard-version": "^4.2.0",
     "style-loader": "^0.18.2",