sass-loader 4.0.0 → 4.1.1

package/.npmignore

@@ -1,19 +1,19 @@
-lib-cov
-*.seed
-*.log
-*.csv
-*.dat
-*.out
-*.pid
-*.gz
-
-pids
-logs
-results
-
-npm-debug.log
-node_modules
-coverage
-examples
-test
-.idea
+lib-cov
+*.seed
+*.log
+*.csv
+*.dat
+*.out
+*.pid
+*.gz
+
+pids
+logs
+results
+
+npm-debug.log
+node_modules
+coverage
+examples
+test
+.idea

package/.travis.yml

@@ -0,0 +1,6 @@
+sudo: false
+language: node_js
+node_js:
+  - "7"
+  - "6"
+  - "4"

package/CHANGELOG.md

@@ -1,9 +1,25 @@
 Changelog
 ---------
 
+### 4.1.0
+
+- Update `node-sass@4.0.0` [#319](https://github.com/jtangelder/sass-loader/pull/319)
+
+### 4.0.2
+
+- Fix wrong context in customImporters that was introduced with fd6be1f143a1810f7e5072a865b3d8675ba1b94e [#275](https://github.com/jtangelder/sass-loader/issues/275) [#277](https://github.com/jtangelder/sass-loader/pull/277)
+
+### 4.0.1
+
+- Fix custom importers receiving `'stdin'` as second argument instead of the actual `resourcePath` [#267](https://github.com/jtangelder/sass-loader/pull/267)
+
 ### 4.0.0
 
-- **Breaking**: Release new major version because the previous release was a breaking change in certain scenarios [#250](https://github.com/jtangelder/sass-loader/pull/250)
+- **Breaking**: Release new major version because `3.2.2` was a breaking change in certain scenarios [#250](https://github.com/jtangelder/sass-loader/pull/250) [#254](https://github.com/jtangelder/sass-loader/issues/254)
+
+### 3.2.3
+
+- Revert changes to `3.2.1` because `3.2.2` contained a potential breaking change [#254](https://github.com/jtangelder/sass-loader/issues/254)
 
 ### 3.2.2
 

package/README.md

@@ -14,22 +14,22 @@ as [`peerDependency`](https://docs.npmjs.com/files/package.json#peerdependencies
 [Documentation: Using loaders](http://webpack.github.io/docs/using-loaders.html)
 
 ``` javascript
-var css = require("!raw!sass!./file.scss");
+var css = require("!raw-loader!sass-loader!./file.scss");
 // returns compiled css code from file.scss, resolves Sass imports
-var css = require("!css!sass!./file.scss");
+var css = require("!css-loader!sass-loader!./file.scss");
 // returns compiled css code from file.scss, resolves Sass and CSS imports and url(...)s
 ```
 
 Use in tandem with the [`style-loader`](https://github.com/webpack/style-loader) and [`css-loader`](https://github.com/webpack/css-loader) to add the css rules to your document:
 
 ``` javascript
-require("!style!css!sass!./file.scss");
+require("!style-loader!css-loader!sass-loader!./file.scss");
 ```
 *Please note: If you encounter module errors complaining about a missing `style` or `css` module, make sure you have installed all required loaders via npm.*
 
 ### Apply via webpack config
 
-It's recommended to adjust your `webpack.config` so `style!css!sass!` is applied automatically on all files ending on `.scss`:
+It's recommended to adjust your `webpack.config` so `style-loader!css-loader!sass-loader!` is applied automatically on all files ending on `.scss`:
 
 ``` javascript
 module.exports = {
@@ -38,7 +38,7 @@ module.exports = {
     loaders: [
       {
         test: /\.scss$/,
-        loaders: ["style", "css", "sass"]
+        loaders: ["style-loader", "css-loader", "sass-loader"]
       }
     ]
   }
@@ -49,7 +49,7 @@ Then you only need to write: `require("./file.scss")`.
 
 ### Sass options
 
-You can pass options to node-sass by defining a `sassLoader`-property on your `webpack.config.js`. See [node-sass](https://github.com/andrew/node-sass) for all available Sass-options.
+You can pass options to node-sass by defining a `sassLoader` property on your `webpack.config.js`. See [node-sass](https://github.com/andrew/node-sass) for all available Sass options.
 
 ```javascript
 module.exports = {
@@ -58,7 +58,7 @@ module.exports = {
     loaders: [
       {
         test: /\.scss$/,
-        loaders: ["style", "css", "sass"]
+        loaders: ["style-loader", "css-loader", "sass-loader"]
       }
     ]
   },
@@ -70,7 +70,7 @@ module.exports = {
 
 Passing your options as [query parameters](http://webpack.github.io/docs/using-loaders.html#query-parameters) is also supported, but can get confusing if you need to set a lot of options.
 
-If you need to define two different loader configs, you can also change the config's property name via `sass?config=otherSassLoaderConfig`:
+If you need to define two different loader configs, you can also change the config's property name via `sass-loader?config=otherSassLoaderConfig`:
 
 ```javascript
 module.exports = {
@@ -79,7 +79,7 @@ module.exports = {
     loaders: [
       {
         test: /\.scss$/,
-        loaders: ["style", "css", "sass?config=otherSassLoaderConfig"]
+        loaders: ["style-loader", "css-loader", "sass-loader?config=otherSassLoaderConfig"]
       }
     ]
   },
@@ -102,11 +102,11 @@ Alternatively, for bootstrap-sass:
 @import "~bootstrap-sass/assets/stylesheets/bootstrap";
 ```
 
-It's important to only prepend it with `~`, because `~/` resolves to the home directory. webpack needs to distinguish between `bootstrap` and `~bootstrap` because CSS- and Sass-files have no special syntax for importing relative files. Writing `@import "file"` is the same as `@import "./file";`
+It's important to only prepend it with `~`, because `~/` resolves to the home directory. webpack needs to distinguish between `bootstrap` and `~bootstrap` because CSS and Sass files have no special syntax for importing relative files. Writing `@import "file"` is the same as `@import "./file";`
 
 ### Environment variables
 
-If you want to prepend Sass code before the actual entry file, you can simply set the `data`-option. In this case, the sass-loader will not override the `data`-option but just append the entry's content. This is especially useful when some of your Sass variables depend on the environment:
+If you want to prepend Sass code before the actual entry file, you can simply set the `data` option. In this case, the sass-loader will not override the `data` option but just append the entry's content. This is especially useful when some of your Sass variables depend on the environment:
 
 ```javascript
 module.exports = {
@@ -125,7 +125,7 @@ Since Sass/[libsass](https://github.com/sass/libsass) does not provide [url rewr
 - If you're just generating CSS without passing it to the css-loader, it must be relative to your web root.
 - If you pass the generated CSS on to the css-loader, all urls must be relative to the entry-file (e.g. `main.scss`).
 
-More likely you will be disrupted by this second issue. It is natural to expect relative references to be resolved against the `.scss`-file in which they are specified (like in regular `.css`-files). Thankfully there are a two solutions to this problem:
+More likely you will be disrupted by this second issue. It is natural to expect relative references to be resolved against the `.scss` file in which they are specified (like in regular `.css` files). Thankfully there are a two solutions to this problem:
 
 - Add the missing url rewriting using the [resolve-url-loader](https://github.com/bholloway/resolve-url-loader). Place it directly after the sass-loader in the loader chain.
 - Library authors usually provide a variable to modify the asset path. [bootstrap-sass](https://github.com/twbs/bootstrap-sass) for example has an `$icon-font-path`. Check out [this working bootstrap example](https://github.com/jtangelder/sass-loader/tree/master/test/bootstrapSass).
@@ -141,7 +141,7 @@ There are two possibilties to extract a stylesheet from the bundle:
 
 ### Source maps
 
-To enable CSS Source maps, you'll need to pass the `sourceMap`-option to the sass- *and* the css-loader. Your `webpack.config.js` should look like this:
+To enable CSS Source maps, you'll need to pass the `sourceMap` option to the sass *and* the css-loader. Your `webpack.config.js` should look like this:
 
 ```javascript
 module.exports = {
@@ -151,7 +151,7 @@ module.exports = {
         loaders: [
             {
                 test: /\.scss$/,
-                loaders: ["style", "css?sourceMap", "sass?sourceMap"]
+                loaders: ["style-loader", "css-loader?sourceMap", "sass-loader?sourceMap"]
             }
         ]
     }

package/index.js

@@ -18,6 +18,7 @@ var SassError = {
 };
 
 // libsass uses this precedence when importing files without extension
+var slice = Array.prototype.slice;
 var extPrecedence = ['.scss', '.sass', '.css'];
 var matchCss = /\.css$/;
 
@@ -223,7 +224,7 @@ module.exports = function (content) {
     if (sassOptions.sourceMap) {
         // deliberately overriding the sourceMap option
         // this value is (currently) ignored by libsass when using the data input instead of file input
-        // however, it is still necessary for correct relative paths in result.map.sources
+        // however, it is still necessary for correct relative paths in result.map.sources.
         sassOptions.sourceMap = this.options.context + '/sass.map';
         sassOptions.omitSourceMapUrl = true;
 
@@ -234,10 +235,10 @@ module.exports = function (content) {
         }
     }
 
-    // indentedSyntax is a boolean flag
+    // indentedSyntax is a boolean flag.
     var ext = path.extname(resourcePath);
 
-    // If we are compling sass and indentedSyntax isn't set, automatically set it.
+    // If we are compiling sass and indentedSyntax isn't set, automatically set it.
     if (ext && ext.toLowerCase() === '.sass' && sassOptions.indentedSyntax === undefined) {
         sassOptions.indentedSyntax = true;
     } else {
@@ -245,7 +246,7 @@ module.exports = function (content) {
     }
 
     // Allow passing custom importers to `node-sass`. Accepts `Function` or an array of `Function`s.
-    sassOptions.importer = sassOptions.importer ? [].concat(sassOptions.importer) : [];
+    sassOptions.importer = sassOptions.importer ? proxyCustomImporters(sassOptions.importer, resourcePath) : [];
     sassOptions.importer.push(getWebpackImporter());
 
     // `node-sass` uses `includePaths` to resolve `@import` paths. Append the currently processed file.
@@ -391,3 +392,31 @@ function getLoaderConfig(loaderContext) {
 
     return assign({}, config, query);
 }
+
+/**
+ * Creates new custom importers that use the given `resourcePath` if libsass calls the custom importer with `prev`
+ * being 'stdin'.
+ *
+ * Why do we need this?
+ *
+ * We have to use the `data` option of node-sass in order to compile our sass because the `resourcePath` might
+ * not be an actual file on disk. When using the `data` option, libsass uses the string 'stdin' instead of a
+ * filename. We have to fix this behavior in order to provide a consistent experience to the webpack user.
+ *
+ * @param {function|Array<function>} importer
+ * @param {string} resourcePath
+ * @returns {Array<function>}
+ */
+function proxyCustomImporters(importer, resourcePath) {
+    return [].concat(importer).map(function (importer) {
+        return function (url, prev, done) {
+            var args = slice.call(arguments);
+            
+            if (args[1] === 'stdin') {
+                args[1] = resourcePath;
+            }
+            
+            return importer.apply(this, args);
+        };
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sass-loader",
-  "version": "4.0.0",
+  "version": "4.1.1",
   "description": "Sass loader for webpack",
   "main": "index.js",
   "scripts": {
@@ -27,24 +27,24 @@
   "author": "J. Tangelder",
   "license": "MIT",
   "peerDependencies": {
-    "node-sass": "^3.4.2",
-    "webpack": "^1.12.6 || ^2.1.0-beta"
+    "node-sass": "^3.4.2 || ^4.0.0",
+    "webpack": "^2 || ^2.2.0-rc.0 || ^2.1.0-beta || ^1.12.6"
   },
   "dependencies": {
-    "async": "^1.4.0",
+    "async": "^2.0.1",
     "loader-utils": "^0.2.15",
     "object-assign": "^4.1.0"
   },
   "devDependencies": {
     "bootstrap-sass": "^3.3.5",
-    "css-loader": "^0.23.0",
+    "css-loader": "^0.24.0",
     "enhanced-require": "^0.5.0-beta6",
-    "file-loader": "^0.8.4",
+    "file-loader": "^0.9.0",
     "jshint": "^2.9.2",
-    "mocha": "^2.5.3",
-    "node-sass": "^3.8.0",
+    "mocha": "^3.0.2",
+    "node-sass": "^4.0.0",
     "raw-loader": "^0.5.1",
-    "should": "^9.0.2",
+    "should": "^11.1.0",
     "style-loader": "^0.13.1",
     "webpack": "^1.13.1",
     "webpack-dev-server": "^1.7.0"