css-loader 0.28.4 → 0.28.8

package/CHANGELOG.md

@@ -2,6 +2,48 @@
 
 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="0.28.8"></a>
+## [0.28.8](https://github.com/webpack-contrib/css-loader/compare/v0.28.7...v0.28.8) (2018-01-05)
+
+
+### Bug Fixes
+
+* **loader:** correctly check if source map is `undefined` ([#641](https://github.com/webpack-contrib/css-loader/issues/641)) ([0dccfa9](https://github.com/webpack-contrib/css-loader/commit/0dccfa9))
+* proper URL escaping and wrapping (`url()`) ([#627](https://github.com/webpack-contrib/css-loader/issues/627)) ([8897d44](https://github.com/webpack-contrib/css-loader/commit/8897d44))
+
+
+
+<a name="0.28.7"></a>
+## [0.28.7](https://github.com/webpack/css-loader/compare/v0.28.6...v0.28.7) (2017-08-30)
+
+
+### Bug Fixes
+
+* pass resolver to `localsLoader` (`options.alias`)  ([#601](https://github.com/webpack/css-loader/issues/601)) ([8f1b57c](https://github.com/webpack/css-loader/commit/8f1b57c))
+
+
+
+<a name="0.28.6"></a>
+## [0.28.6](https://github.com/webpack/css-loader/compare/v0.28.5...v0.28.6) (2017-08-30)
+
+
+### Bug Fixes
+
+* add support for aliases starting with `/` (`options.alias`) ([#597](https://github.com/webpack/css-loader/issues/597)) ([63567f2](https://github.com/webpack/css-loader/commit/63567f2))
+
+
+
+<a name="0.28.5"></a>
+## [0.28.5](https://github.com/webpack/css-loader/compare/v0.28.4...v0.28.5) (2017-08-17)
+
+
+### Bug Fixes
+
+* match mutliple dashes (`options.camelCase`) ([#556](https://github.com/webpack/css-loader/issues/556)) ([1fee601](https://github.com/webpack/css-loader/commit/1fee601))
+* stricter `[@import](https://github.com/import)` tolerance ([#593](https://github.com/webpack/css-loader/issues/593)) ([2e4ec09](https://github.com/webpack/css-loader/commit/2e4ec09))
+
+
+
 <a name="0.28.4"></a>
 ## [0.28.4](https://github.com/webpack/css-loader/compare/v0.28.3...v0.28.4) (2017-05-30)
 

package/README.md

@@ -27,7 +27,7 @@ The `css-loader` interprets `@import` and `url()` like `import/require()`
 and will resolve them.
 
 Good loaders for requiring your assets are the [file-loader](https://github.com/webpack/file-loader)
-and the [url-loader](https://github.com/webpack/url-loader) which you should specify in your config (see [below](https://github.com/michael-ciniawsky/css-loader#assets)).
+and the [url-loader](https://github.com/webpack/url-loader) which you should specify in your config (see [below](https://github.com/webpack-contrib/css-loader#assets)).
 
 **file.js**
 ```js
@@ -94,15 +94,16 @@ It's useful when you, for instance, need to post process the CSS as a string.
 
 |Name|Type|Default|Description|
 |:--:|:--:|:-----:|:----------|
-|**`root`**|`{String}`|`/`|Path to resolve URLs, URLs starting with `/` will not be translated|
-|**`url`**|`{Boolean}`|`true`| Enable/Disable `url()` handling|
-|**`alias`**|`{Object}`|`{}`|Create aliases to import certain modules more easily|
-|**`import`** |`{Boolean}`|`true`| Enable/Disable @import handling|
-|**`modules`**|`{Boolean}`|`false`|Enable/Disable CSS Modules|
-|**`minimize`**|`{Boolean\|Object}`|`false`|Enable/Disable minification|
-|**`sourceMap`**|`{Boolean}`|`false`|Enable/Disable Sourcemaps|
-|**`camelCase`**|`{Boolean\|String}`|`false`|Export Classnames in CamelCase|
-|**`importLoaders`**|`{Number}`|`0`|Number of loaders applied before CSS loader|
+|**[`root`](#root)**|`{String}`|`/`|Path to resolve URLs, URLs starting with `/` will not be translated|
+|**[`url`](#url)**|`{Boolean}`|`true`| Enable/Disable `url()` handling|
+|**[`alias`](#alias)**|`{Object}`|`{}`|Create aliases to import certain modules more easily|
+|**[`import`](#import)** |`{Boolean}`|`true`| Enable/Disable @import handling|
+|**[`modules`](#modules)**|`{Boolean}`|`false`|Enable/Disable CSS Modules|
+|**[`minimize`](#minimize)**|`{Boolean\|Object}`|`false`|Enable/Disable minification|
+|**[`sourceMap`](#sourcemap)**|`{Boolean}`|`false`|Enable/Disable Sourcemaps|
+|**[`camelCase`](#camelcase)**|`{Boolean\|String}`|`false`|Export Classnames in CamelCase|
+|**[`importLoaders`](#importloaders)**|`{Number}`|`0`|Number of loaders applied before CSS loader|
+|**`localIdentName`**|`{String}`|`[hash:base64]`|Configure the generated ident|
 
 ### `root`
 
@@ -140,7 +141,7 @@ url(~module/image.png) => require('module/image.png')
 
 Rewrite your urls with alias, this is useful when it's hard to change url paths of your input files, for example, when you're using some css / sass files in another package (bootstrap, ratchet, font-awesome, etc.).
 
-`css-loader`'s `alias` follows the same syntax as webpack's `resolve.alias`, you can see the details at the [resolve docs] (https://webpack.js.org/configuration/resolve/#resolve-alias)
+`css-loader`'s `alias` follows the same syntax as webpack's `resolve.alias`, you can see the details at the [resolve docs](https://webpack.js.org/configuration/resolve/#resolve-alias)
 
 **file.scss**
 ```css
@@ -342,7 +343,7 @@ To import from multiple modules use multiple `composes:` rules.
 
 By default the css-loader minimizes the css if specified by the module system.
 
-In some cases the minification is destructive to the css, so you can provide your own options to the minifier if needed. cssnano is used for minification and you find a [list of options here](http://cssnano.co/options/).
+In some cases the minification is destructive to the css, so you can provide your own options to the cssnano-based minifier if needed. See [cssnano's documentation](http://cssnano.co/guides/) for more information on the available options.
 
 You can also disable or enforce minification with the `minimize` query parameter.
 
@@ -418,7 +419,7 @@ The query parameter `importLoaders` allows to configure how many loaders before
     {
       loader: 'css-loader',
       options: {
-        importLoaders: 1 // 0 => no loaders (default); 1 => postcss-loader; 2 => postcss-loader, sass-loader
+        importLoaders: 2 // 0 => no loaders (default); 1 => postcss-loader; 2 => postcss-loader, sass-loader
       }
     },
     'postcss-loader',
@@ -487,7 +488,6 @@ module.exports = {
         })
       ]
     : []
-  ]
 }
 ```
 

package/lib/compile-exports.js

@@ -1,7 +1,7 @@
 var camelCase = require("lodash.camelcase");
 
 function dashesCamelCase(str) {
-  return str.replace(/-(\w)/g, function(match, firstLetter) {
+  return str.replace(/-+(\w)/g, function(match, firstLetter) {
     return firstLetter.toUpperCase();
   });
 }

package/lib/loader.js

@@ -42,6 +42,7 @@ module.exports = function(content, map) {
 		from: loaderUtils.getRemainingRequest(this).split("!").pop(),
 		to: loaderUtils.getCurrentRequest(this).split("!").pop(),
 		query: query,
+		resolve: resolve,
 		minimize: this.minimize,
 		loaderContext: this,
 		sourceMap: sourceMap
@@ -82,7 +83,13 @@ module.exports = function(content, map) {
 		}
 
 		cssAsString = cssAsString.replace(result.importItemRegExpG, importItemMatcher.bind(this));
-		if(query.url !== false) {
+
+		// helper for ensuring valid CSS strings from requires
+		var urlEscapeHelper = "";
+
+		if(query.url !== false && result.urlItems.length > 0) {
+			urlEscapeHelper = "var escape = require(" + loaderUtils.stringifyRequest(this, require.resolve("./url/escape.js")) + ");\n";
+
 			cssAsString = cssAsString.replace(result.urlItemRegExpG, function(item) {
 				var match = result.urlItemRegExp.exec(item);
 				var idx = +match[1];
@@ -94,22 +101,21 @@ module.exports = function(content, map) {
 				if(idx > 0) { // idx === 0 is catched by isUrlRequest
 					// in cases like url('webfont.eot?#iefix')
 					urlRequest = url.substr(0, idx);
-					return "\" + require(" + loaderUtils.stringifyRequest(this, urlRequest) + ") + \"" +
+					return "\" + escape(require(" + loaderUtils.stringifyRequest(this, urlRequest) + ")) + \"" +
 							url.substr(idx);
 				}
 				urlRequest = url;
-				return "\" + require(" + loaderUtils.stringifyRequest(this, urlRequest) + ") + \"";
+				return "\" + escape(require(" + loaderUtils.stringifyRequest(this, urlRequest) + ")) + \"";
 			}.bind(this));
 		}
-
-
+		
 		var exportJs = compileExports(result, importItemMatcher.bind(this), camelCaseKeys);
 		if (exportJs) {
 			exportJs = "exports.locals = " + exportJs + ";";
 		}
 
 		var moduleJs;
-		if(query.sourceMap && result.map) {
+		if(sourceMap && result.map) {
 			// add a SourceMap
 			map = result.map;
 			if(map.sources) {
@@ -126,9 +132,10 @@ module.exports = function(content, map) {
 		}
 
 		// embed runtime
-		callback(null, "exports = module.exports = require(" +
+		callback(null, urlEscapeHelper +
+			"exports = module.exports = require(" +
 			loaderUtils.stringifyRequest(this, require.resolve("./css-base.js")) +
-			")(" + query.sourceMap + ");\n" +
+			")(" + sourceMap + ");\n" +
 			"// imports\n" +
 			importJs + "\n\n" +
 			"// module\n" +

package/lib/localsLoader.js

@@ -6,6 +6,7 @@ var loaderUtils = require("loader-utils");
 var processCss = require("./processCss");
 var getImportPrefix = require("./getImportPrefix");
 var compileExports = require("./compile-exports");
+var createResolver = require("./createResolver");
 
 
 module.exports = function(content) {
@@ -14,12 +15,14 @@ module.exports = function(content) {
 	var query = loaderUtils.getOptions(this) || {};
 	var moduleMode = query.modules || query.module;
 	var camelCaseKeys = query.camelCase || query.camelcase;
+	var resolve = createResolver(query.alias);
 
 	processCss(content, null, {
 		mode: moduleMode ? "local" : "global",
 		query: query,
 		minimize: this.minimize,
-		loaderContext: this
+		loaderContext: this,
+		resolve: resolve
 	}, function(err, result) {
 		if(err) return callback(err);
 

package/lib/processCss.js

@@ -42,12 +42,12 @@ var parserPlugin = postcss.plugin("css-loader-parser", function(options) {
 		}
 
 		if(options.import) {
-			css.walkAtRules(/import/i, function(rule) {
+			css.walkAtRules(/^import$/i, function(rule) {
 				var values = Tokenizer.parseValues(rule.params);
 				var url = values.nodes[0].nodes[0];
-				if(url.type === "url") {
+				if(url && url.type === "url") {
 					url = url.url;
-				} else if(url.type === "string") {
+				} else if(url && url.type === "string") {
 					url = url.value;
 				} else throw rule.error("Unexpected format " + rule.params);
 				if (!url.replace(/\s/g, '').length) {
@@ -83,6 +83,11 @@ var parserPlugin = postcss.plugin("css-loader-parser", function(options) {
 			exports[exportName] = replaceImportsInString(exports[exportName]);
 		});
 
+		function isAlias(url) {
+			// Handle alias starting by / and root disabled
+			return url !== options.resolve(url)
+		}
+
 		function processNode(item) {
 			switch (item.type) {
 				case "value":
@@ -98,11 +103,9 @@ var parserPlugin = postcss.plugin("css-loader-parser", function(options) {
 					}
 					break;
 				case "url":
-					if (options.url && item.url.replace(/\s/g, '').length && !/^#/.test(item.url) && loaderUtils.isUrlRequest(item.url, options.root)) {
-						// Don't remove quotes around url when contain space
-						if (item.url.indexOf(" ") === -1) {
-							item.stringType = "";
-						}
+					if (options.url && item.url.replace(/\s/g, '').length && !/^#/.test(item.url) && (isAlias(item.url) || loaderUtils.isUrlRequest(item.url, options.root))) {
+						// Strip quotes, they will be re-added if the module needs them
+						item.stringType = "";
 						delete item.innerSpacingBefore;
 						delete item.innerSpacingAfter;
 						var url = item.url;
@@ -149,7 +152,8 @@ module.exports = function processCss(inputSource, inputMap, options, callback) {
 		root: root,
 		mode: options.mode,
 		url: query.url !== false,
-		import: query.import !== false
+		import: query.import !== false,
+		resolve: options.resolve
 	};
 
 	var pipeline = postcss([

package/lib/url/escape.js

@@ -0,0 +1,13 @@
+module.exports = function escape(url) {
+    // If url is already wrapped in quotes, remove them
+    if (/^['"].*['"]$/.test(url)) {
+        url = url.slice(1, -1);
+    }
+    // Should url be wrapped?
+    // See https://drafts.csswg.org/css-values-3/#urls
+    if (/["'() \t\n]/.test(url)) {
+        return '"' + url.replace(/"/g, '\\"').replace(/\n/g, '\\n') + '"'
+    }
+
+    return url
+}

package/package.json

@@ -1,31 +1,32 @@
 {
   "name": "css-loader",
-  "version": "0.28.4",
+  "version": "0.28.8",
   "author": "Tobias Koppers @sokra",
+  "license": "MIT",
   "description": "css loader module for webpack",
   "engines": {
-    "node": ">=0.12.0 || >=4.3.0 <5.0.0 || >=5.10"
+    "node": ">=0.12.0 || >= 4.3.0 < 5.0.0 || >=5.10"
   },
   "files": [
+    "lib",
     "index.js",
-    "locals.js",
-    "lib"
+    "locals.js"
   ],
   "dependencies": {
-    "babel-code-frame": "^6.11.0",
+    "babel-code-frame": "^6.26.0",
     "css-selector-tokenizer": "^0.7.0",
-    "cssnano": ">=2.6.1 <4",
+    "cssnano": "^3.10.0",
     "icss-utils": "^2.1.0",
     "loader-utils": "^1.0.2",
     "lodash.camelcase": "^4.3.0",
-    "object-assign": "^4.0.1",
+    "object-assign": "^4.1.1",
     "postcss": "^5.0.6",
-    "postcss-modules-extract-imports": "^1.0.0",
-    "postcss-modules-local-by-default": "^1.0.1",
-    "postcss-modules-scope": "^1.0.0",
-    "postcss-modules-values": "^1.1.0",
+    "postcss-modules-extract-imports": "^1.1.0",
+    "postcss-modules-local-by-default": "^1.2.0",
+    "postcss-modules-scope": "^1.1.0",
+    "postcss-modules-values": "^1.3.0",
     "postcss-value-parser": "^3.3.0",
-    "source-list-map": "^0.1.7"
+    "source-list-map": "^2.0.0"
   },
   "devDependencies": {
     "codecov": "^1.0.1",
@@ -36,17 +37,15 @@
     "standard-version": "^4.0.0"
   },
   "scripts": {
+    "lint": "eslint lib test",
     "test": "mocha",
+    "cover": "istanbul cover node_modules/mocha/bin/_mocha",
     "test:cover": "npm run cover -- --report lcovonly",
-    "lint": "eslint lib test",
     "travis:test": "npm run cover",
     "travis:lint": "npm run lint",
-    "cover": "istanbul cover node_modules/mocha/bin/_mocha",
-    "release": "yarn run standard-version"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git@github.com:webpack/css-loader.git"
+    "release": "standard-version"
   },
-  "license": "MIT"
+  "homepage": "https://github.com/webpack-contrib/css-loader",
+  "repository": "https://github.com/webpack-contrib/css-loader.git",
+  "bugs": "https://github.com/webpack-contrib/css-loader/issues"
 }