css-loader 0.23.1 → 0.26.1

package/.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,15 @@
+<!-- Before creating an issue please make sure you are using the latest version of css-loader. -->
+
+**Do you want to request a *feature* or report a *bug*?**
+<!-- Please ask questions on StackOverflow or the webpack Gitter (https://gitter.im/webpack/webpack). Questions will be closed. -->
+
+**What is the current behavior?**
+
+**If the current behavior is a bug, please provide the steps to reproduce.**
+<!-- A great way to do this is to provide your configuration via a GitHub gist. -->
+
+**What is the expected behavior?**
+
+**If this is a feature request, what is motivation or use case for changing the behavior?**
+
+**Please mention other relevant information such as your webpack version, Node.js version and Operating System.**

package/.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,18 @@
+<!-- Thanks for submitting a pull request! Please provide enough information so that others can review your pull request. -->
+
+**What kind of change does this PR introduce?**
+<!-- E.g. a bugfix, feature, refactoring, build related change, etc… -->
+
+**Did you add tests for your changes?**
+
+**If relevant, did you update the README?**
+
+**Summary**
+
+<!-- Explain the **motivation** for making this change. What existing problem does the pull request solve? -->
+<!-- Try to link to an open issue for more information. -->
+
+**Does this PR introduce a breaking change?**
+<!-- If this PR introduces a breaking change, please describe the impact and a migration path for existing applications. -->
+
+**Other information**

package/README.md

@@ -9,7 +9,7 @@
 [Documentation: Using loaders](http://webpack.github.io/docs/using-loaders.html)
 
 ``` javascript
-var css = require("css!./file.css");
+var css = require("css-loader!./file.css");
 // => returns css code from file.css, resolves imports and url(...)
 ```
 
@@ -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.
 
@@ -108,6 +108,27 @@ You can use `:local(#someId)`, but this is not recommended. Use classes instead
 
 You can configure the generated ident with the `localIdentName` query parameter (default `[hash:base64]`). Example: `css-loader?localIdentName=[path][name]---[local]---[hash:base64:5]` for easier debugging.
 
+You can also specify the absolute path to your custom `getLocalIdent` function to generate classname based on a different schema. Note that this requires `webpack@2` since to be able to pass function in. For example:
+
+```js
+{
+    test: /\.css$/,
+    loaders: [
+        {
+            loader: 'css-loader',
+            query: {
+                modules: true,
+                importLoaders: 1,
+                getLocalIdent: function (loaderContext, localIdentName, localName, options) {
+                  return 'whatever_random_class_name'
+                }
+            }
+        }
+    ]
+},
+```
+
+
 Note: For prerendering with extract-text-webpack-plugin you should use `css-loader/locals` instead of `style-loader!css-loader` **in the prerendering bundle**. It doesn't embed CSS but only exports the identifier mappings.
 
 ### CSS Modules
@@ -204,9 +225,9 @@ The query parameter `importLoaders` allow to configure which loaders should be a
 Examples:
 
 ``` js
-require("style-loader!css-loader?importLoaders=1!autoprefixer-loader!...")
+require("style-loader!css-loader?importLoaders=1!postcss-loader!...")
 // => imported resources are handled this way:
-require("css-loader?importLoaders=1!autoprefixer-loader!...")
+require("css-loader?importLoaders=1!postcss-loader!...")
 
 require("style-loader!css-loader!stylus-loader!...")
 // => imported resources are handled this way:
@@ -219,7 +240,7 @@ This may change in the future, when the module system (i. e. webpack) supports l
 
 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 some options to it. cssnano is used for minification and you find a [list of options here](http://cssnano.co/options/). Just provide them as query parameter: i. e. `require("css-loader?-autoprefixer")` to disable removing of deprecated vendor prefixes.
+In some cases the minification is destructive to the css, so you can provide some options to it. cssnano is used for minification and you find a [list of options here](http://cssnano.co/options/). Just provide them as query parameter: i. e. `require("css-loader?-colormin")` to disable making color values as small as possible.
 
 You can also disable or enforce minification with the `minimize` query parameter.
 
@@ -233,6 +254,27 @@ You can also disable or enforce minification with the `minimize` query parameter
 
 `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/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");
@@ -131,7 +132,6 @@ var parserPlugin = postcss.plugin("css-loader-parser", function(options) {
 });
 
 module.exports = function processCss(inputSource, inputMap, options, callback) {
-
 	var query = options.query;
 	var root = query.root;
 	var context = query.context;
@@ -140,6 +140,8 @@ module.exports = function processCss(inputSource, inputMap, options, callback) {
 	var forceMinimize = query.minimize;
 	var minimize = typeof forceMinimize !== "undefined" ? !!forceMinimize : options.minimize;
 
+	var customGetLocalIdent = query.getLocalIdent || getLocalIdent;
+	
 	var parserOptions = {
 		root: root,
 		mode: options.mode,
@@ -165,8 +167,8 @@ module.exports = function processCss(inputSource, inputMap, options, callback) {
 		extractImports(),
 		modulesValues,
 		modulesScope({
-			generateScopedName: function(exportName) {
-				return getLocalIdent(options.loaderContext, localIdentName, exportName, {
+			generateScopedName: function generateScopedName (exportName) {
+				return customGetLocalIdent(options.loaderContext, localIdentName, exportName, {
 					regExp: localIdentRegExp,
 					hashPrefix: query.hashPrefix || "",
 					context: context
@@ -178,7 +180,7 @@ module.exports = function processCss(inputSource, inputMap, options, callback) {
 
 	if(minimize) {
 		var minimizeOptions = assign({}, query);
-		["zindex", "normalizeUrl", "discardUnused", "mergeIdents", "reduceIdents"].forEach(function(name) {
+		["zindex", "normalizeUrl", "discardUnused", "mergeIdents", "reduceIdents", "autoprefixer"].forEach(function(name) {
 			if(typeof minimizeOptions[name] === "undefined")
 				minimizeOptions[name] = false;
 		});
@@ -208,6 +210,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,14 +1,18 @@
 {
   "name": "css-loader",
-  "version": "0.23.1",
+  "version": "0.26.1",
   "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.7.0",
     "cssnano": ">=2.6.1 <4",
     "loader-utils": "~0.2.2",
+    "lodash.camelcase": "^4.3.0",
     "object-assign": "^4.0.1",
-    "lodash.camelcase": "^3.0.1",
     "postcss": "^5.0.6",
     "postcss-modules-extract-imports": "^1.0.0",
     "postcss-modules-local-by-default": "^1.0.1",
@@ -19,9 +23,9 @@
   "devDependencies": {
     "codecov.io": "^0.1.2",
     "coveralls": "^2.11.2",
-    "istanbul": "^0.3.13",
-    "mocha": "^2.2.4",
-    "should": "^7.0.1"
+    "istanbul": "^0.4.5",
+    "mocha": "^3.1.2",
+    "should": "^11.1.1"
   },
   "scripts": {
     "test": "mocha",