css-loader 0.22.0 → 0.25.0

package/README.md

@@ -62,7 +62,7 @@ Using 'Root-relative' urls is not recommended. You should only use it for legacy
 
 ### Local scope
 
-By default CSS exports all class names into a global selector scope. This is a feature which offer a local selector scope.
+By default CSS exports all class names into a global selector scope. Styles can be locally scoped to avoid globally scoping styles.
 
 The syntax `:local(.className)` can be used to declare `className` in the local scope. The local identifiers are exported by the module.
 
@@ -227,6 +227,33 @@ You can also disable or enforce minification with the `minimize` query parameter
 
 `require("css-loader?-minimize!./file.css")` (disabled)
 
+### Disable behavior
+
+`css-loader?-url` disables `url(...)` handling.
+
+`css-loader?-import` disables `@import` handling.
+
+### Camel case
+
+By default, the exported JSON keys mirror the class names. If you want to camelize class names (useful in Javascript), pass the query parameter `camelCase` to the loader.
+
+Example:
+
+`css-loader?camelCase`
+
+Usage:
+```css
+/* file.css */
+
+.class-name { /* ... */ }
+```
+
+```js
+// javascript
+
+require('file.css').className
+```
+
 ## License
 
 MIT (http://www.opensource.org/licenses/mit-license.php)

package/lib/getLocalIdent.js

@@ -12,5 +12,5 @@ module.exports = function getLocalIdent(loaderContext, localIdentName, localName
 	options.content = options.hashPrefix + request + "+" + localName;
 	localIdentName = localIdentName.replace(/\[local\]/gi, localName);
 	var hash = loaderUtils.interpolateName(loaderContext, localIdentName, options);
-	return hash.replace(new RegExp("[^a-zA-Z0-9\\-_\u00A0-\uFFFF]", "g"), "-").replace(/^([^a-zA-Z_])/, "_$1");
+	return hash.replace(new RegExp("[^a-zA-Z0-9\\-_\u00A0-\uFFFF]", "g"), "-").replace(/^((-?[0-9])|--)/, "_$1");
 };

package/lib/loader.js

@@ -64,28 +64,31 @@ module.exports = function(content, map) {
 				"[" + JSON.stringify(importItem.export) + "] + \"";
 		}
 
-		cssAsString = cssAsString.replace(result.importItemRegExpG, importItemMatcher.bind(this)).replace(result.urlItemRegExpG, function(item) {
-			var match = result.urlItemRegExp.exec(item);
-			var idx = +match[1];
-			var urlItem = result.urlItems[idx];
-			var url = urlItem.url;
-			idx = url.indexOf("?#");
-			if(idx < 0) idx = url.indexOf("#");
-			var urlRequest;
-			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) + ") + \"" +
-					url.substr(idx);
-			}
-			urlRequest = url;
-			return "\" + require(" + loaderUtils.stringifyRequest(this, urlRequest) + ") + \"";
-		}.bind(this));
+		cssAsString = cssAsString.replace(result.importItemRegExpG, importItemMatcher.bind(this));
+		if(query.url !== false) {
+			cssAsString = cssAsString.replace(result.urlItemRegExpG, function(item) {
+				var match = result.urlItemRegExp.exec(item);
+				var idx = +match[1];
+				var urlItem = result.urlItems[idx];
+				var url = urlItem.url;
+				idx = url.indexOf("?#");
+				if(idx < 0) idx = url.indexOf("#");
+				var urlRequest;
+				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) + ") + \"" +
+							url.substr(idx);
+				}
+				urlRequest = url;
+				return "\" + require(" + loaderUtils.stringifyRequest(this, urlRequest) + ") + \"";
+			}.bind(this));
+		}
 
 
 		var exportJs = compileExports(result, importItemMatcher.bind(this), camelCaseKeys);
 		if (exportJs) {
-			exportJs = "exports.locals = " + exportJs;
+			exportJs = "exports.locals = " + exportJs + ";";
 		}
 
 		var moduleJs;

package/lib/localsLoader.js

@@ -37,7 +37,7 @@ module.exports = function(content) {
 
 		var exportJs = compileExports(result, importItemMatcher.bind(this), camelCaseKeys);
 		if (exportJs) {
-			exportJs = "module.exports = " + exportJs;
+			exportJs = "module.exports = " + exportJs + ";";
 		}
 
 

package/lib/processCss.js

@@ -2,6 +2,7 @@
 	MIT License http://www.opensource.org/licenses/mit-license.php
 	Author Tobias Koppers @sokra
 */
+var formatCodeFrame = require("babel-code-frame");
 var Tokenizer = require("css-selector-tokenizer");
 var postcss = require("postcss");
 var loaderUtils = require("loader-utils");
@@ -22,36 +23,41 @@ var parserPlugin = postcss.plugin("css-loader-parser", function(options) {
 		var urlItems = [];
 
 		function replaceImportsInString(str) {
-			var tokens = str.split(/(\S+)/);
-			tokens = tokens.map(function(token) {
-				var importIndex = imports["$" + token];
-				if(typeof importIndex === "number") {
-					return "___CSS_LOADER_IMPORT___" + importIndex + "___";
-				}
-				return token;
-			});
-			return tokens.join("");
+			if(options.import) {
+				var tokens = str.split(/(\S+)/);
+				tokens = tokens.map(function (token) {
+					var importIndex = imports["$" + token];
+					if(typeof importIndex === "number") {
+						return "___CSS_LOADER_IMPORT___" + importIndex + "___";
+					}
+					return token;
+				});
+				return tokens.join("");
+			}
+			return str;
 		}
 
-		css.walkAtRules("import", function(rule) {
-			var values = Tokenizer.parseValues(rule.params);
-			var url = values.nodes[0].nodes[0];
-			if(url.type === "url") {
-				url = url.url;
-			} else if(url.type === "string") {
-				url = url.value;
-			} else throw rule.error("Unexpected format" + rule.params);
-			values.nodes[0].nodes.shift();
-			var mediaQuery = Tokenizer.stringifyValues(values);
-			if(loaderUtils.isUrlRequest(url, options.root) && options.mode === "global") {
-				url = loaderUtils.urlToRequest(url, options.root);
-			}
-			importItems.push({
-				url: url,
-				mediaQuery: mediaQuery
+		if(options.import) {
+			css.walkAtRules("import", function(rule) {
+				var values = Tokenizer.parseValues(rule.params);
+				var url = values.nodes[0].nodes[0];
+				if(url.type === "url") {
+					url = url.url;
+				} else if(url.type === "string") {
+					url = url.value;
+				} else throw rule.error("Unexpected format" + rule.params);
+				values.nodes[0].nodes.shift();
+				var mediaQuery = Tokenizer.stringifyValues(values);
+				if(loaderUtils.isUrlRequest(url, options.root) && options.mode === "global") {
+					url = loaderUtils.urlToRequest(url, options.root);
+				}
+				importItems.push({
+					url: url,
+					mediaQuery: mediaQuery
+				});
+				rule.remove();
 			});
-			rule.remove();
-		});
+		}
 
 		css.walkRules(function(rule) {
 			if(rule.selector === ":export") {
@@ -77,31 +83,39 @@ var parserPlugin = postcss.plugin("css-loader-parser", function(options) {
 			exports[exportName] = replaceImportsInString(exports[exportName]);
 		});
 
+		function processNode(item) {
+			switch (item.type) {
+				case "value":
+					item.nodes.forEach(processNode);
+					break;
+				case "nested-item":
+					item.nodes.forEach(processNode);
+					break;
+				case "item":
+					var importIndex = imports["$" + item.name];
+					if (typeof importIndex === "number") {
+						item.name = "___CSS_LOADER_IMPORT___" + importIndex + "___";
+					}
+					break;
+				case "url":
+					if (options.url && !/^#/.test(item.url) && loaderUtils.isUrlRequest(item.url, options.root)) {
+						item.stringType = "";
+						delete item.innerSpacingBefore;
+						delete item.innerSpacingAfter;
+						var url = item.url;
+						item.url = "___CSS_LOADER_URL___" + urlItems.length + "___";
+						urlItems.push({
+							url: url
+						});
+					}
+					break;
+			}
+		}
+
 		css.walkDecls(function(decl) {
 			var values = Tokenizer.parseValues(decl.value);
 			values.nodes.forEach(function(value) {
-				value.nodes.forEach(function(item) {
-					switch(item.type) {
-					case "item":
-						var importIndex = imports["$" + item.name];
-						if(typeof importIndex === "number") {
-							item.name = "___CSS_LOADER_IMPORT___" + importIndex + "___";
-						}
-						break;
-					case "url":
-						if(!/^#/.test(item.url) && loaderUtils.isUrlRequest(item.url, options.root)) {
-							item.stringType = "";
-							delete item.innerSpacingBefore;
-							delete item.innerSpacingAfter;
-							var url = item.url;
-							item.url = "___CSS_LOADER_URL___" + urlItems.length + "___";
-							urlItems.push({
-								url: url
-							});
-						}
-						break;
-					}
-				});
+				value.nodes.forEach(processNode);
 			});
 			decl.value = Tokenizer.stringifyValues(values);
 		});
@@ -129,18 +143,22 @@ module.exports = function processCss(inputSource, inputMap, options, callback) {
 
 	var parserOptions = {
 		root: root,
-		mode: options.mode
+		mode: options.mode,
+		url: query.url !== false,
+		import: query.import !== false
 	};
 
 	var pipeline = postcss([
 		localByDefault({
 			mode: options.mode,
 			rewriteUrl: function(global, url) {
-				if(!loaderUtils.isUrlRequest(url, root)) {
-					return url;
-				}
-				if(global) {
-					return loaderUtils.urlToRequest(url, root);
+				if(parserOptions.url){
+					if(!loaderUtils.isUrlRequest(url, root)) {
+						return url;
+					}
+					if(global) {
+						return loaderUtils.urlToRequest(url, root);
+					}
 				}
 				return url;
 			}
@@ -191,6 +209,43 @@ module.exports = function processCss(inputSource, inputMap, options, callback) {
 			urlItemRegExp: /___CSS_LOADER_URL___([0-9]+)___/
 		});
 	}).catch(function(err) {
-		callback(err);
+		if (err.name === 'CssSyntaxError') {
+			var wrappedError = new CSSLoaderError(
+				'Syntax Error',
+				err.reason,
+				err.line != null && err.column != null
+					? {line: err.line, column: err.column}
+					: null,
+				err.input.source
+			);
+			callback(wrappedError);
+		} else {
+			callback(err);
+		}
 	});
 };
+
+function formatMessage(message, loc, source) {
+	var formatted = message;
+	if (loc) {
+		formatted = formatted
+			+ ' (' + loc.line + ':' + loc.column + ')';
+	}
+	if (loc && source) {
+		formatted = formatted
+			+ '\n\n' + formatCodeFrame(source, loc.line, loc.column) + '\n';
+	}
+	return formatted;
+}
+
+function CSSLoaderError(name, message, loc, source, error) {
+	Error.call(this);
+	Error.captureStackTrace(this, CSSLoaderError);
+	this.name = name;
+	this.error = error;
+	this.message = formatMessage(message, loc, source);
+	this.hideStack = true;
+}
+
+CSSLoaderError.prototype = Object.create(Error.prototype);
+CSSLoaderError.prototype.constructor = CSSLoaderError;

package/package.json

@@ -1,18 +1,22 @@
 {
   "name": "css-loader",
-  "version": "0.22.0",
+  "version": "0.25.0",
   "author": "Tobias Koppers @sokra",
   "description": "css loader module for webpack",
+  "engines": {
+    "node": ">=0.12.0"
+  },
   "dependencies": {
-    "css-selector-tokenizer": "^0.5.1",
+    "babel-code-frame": "^6.11.0",
+    "css-selector-tokenizer": "^0.6.0",
     "cssnano": ">=2.6.1 <4",
     "loader-utils": "~0.2.2",
-    "object-assign": "^4.0.1",
     "lodash.camelcase": "^3.0.1",
+    "object-assign": "^4.0.1",
     "postcss": "^5.0.6",
-    "postcss-modules-extract-imports": "1.0.0-beta2",
-    "postcss-modules-local-by-default": "^1.0.0",
-    "postcss-modules-scope": "1.0.0-beta2",
+    "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",
     "source-list-map": "^0.1.4"
   },