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!