Merge branch 'master' into externals

* master:
  fix: case insensitivity of @import (webpack-contrib#514)
  chore: update comment (webpack-contrib#515)
  docs(README): improve importLoaders section and example (webpack-contrib#512)
  docs(README): fix link (webpack-contrib#508)
  docs(README): fix typo in example (webpack-contrib#507)
  docs(README): fix typo in maintainers link (webpack-contrib#505)
  fix: imported variables are replaced in exports if followed by a comma (webpack-contrib#504)
  docs(README): standardize (webpack-contrib#503)
  test: `charset` directive (webpack-contrib#502)
  fix: url with a trailing space is now handled correctly (webpack-contrib#494)
  fix: use `btoa` instead `Buffer` (webpack-contrib#501)
  test: add test for escaped characters (webpack-contrib#493)
  test: add tests for encoded svg data uri (webpack-contrib#492)
  test: add tests when css contain data uri and source maps are enabled (webpack-contrib#491)
  fix: loader now correctly handles `url` with space(s) (webpack-contrib#495)

lib/css-base.js

@@ -54,7 +54,7 @@ function cssWithMappingToString(item, useSourceMap) {
 		return content;
 	}
 
-	if (useSourceMap) {
+	if (useSourceMap && typeof btoa === 'function') {
 		var sourceMapping = toComment(cssMapping);
 		var sourceURLs = cssMapping.sources.map(function (source) {
 			return '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */'
@@ -68,8 +68,9 @@ function cssWithMappingToString(item, useSourceMap) {
 
 // Adapted from convert-source-map (MIT)
 function toComment(sourceMap) {
-  var base64 = new Buffer(JSON.stringify(sourceMap)).toString('base64');
-  var data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64;
+	// eslint-disable-next-line no-undef
+	var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));
+	var data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64;
 
-  return '/*# ' + data + ' */';
+	return '/*# ' + data + ' */';
 }

lib/processCss.js

@@ -13,6 +13,7 @@ var localByDefault = require("postcss-modules-local-by-default");
 var extractImports = require("postcss-modules-extract-imports");
 var modulesScope = require("postcss-modules-scope");
 var modulesValues = require("postcss-modules-values");
+var valueParser = require('postcss-value-parser');
 
 var parserPlugin = postcss.plugin("css-loader-parser", function(options) {
 	return function(css) {
@@ -23,21 +24,24 @@ var parserPlugin = postcss.plugin("css-loader-parser", function(options) {
 
 		function replaceImportsInString(str) {
 			if(options.import) {
-				var tokens = str.split(/(\S+)/);
-				tokens = tokens.map(function (token) {
+				var tokens = valueParser(str);
+				tokens.walk(function (node) {
+					if (node.type !== 'word') {
+						return;
+					}
+					var token = node.value;
 					var importIndex = imports["$" + token];
 					if(typeof importIndex === "number") {
-						return "___CSS_LOADER_IMPORT___" + importIndex + "___";
+						node.value = "___CSS_LOADER_IMPORT___" + importIndex + "___";
 					}
-					return token;
-				});
-				return tokens.join("");
+				})
+				return tokens.toString();
 			}
 			return str;
 		}
 
 		if(options.import) {
-			css.walkAtRules("import", 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") {
@@ -98,7 +102,10 @@ var parserPlugin = postcss.plugin("css-loader-parser", function(options) {
 					break;
 				case "url":
 					if (options.url && !/^#/.test(item.url) && loaderUtils.isUrlRequest(item.url, options.root)) {
-						item.stringType = "";
+						// Don't remove quotes around url when contain space
+						if (item.url.indexOf(" ") === -1) {
+							item.stringType = "";
+						}
 						delete item.innerSpacingBefore;
 						delete item.innerSpacingAfter;
 						var url = item.url;
@@ -153,6 +160,8 @@ module.exports = function processCss(inputSource, inputMap, options, callback) {
 			mode: options.mode,
 			rewriteUrl: function(global, url) {
 				if(parserOptions.url){
+					url = url.trim(" ");
+
 					if(!loaderUtils.isUrlRequest(url, root)) {
 						return url;
 					}

package.json

@@ -23,6 +23,7 @@
     "postcss-modules-local-by-default": "^1.0.1",
     "postcss-modules-scope": "^1.0.0",
     "postcss-modules-values": "^1.1.0",
+    "postcss-value-parser": "^3.3.0",
     "source-list-map": "^0.1.7"
   },
   "devDependencies": {

test/cssBaseTest.js

@@ -1,8 +1,26 @@
-/*globals describe it*/
+/*eslint-env mocha*/
 
 var base = require("../lib/css-base");
 
 describe("css-base", function() {
+	before(function() {
+		global.btoa = function btoa(str) {
+			var buffer = null;
+
+			if (str instanceof Buffer) {
+				buffer = str;
+			} else {
+				buffer = new Buffer(str.toString(), 'binary');
+			}
+
+			return buffer.toString('base64');
+		}
+	})
+
+	after(function () {
+		global.btoa = null;
+	})
+
 	it("should toString a single module", function() {
 		var m = base();
 		m.push([1, "body { a: 1; }", ""]);
@@ -46,4 +64,17 @@ describe("css-base", function() {
 		}]);
 		m.toString().should.be.eql("body { a: 1; }\n/*# sourceURL=webpack://./path/to/test.scss */\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJmaWxlIjoidGVzdC5zY3NzIiwic291cmNlcyI6WyIuL3BhdGgvdG8vdGVzdC5zY3NzIl0sIm1hcHBpbmdzIjoiQUFBQTsiLCJzb3VyY2VSb290Ijoid2VicGFjazovLyJ9 */");
 	});
+	it("should toString without source mapping if btoa not avalibale", function() {
+		global.btoa = null;
+		var m = base(true);
+		m.push([1, "body { a: 1; }", "", {
+			file: "test.scss",
+			sources: [
+				'./path/to/test.scss'
+			],
+			mappings: "AAAA;",
+			sourceRoot: "webpack://"
+		}]);
+		m.toString().should.be.eql("body { a: 1; }");
+	});
 });

test/importTest.js

@@ -9,6 +9,12 @@ describe("import", function() {
 	], "", {
 		"./test.css": [[2, ".test{a: b}", ""]]
 	});
+	test("import camelcase", "@IMPORT url(test.css);\n.class { a: b c d; }", [
+		[2, ".test{a: b}", ""],
+		[1, ".class { a: b c d; }", ""]
+	], "", {
+		"./test.css": [[2, ".test{a: b}", ""]]
+	});
 	test("import with string", "@import \"test.css\";\n.class { a: b c d; }", [
 		[2, ".test{a: b}", ""],
 		[1, ".class { a: b c d; }", ""]

test/moduleTestCases/urls/expected.css

@@ -1,6 +1,8 @@
 ._a_ {
 	background: url({./module});
 	background: url({./module});
+	background: url("{./module module}");
+	background: url('{./module module}');
 	background: url({./module});
 	background: url({./module}#?iefix);
 	background: url("#hash");

test/moduleTestCases/urls/source.css

@@ -1,6 +1,8 @@
 .a {
 	background: url(./module);
 	background: url("./module");
+	background: url("./module module");
+	background: url('./module module');
 	background: url('./module');
 	background: url("./module#?iefix");
 	background: url("#hash");

test/simpleTest.js

@@ -18,18 +18,32 @@ describe("simple", function() {
 	test("simple2", ".class { a: b c d; }\n.two {}", [
 		[1, ".class { a: b c d; }\n.two {}", ""]
 	]);
+	test("escape characters (uppercase)", ".class { content: \"\\F10C\" }", [
+		[1, ".class { content: \"\\F10C\" }", ""]
+	]);
+	// Need uncomment after resolve https://github.com/css-modules/postcss-modules-local-by-default/issues/108
+	/*test("escape characters (lowercase)", ".class { content: \"\\f10C\" }", [
+		[1, ".class { content: \"\\f10C\" }", ""]
+	]);*/
+	// Need uncomment after resolve https://github.com/mathiasbynens/cssesc/issues/10
+	/*test("escape characters (two)", ".class { content: \"\\F10C \\F10D\" }", [
+		[1, ".class { content: \"\\F10C \\F10D\" }", ""]
+	]);*/
 	testMinimize("minimized simple", ".class { a: b c d; }", [
 		[1, ".class{a:b c d}", ""]
 	]);
-  testError("error formatting", ".some {\n invalid css;\n}", function(err) {
-    assert.equal(err.message, [
-      'Unknown word (2:2)',
-      '',
-      '  1 | .some {',
-      '> 2 |  invalid css;',
-      '    |  ^',
-      '  3 | }',
-      '',
-    ].join('\n'));
-  });
+	test("charset directive", "@charset \"UTF-8\";\n .class { a: b c d; }", [
+		[1, "@charset \"UTF-8\";\n .class { a: b c d; }", ""]
+	]);
+	testError("error formatting", ".some {\n invalid css;\n}", function(err) {
+		assert.equal(err.message, [
+			'Unknown word (2:2)',
+			'',
+			'  1 | .some {',
+			'> 2 |  invalid css;',
+			'    |  ^',
+			'  3 | }',
+			'',
+		].join('\n'));
+	});
 });

test/sourceMapTest.js

@@ -44,6 +44,40 @@ describe("source maps", function() {
 			version: 3
 		}]
 	]);
+	testMap("generate sourceMap (1 loader, data url)", ".class { background-image: url(\"data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 26' fill='%23007aff'><rect width='4' height='4'/><rect x='8' y='1' width='34' height='2'/><rect y='11' width='4' height='4'/><rect x='8' y='12' width='34' height='2'/><rect y='22' width='4' height='4'/><rect x='8' y='23' width='34' height='2'/></svg>\"); }", undefined, {
+		loaders: [{request: "/path/css-loader"}],
+		options: { context: "/" },
+		resource: "/folder/test.css",
+		request: "/path/css-loader!/folder/test.css",
+		query: "?sourceMap"
+	}, [
+		[1,  ".class { background-image: url(\"data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 26' fill='%23007aff'><rect width='4' height='4'/><rect x='8' y='1' width='34' height='2'/><rect y='11' width='4' height='4'/><rect x='8' y='12' width='34' height='2'/><rect y='22' width='4' height='4'/><rect x='8' y='23' width='34' height='2'/></svg>\"); }", "", {
+			file: 'test.css',
+			mappings: 'AAAA,SAAS,6WAA6W,EAAE',
+			names: [],
+			sourceRoot: '',
+			sources: [ '/folder/test.css' ],
+			sourcesContent: [ '.class { background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 42 26\' fill=\'%23007aff\'><rect width=\'4\' height=\'4\'/><rect x=\'8\' y=\'1\' width=\'34\' height=\'2\'/><rect y=\'11\' width=\'4\' height=\'4\'/><rect x=\'8\' y=\'12\' width=\'34\' height=\'2\'/><rect y=\'22\' width=\'4\' height=\'4\'/><rect x=\'8\' y=\'23\' width=\'34\' height=\'2\'/></svg>"); }' ],
+			version: 3
+		}]
+	]);
+	testMap("generate sourceMap (1 loader, encoded data url)", ".class { background-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2042%2026%27%20fill%3D%27%23007aff%27%3E%3Crect%20width%3D%274%27%20height%3D%274%27%2F%3E%3Crect%20x%3D%278%27%20y%3D%271%27%20width%3D%2734%27%20height%3D%272%27%2F%3E%3Crect%20y%3D%2711%27%20width%3D%274%27%20height%3D%274%27%2F%3E%3Crect%20x%3D%278%27%20y%3D%2712%27%20width%3D%2734%27%20height%3D%272%27%2F%3E%3Crect%20y%3D%2722%27%20width%3D%274%27%20height%3D%274%27%2F%3E%3Crect%20x%3D%278%27%20y%3D%2723%27%20width%3D%2734%27%20height%3D%272%27%2F%3E%3C%2Fsvg%3E\"); }", undefined, {
+		loaders: [{request: "/path/css-loader"}],
+		options: { context: "/" },
+		resource: "/folder/test.css",
+		request: "/path/css-loader!/folder/test.css",
+		query: "?sourceMap"
+	}, [
+		[1,  ".class { background-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2042%2026%27%20fill%3D%27%23007aff%27%3E%3Crect%20width%3D%274%27%20height%3D%274%27%2F%3E%3Crect%20x%3D%278%27%20y%3D%271%27%20width%3D%2734%27%20height%3D%272%27%2F%3E%3Crect%20y%3D%2711%27%20width%3D%274%27%20height%3D%274%27%2F%3E%3Crect%20x%3D%278%27%20y%3D%2712%27%20width%3D%2734%27%20height%3D%272%27%2F%3E%3Crect%20y%3D%2722%27%20width%3D%274%27%20height%3D%274%27%2F%3E%3Crect%20x%3D%278%27%20y%3D%2723%27%20width%3D%2734%27%20height%3D%272%27%2F%3E%3C%2Fsvg%3E\"); }", "", {
+			file: 'test.css',
+			mappings: 'AAAA,SAAS,mmBAAmmB,EAAE',
+			names: [],
+			sourceRoot: '',
+			sources: [ '/folder/test.css' ],
+			sourcesContent: [ '.class { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2042%2026%27%20fill%3D%27%23007aff%27%3E%3Crect%20width%3D%274%27%20height%3D%274%27%2F%3E%3Crect%20x%3D%278%27%20y%3D%271%27%20width%3D%2734%27%20height%3D%272%27%2F%3E%3Crect%20y%3D%2711%27%20width%3D%274%27%20height%3D%274%27%2F%3E%3Crect%20x%3D%278%27%20y%3D%2712%27%20width%3D%2734%27%20height%3D%272%27%2F%3E%3Crect%20y%3D%2722%27%20width%3D%274%27%20height%3D%274%27%2F%3E%3Crect%20x%3D%278%27%20y%3D%2723%27%20width%3D%2734%27%20height%3D%272%27%2F%3E%3C%2Fsvg%3E"); }' ],
+			version: 3
+		}]
+	]);
 	testMap("generate sourceMap (2 loaders)", ".class { a: b c d; }", undefined, {
 		loaders: [{request: "/path/css-loader"}, {request: "/path/sass-loader"}],
 		options: { context: "/" },