fix: loader now correctly handles url with space(s) (#495)

webpack-contrib · Apr 17, 2017 · 534ea55 · 534ea55
1 parent 2ee7552
commit 534ea55
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 1 deletion.
diff --git a/lib/processCss.js b/lib/processCss.js
@@ -98,12 +98,15 @@ 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 = "";
+						if (item.url.indexOf(" ") === -1) {
+							item.stringType = "";
+						}
 						delete item.innerSpacingBefore;
 						delete item.innerSpacingAfter;
 						var url = item.url;
 						item.url = "___CSS_LOADER_URL___" + urlItems.length + "___";
 						urlItems.push({
+							// Add quotes aroung url when contain space
 							url: url
 						});
 					}

diff --git a/test/moduleTestCases/urls/expected.css b/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");

diff --git a/test/moduleTestCases/urls/source.css b/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");

diff --git a/test/urlTest.js b/test/urlTest.js
@@ -12,6 +12,12 @@ describe("url", function() {
 	test("background img 3", ".class { background: green url( 'img.png' ) xyz }", [
 		[1, ".class { background: green url({./img.png}) xyz }", ""]
 	]);
+	test("background img contain space in name", ".class { background: green url( \"img img.png\" ) xyz }", [
+		[1, ".class { background: green url(\"{./img img.png}\") xyz }", ""]
+	]);
+	test("background 2 img contain space in name", ".class { background: green url( 'img img.png' ) xyz }", [
+		[1, ".class { background: green url('{./img img.png}') xyz }", ""]
+	]);
 	test("background img absolute", ".class { background: green url(/img.png) xyz }", [
 		[1, ".class { background: green url(/img.png) xyz }", ""]
 	]);
@@ -63,6 +69,12 @@ describe("url", function() {
 	test("background img 3 with url", ".class { background: green url( 'img.png' ) xyz }", [
 		[1, ".class { background: green url( 'img.png' ) xyz }", ""]
 	], "?-url");
+	test("background img with url contain space in name", ".class { background: green url( \"img img.png\" ) xyz }", [
+		[1, ".class { background: green url( \"img img.png\" ) xyz }", ""]
+	], "?-url");
+	test("background 2 img with url contain space in name", ".class { background: green url( 'img img.png' ) xyz }", [
+		[1, ".class { background: green url( 'img img.png' ) xyz }", ""]
+	], "?-url");
 	test("background img absolute with url", ".class { background: green url(/img.png) xyz }", [
 		[1, ".class { background: green url(/img.png) xyz }", ""]
 	], "?-url");