Skip to content

Support for nested items #202

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Dec 22, 2015
Merged

Support for nested items #202

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b4a620d
added support for nested items
lemieux Dec 8, 2015
184810d
fix indentation with tabs
lemieux Dec 21, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 46 additions & 21 deletions lib/processCss.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For what reason is isValue tracked?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe it should be named differently, but it's basically to reuse the same processNode logic on nested properties... should probably be named isNested

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

isValue is always true here, because a nested item has this representation:

{
    type: "nested-item",
    name: name,
    nodes: [
        { type: "value", nodes: [...] }
    ]
}

So I think you could remove this check here and always use the true case.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

using the true case makes the background img 2 test and the font face tests fail.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If I remember correctly, it was because in the case where it's processing a value, the urls in it were not transformed.

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);
Expand Down
3 changes: 3 additions & 0 deletions test/urlTest.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)", ""]
]);
});