added support for nested items

Author: lemieux

lib/processCss.js

@@ -77,30 +77,55 @@ var parserPlugin = postcss.plugin("css-loader-parser", function(options) {
 exports[exportName] = replaceImportsInString(exports[exportName]);
 });
 
+function processNode(item, isValue) {
+ switch (item.type) {
+case "value":
+ item.nodes.forEach(function(node){
+processNode(node, true);
+});
+ break;
+ case "nested-item":
+ item.nodes.forEach(function(node){
+processNode(node);
+});
+ break;
+ case "item":
+ var importIndex = imports["$" + item.name];
+ if (typeof importIndex === "number") {
+ item.name = "___CSS_LOADER_IMPORT___" + importIndex + "___";
+ }
+ break;
+ case "url":
+ if (!/^#/.test(item.url) && loaderUtils.isUrlRequest(item.url, options.root)) {
+ item.stringType = "";
+ delete item.innerSpacingBefore;
+ delete item.innerSpacingAfter;
+ var url;
+
+if(isValue) {
+if(loaderUtils.isUrlRequest(url, options.root) && options.mode === "global") {
+url = loaderUtils.urlToRequest(item.url, options.root);
+} else {
+url = item.url;
+}
+} else {
+url = item.url;
+}
+
+ item.url = "___CSS_LOADER_URL___" + urlItems.length + "___";
+ urlItems.push({
+ url: url
+ });
+ }
+ break;
+ }
+ }
+
 css.walkDecls(function(decl) {
 var values = Tokenizer.parseValues(decl.value);
 values.nodes.forEach(function(value) {
-value.nodes.forEach(function(item) {
-switch(item.type) {
-case "item":
-var importIndex = imports["$" + item.name];
-if(typeof importIndex === "number") {
-item.name = "___CSS_LOADER_IMPORT___" + importIndex + "___";
-}
-break;
-case "url":
-if(!/^#/.test(item.url) && loaderUtils.isUrlRequest(item.url, options.root)) {
-item.stringType = "";
-delete item.innerSpacingBefore;
-delete item.innerSpacingAfter;
-var url = item.url;
-item.url = "___CSS_LOADER_URL___" + urlItems.length + "___";
-urlItems.push({
-url: url
-});
-}
-break;
-}
+value.nodes.forEach(function(node){
+processNode(node);
 });
 });
 decl.value = Tokenizer.stringifyValues(values);

test/urlTest.js

@@ -50,4 +50,7 @@ describe("url", function() {
 test("keyframe background img", "@keyframes anim { background: green url('img.png') xyz }", [
 [1, "@keyframes anim { background: green url({./img.png}) xyz }", ""]
 ]);
+test("-webkit-image-set", "background-image: -webkit-image-set(url('url1x.png') 1x, url('url2x.png') 2x)", [
+[1, "background-image: -webkit-image-set(url({./url1x.png}) 1x, url({./url2x.png}) 2x)", ""]
+]);
 });