Repository navigation
Declarations in wrong specificity order #92
Description
Steps to reproduce
Run postcss-cli with the following command:
postcss test.css -u postcss-nestedGiven the following input from test.css:
.a {
.b {
c: d;
&e {
f: g
}
h: i
}
}I am given the following output:
.a .b {
c: d;
h: i;
}
.a .be {
f: g
}Issues
- Both rules
.a .band.a .behave the same specificity, so theh: ideclaration should come at the very end in a new.a .brule, based on the order in which declarations were originally defined (not how Sass does it, but more accurate). Theh: ideclaration was given a semi-colon that it didn't previously have. This might be an issue with the structure of the ASTraws, as the rule defines the semi-colon and not the declaration?All rule indentation should be at the root of the document (definitely how Sass does it).Sending the AST directly throughpostcss-nesteddoesn't completely unwrap the rules. I have to call the plugin multiple times to get complete unwrapping. If I have rules nested 4 levels deep, I have to call the plugin 4x!
For the last issue, this is what I was doing from within a custom plugin:
const nested = postcssNested();
return (root, result) => {
// do stuff
nested(root, result);
};Also, hi @ai! 👋 Long time, no see!
Activity
ai commentedon Jun 7, 2020
Yeap, let’s fix it. Can you send PR, because I am working on another project right now?
I decided that
postcss-nestedwill not take care bout good formation. It is hard and most of the users will even not see this.It could increase code 2x-3x times, especially if we will take care of all use cases.
It is very strange because PostCSS itself does exactly the same
nested(root, result)call.Can you create a simple test stand to reproduce the issue?
Nice to see you again =^_^=. I started to use TypeScript in some of my projects. Also, I am planning to visit Austin in August.
jednano commentedon Jun 8, 2020
newRule.append. Turns out you also can't loop throughcontainer.nodes, which is what I was doing as well. Would love a generator method so I can dofor (const node of rule.nodes()), because then I cancontinueandbreakand evenyieldif I wanted to.I sent you an email with my phone number for when you come to Austin 😃
[-]Declarations in wrong order, extra semi, indentation, multiple passes[/-][+]Declarations in wrong specificity order[/+]ai commentedon Jul 4, 2020
@jedmao I created a task https://cultofmartians.com/tasks/postcss-nested.html#task
jednano commentedon Jul 4, 2020
demikhovr commentedon Jul 4, 2020
Hi, I created PR #93
ai commentedon Jul 4, 2020
The fix by @demikhovr was released in 4.2.2
Keep declarations after nested rules inside at-rules (#180)