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

Improve the printing of CSS at-rules (#3896) 

fix(css): improve at rules print
master
Evilebot Tnawi 2018-02-07 13:33:10 +03:00 committed by GitHub
parent 9e6bd15ade
commit 0e1358b5ca
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 281 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -405,35 +405,24 @@ function genericPrint(path, options, print) {
if (
i !== node.groups.length - 1 &&
node.groups[i + 1].raws &&
node.groups[i + 1].raws.before !== ""
node.groups[i + 1].raws.before !== "" &&
node.groups[i].value !== ":"
) {
const isNextValueOperator =
node.groups[i + 1].type === "value-operator";
const isNextMathOperator =
isNextValueOperator &&
["+", "-", "/", "*", "%"].indexOf(node.groups[i + 1].value) !== -1;
const isNextValueWord = node.groups[i + 1].type === "value-word";
const isNextMathOperator = isMathOperatorNode(node.groups[i + 1]);
const isNextEqualityOperator =
isControlDirective &&
isNextValueWord &&
["==", "!="].indexOf(node.groups[i + 1].value) !== -1;
isControlDirective && isEqualityOperatorNode(node.groups[i + 1]);
const isNextRelationalOperator =
isControlDirective &&
isNextValueWord &&
["<", ">", "<=", ">="].indexOf(node.groups[i + 1].value) !== -1;
isControlDirective && isRelationalOperatorNode(node.groups[i + 1]);
const isNextIfElseKeyword =
isControlDirective &&
["and", "or", "not"].indexOf(node.groups[i + 1].value) !== -1;
isControlDirective && isIfElseKeywordNode(node.groups[i + 1]);
const isNextEachKeyword =
isControlDirective &&
["in"].indexOf(node.groups[i + 1].value) !== -1;
isControlDirective && isEachKeywordNode(node.groups[i + 1]);
const isForKeyword =
atRuleAncestorNode &&
atRuleAncestorNode.name === "for" &&
["from", "through", "end"].indexOf(node.groups[i].value) !== -1;
isForKeywordNode(node.groups[i]);
const isNextForKeyword =
isControlDirective &&
["from", "through", "end"].indexOf(node.groups[i + 1].value) !== -1;
isControlDirective && isForKeywordNode(node.groups[i + 1]);
const IsNextColon = node.groups[i + 1].value === ":";
if (isGridValue) {
@ -535,12 +524,22 @@ function genericPrint(path, options, print) {
}
case "value-paren": {
if (node.raws.before !== "") {
const parentParentNode = path.getParentNode(2);
const parentParentNode = path.getParentNode(1);
const insideInParens =
parentParentNode && parentParentNode.type === "value-paren_group";
const parentParentParentNode = path.getParentNode(2);
const isFunction =
parentParentNode && parentParentNode.type === "value-func";
parentParentParentNode &&
parentParentParentNode.type === "value-func";
const declAncestorNode = getAncestorNode(path, "css-decl");
const isMap = declAncestorNode && declAncestorNode.prop.startsWith("$");
return concat([isFunction ? "" : line, node.value]);
return concat([
isFunction || insideInParens || isMap ? "" : line,
node.value
]);
}
return node.value;
}
case "value-number": {
@ -556,7 +555,22 @@ function genericPrint(path, options, print) {
return node.value;
}
case "value-colon": {
return node.value;
const parent = path.getParentNode();
const index =
parent &&
parent.groups &&
parent.groups.length > 0 &&
parent.groups.indexOf(node);
const prevProgidProperty =
index && parent.groups[index - 1].value === "progid";
const valueFuncAncestorNode = getAncestorNode(path, "value-func");
const insideInURLFunc =
valueFuncAncestorNode && valueFuncAncestorNode.value === "url";
return concat([
node.value,
prevProgidProperty || insideInURLFunc ? "" : line
]);
}
case "value-comma": {
return concat([node.value, " "]);
@ -577,6 +591,60 @@ function genericPrint(path, options, print) {
}
}
function isForKeywordNode(node) {
return (
node.type &&
node.type === "value-word" &&
node.value &&
["from", "through", "end"].indexOf(node.value) !== -1
);
}
function isIfElseKeywordNode(node) {
return (
node.type &&
node.type === "value-word" &&
node.value &&
["and", "or", "not"].indexOf(node.value) !== -1
);
}
function isEachKeywordNode(node) {
return (
node.type &&
node.type === "value-word" &&
node.value &&
["in"].indexOf(node.value) !== -1
);
}
function isMathOperatorNode(node) {
return (
node.type &&
node.type === "value-operator" &&
node.value &&
["+", "-", "/", "*", "%"].indexOf(node.value) !== -1
);
}
function isEqualityOperatorNode(node) {
return (
node.type &&
node.type === "value-word" &&
node.value &&
["==", "!="].indexOf(node.value) !== -1
);
}
function isRelationalOperatorNode(node) {
return (
node.type &&
node.type === "value-word" &&
node.value &&
["<", ">", "<=", ">="].indexOf(node.value) !== -1
);
}
function isNodeControlDirective(node) {
return (
node.type &&

122
tests/css_atrule/__snapshots__/jsfmt.spec.js.snap
View File

@ -1016,7 +1016,85 @@ salamander
(egret, white, move) {}
@each $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var in puma, sea-slug, egret, salamander {}
@each $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 in (puma, black, default), (sea-slug, blue, pointer), (egret, white, move) {}
@each $element, $size in (h1: 20px, h2: 16px, h3: 14px) {}
@each $element,$size in(h1:20px,h2:16px,h3:14px){}
@each $element , $size in ( h1 : 20px , h2 : 16px , h3 : 14px ) {}
@each $element,
$size in (h1: 20px, h2: 16px, h3: 14px) {}
@each
$element,
$size
in
(
h1
:
20px
,
h2
:
16px
,
h3
:
14px
)
{
}
@each
$element,
$size
in
(
h1
:
20px
,
h2
:
16px
,
h3
:
14px
)
{
}
@each
$element,
$size
in
(
h1
:
20px
,
h2
:
16px
,
h3
:
14px
)
{
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
@each $animal in puma, sea-slug, egret, salamander {
}
@ -1032,22 +1110,22 @@ salamander
}
@each $animal in puma, sea-slug, egret, salamander {
}
@each $animal in ((puma), (sea-slug), (egret), (salamander)) {
@each $animal in ((puma), (sea-slug), (egret), (salamander)) {
}
@each $animal in((puma), (sea-slug), (egret), (salamander)) {
}
@each $animal in ( (puma), (sea-slug), (egret), (salamander)) {
@each $animal in ((puma), (sea-slug), (egret), (salamander)) {
}
@each $animal in ((puma), (sea-slug), (egret), (salamander)) {
@each $animal in ((puma), (sea-slug), (egret), (salamander)) {
}
@each $animal in ( (puma), (sea-slug), (egret), (salamander)) {
@each $animal in ((puma), (sea-slug), (egret), (salamander)) {
}
@each $animal in ( (puma), (sea-slug), (egret), (salamander)) {
@each $animal in ((puma), (sea-slug), (egret), (salamander)) {
}
@each $animal in ( (puma), (sea-slug), (egret), (salamander)) {
@each $animal in ((puma), (sea-slug), (egret), (salamander)) {
}
@each $animal, $color, $cursor in (puma, black, default),
(sea-slug, blue, pointer), (egret, white, move)
(sea-slug, blue, pointer), (egret, white, move)
{
}
@each $animal, $color, $cursor in (puma, black, default),
@ -1055,7 +1133,7 @@ salamander
{
}
@each $animal, $color, $cursor in (puma, black, default),
(sea-slug, blue, pointer), (egret, white, move)
(sea-slug, blue, pointer), (egret, white, move)
{
}
@each $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var
@ -1068,9 +1146,23 @@ salamander
$very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1,
$very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2
in (puma, black, default),
(sea-slug, blue, pointer), (egret, white, move)
(sea-slug, blue, pointer), (egret, white, move)
{
}
@each $element, $size in (h1: 20px, h2: 16px, h3: 14px) {
}
@each $element, $size in(h1: 20px, h2: 16px, h3: 14px) {
}
@each $element, $size in (h1: 20px, h2: 16px, h3: 14px) {
}
@each $element, $size in (h1: 20px, h2: 16px, h3: 14px) {
}
@each $element, $size in (h1: 20px, h2: 16px, h3: 14px) {
}
@each $element, $size in (h1: 20px, h2: 16px, h3: 14px) {
}
@each $element, $size in (h1: 20px, h2: 16px, h3: 14px) {
}
`;
@ -1580,6 +1672,7 @@ through
@for $i from 1 through $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 through $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 end $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from ($var1 + $var1) through ($var-2 + $var-2) {}
@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1) through ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2) {}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
@for $i from 1 through 8 {
@ -1621,6 +1714,11 @@ through
end $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2
{
}
@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var
from ($var1 + $var1)
through ($var-2 + $var-2)
{
}
@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var
from
(
@ -1730,7 +1828,7 @@ $args
@function func($arg, $arg1, $arg2: 10, $args...) {
@return "Func";
}
@function func($arg, $arg1, $arg2:10, $args...) {
@function func($arg, $arg1, $arg2: 10, $args...) {
@return "Func";
}
@function func($arg, $arg1, $arg2: 10, $args...) {
@ -2291,7 +2389,7 @@ a {
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
@include mix(1px, 2px, $arg2: 10, 2px 4px 6px);
@include mix(1px, 2px, $arg2:10, 2px 4px 6px);
@include mix(1px, 2px, $arg2: 10, 2px 4px 6px);
@include mix(1px, 2px, $arg2: 10, 2px 4px 6px);
@include mix(1px, 2px, $arg2: 10, 2px 4px 6px);
@include mix(1px, 2px, $arg2: 10, 2px 4px 6px);
@ -3133,7 +3231,7 @@ $args
@mixin mix($arg, $arg1, $arg2: 10, $args...) {
}
@mixin mix($arg, $arg1, $arg2:10, $args...) {
@mixin mix($arg, $arg1, $arg2: 10, $args...) {
}
@mixin mix($arg, $arg1, $arg2: 10, $args...) {
}

78
tests/css_atrule/each.css
View File

@ -136,4 +136,82 @@ salamander
(egret, white, move) {}
@each $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var in puma, sea-slug, egret, salamander {}
@each $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1, $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 in (puma, black, default), (sea-slug, blue, pointer), (egret, white, move) {}
@each $element, $size in (h1: 20px, h2: 16px, h3: 14px) {}
@each $element,$size in(h1:20px,h2:16px,h3:14px){}
@each $element , $size in ( h1 : 20px , h2 : 16px , h3 : 14px ) {}
@each $element,
$size in (h1: 20px, h2: 16px, h3: 14px) {}
@each
$element,
$size
in
(
h1
:
20px
,
h2
:
16px
,
h3
:
14px
)
{
}
@each
$element,
$size
in
(
h1
:
20px
,
h2
:
16px
,
h3
:
14px
)
{
}
@each
$element,
$size
in
(
h1
:
20px
,
h2
:
16px
,
h3
:
14px
)
{
}

1
tests/css_atrule/for.css
View File

@ -39,4 +39,5 @@ through
@for $i from 1 through $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 through $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 end $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 {}
@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from ($var1 + $var1) through ($var-2 + $var-2) {}
@for $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var from ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1 + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var1) through ($very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2 + $very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-var-2) {}