diff --git a/lib/processCss.js b/lib/processCss.js index 181f7a2a..7f42736f 100644 --- 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 index 50416ce3..ea4dba76 100644 --- 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 index beac30e6..1c58afe7 100644 --- 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 index b54bf9a8..29e8d75a 100644 --- 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");