vitalif
/
prettier
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat(css): improve `@nest` at rule output (#3976)

master
Evilebot Tnawi 2018-02-15 20:45:33 +03:00 committed by GitHub
parent cce8924ef3
commit 0f067d3832
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 45 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/language-css/printer-postcss.js
View File

@ -285,18 +285,24 @@ function genericPrint(path, options, print) {
const atRuleAncestorNode = getAncestorNode(path, "css-atrule");
const insideInExtend =
atRuleAncestorNode && atRuleAncestorNode.name === "extend";
const insideInCustomSelector =
const insideInCustomSelectorAtRule =
atRuleAncestorNode && atRuleAncestorNode.name === "custom-selector";
const insideInNestAtRule =
atRuleAncestorNode && atRuleAncestorNode.name === "nest";
return group(
concat([
insideInCustomSelector
insideInCustomSelectorAtRule
? concat([atRuleAncestorNode.customSelector, line])
: "",
join(
concat([
",",
insideInExtend || insideInCustomSelector ? line : hardline
insideInExtend ||
insideInCustomSelectorAtRule ||
insideInNestAtRule
? line
: hardline
]),
path.map(print, "nodes")
)

33
tests/css_postcss_plugins/__snapshots__/jsfmt.spec.js.snap
View File

@ -326,6 +326,15 @@ a {
}
}
}
a {
order: 1;
@nest very-very-very-very-very-very-very-very-very-long-selector &, very-very-very-very-very-very-very-very-very-long-selector & {
order: 2;
}
@nest very-very-very-very-very-very-very-very-very-long-selector + very-very-very-very-very-very-very-very-very-long-selector &, very-very-very-very-very-very-very-very-very-long-selector very-very-very-very-very-very-very-very-very-long-selector & {
order: 2;
}
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
a {
order: 1;
@ -395,11 +404,9 @@ b {
a,
b {
order: 1;
@nest & c,
& d {
@nest & c, & d {
order: 2;
@nest & e,
& f {
@nest & e, & f {
order: 3;
}
order: 4;
@ -468,8 +475,7 @@ f {
a,
b {
order: 1;
@nest c,
d {
@nest c, d {
order: 2;
}
}
@ -529,5 +535,20 @@ a {
}
}
}
a {
order: 1;
@nest very-very-very-very-very-very-very-very-very-long-selector &,
very-very-very-very-very-very-very-very-very-long-selector & {
order: 2;
}
@nest very-very-very-very-very-very-very-very-very-long-selector
+ very-very-very-very-very-very-very-very-very-long-selector
&,
very-very-very-very-very-very-very-very-very-long-selector
very-very-very-very-very-very-very-very-very-long-selector
& {
order: 2;
}
}
`;

9
tests/css_postcss_plugins/postcss-nesting.css
View File

@ -190,3 +190,12 @@ a {
}
}
}
a {
order: 1;
@nest very-very-very-very-very-very-very-very-very-long-selector &, very-very-very-very-very-very-very-very-very-long-selector & {
order: 2;
}
@nest very-very-very-very-very-very-very-very-very-long-selector + very-very-very-very-very-very-very-very-very-long-selector &, very-very-very-very-very-very-very-very-very-long-selector very-very-very-very-very-very-very-very-very-long-selector & {
order: 2;
}
}