better parsing

fixes webpack#15
fixes webpack#5

Author: sokra

index.js

@@ -38,19 +38,19 @@ module.exports = function(content) {
 	var css = JSON.stringify(tree ? csso.translate(tree) : "");
 	var uriRegExp = /%CSSURL\[%(.*?)%\]CSSURL%/g;
 	css = css.replace(uriRegExp, function(str) {
-		var match = /^%CSSURL\[%(.*?)%\]CSSURL%$/.exec(str);
-		if(!loaderUtils.isUrlRequest(match[1], root)) return match[1];
-		var idx = match[1].indexOf("?");
-		if(idx < 0) idx = match[1].indexOf("#");
+		var match = /^%CSSURL\[%(["']?(.*?)["']?)%\]CSSURL%$/.exec(JSON.parse('"' + str + '"'));
+		var url = loaderUtils.parseString(match[2]);
+		if(!loaderUtils.isUrlRequest(match[2], root)) return JSON.stringify(match[1]).replace(/^"|"$/g, "");
+		var idx = url.indexOf("?");
+		if(idx < 0) idx = url.indexOf("#");
 		if(idx > 0) {
 			// in cases like url('webfont.eot?#iefix')
-			var url = JSON.parse("\"" + match[1].substr(0, idx) + "\"");
-			return "\"+require(" + JSON.stringify(loaderUtils.urlToRequest(url, root)) + ")+\"" + match[1].substr(idx);
+			var request = url.substr(0, idx);
+			return "\"+require(" + JSON.stringify(loaderUtils.urlToRequest(request, root)) + ")+\"" + url.substr(idx);
 		} else if(idx === 0) {
 			// only hash
-			return match[1];
+			return JSON.stringify(match[1]).replace(/^"|"$/g, "");
 		}
-		var url = JSON.parse("\"" + match[1] + "\"");
 		return "\"+require(" + JSON.stringify(loaderUtils.urlToRequest(url, root)) + ")+\"";
 	});
 	result.push(css);
@@ -81,9 +81,9 @@ function extractImports(tree) {
 			for(var j = 2; j < rule.length; j++) {
 				var item = rule[j];
 				if(item[0] === "string") {
-					imp.url = JSON.parse(item[1]);
+					imp.url = loaderUtils.parseString(item[1]);
 				} else if(item[0] === "uri") {
-					imp.url = item[1][0] === "string" ? JSON.parse(item[1][1]) : item[1][1];
+					imp.url = item[1][0] === "string" ? loaderUtils.parseString(item[1][1]) : item[1][1];
 				} else if(item[0] === "ident" && item[1] !== "url") {
 					imp.media.push(csso.translate(item));
 				} else if(item[0] !== "s" || imp.media.length > 0) {
@@ -128,7 +128,7 @@ function annotateUrls(tree) {
 				item[1] = "%CSSURL[%" + item[1] + "%]CSSURL%";
 				return;
 			case "string":
-				item[1] = "%CSSURL[%" + item[1].substring(1, item[1].length-1) + "%]CSSURL%";
+				item[1] = "%CSSURL[%" + item[1] + "%]CSSURL%";
 				return;
 			}
 		}

test/urlTest.js

@@ -46,6 +46,9 @@ describe("url", function() {
 	test("import", "@import url(test.css);\n.class { a: b c d; }",
 					["require("+JSON.stringify("!"+path.join(__dirname, "..", "index.js")+"!./test.css")+")",
 						"\"\\n.class { a: b c d; }\""]);
+	test("import 2", "@import url('test.css');",
+					["require("+JSON.stringify("!"+path.join(__dirname, "..", "index.js")+"!./test.css")+")",
+					"\"\""]);
 	test("import with media", "@import url(~test/css) screen and print;\n.class { a: b c d; }",
 					["\"@media screen and print{\"",
 						"require("+JSON.stringify("!"+path.join(__dirname, "..", "index.js")+"!test/css")+")",
@@ -59,13 +62,18 @@ describe("url", function() {
 					["\".class { background: green url( \"+require(\"./img.png\")+\" ) xyz }\""]);
 	test("background img 2", ".class { background: green url(~img/png ) url(aaa) xyz }",
 					["\".class { background: green url(\"+require(\"img/png\")+\" ) url(\"+require(\"./aaa\")+\") xyz }\""]);
+	test("background img 3", ".class { background: green url( 'img.png' ) xyz }",
+					["\".class { background: green url( \"+require(\"./img.png\")+\" ) xyz }\""]);
 	test("background img absolute", ".class { background: green url(/img.png) xyz }",
 					["\".class { background: green url(/img.png) xyz }\""]);
 	test("background img absolute with root", ".class { background: green url(/img.png) xyz }",
 					["\".class { background: green url(\"+require(\"./img.png\")+\") xyz }\""], "?root=.");
 	test("background img external",
 		".class { background: green url(data:image/png;base64,AAA) url(http://example.com/image.jpg) url(//example.com/image.png) xyz }",
 		["\".class { background: green url(data:image/png;base64,AAA) url(http://example.com/image.jpg) url(//example.com/image.png) xyz }\""]);
+	test("background img external data",
+		".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>\") }",
+		["\".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>\\\") }\""]);
 	test("filter hash",
 		".highlight { filter: url(#highlight); }",
 		["\".highlight { filter: url(#highlight); }\""]);