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

fix(css): improve at rules print

src/language-css/printer-postcss.js

@@ -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 =
+          const isNextMathOperator = isMathOperatorNode(node.groups[i + 1]);
-            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 isNextEqualityOperator =
-            isControlDirective &&
+            isControlDirective && isEqualityOperatorNode(node.groups[i + 1]);
-            isNextValueWord &&
-            ["==", "!="].indexOf(node.groups[i + 1].value) !== -1;
           const isNextRelationalOperator =
-            isControlDirective &&
+            isControlDirective && isRelationalOperatorNode(node.groups[i + 1]);
-            isNextValueWord &&
-            ["<", ">", "<=", ">="].indexOf(node.groups[i + 1].value) !== -1;
           const isNextIfElseKeyword =
-            isControlDirective &&
+            isControlDirective && isIfElseKeywordNode(node.groups[i + 1]);
-            ["and", "or", "not"].indexOf(node.groups[i + 1].value) !== -1;
           const isNextEachKeyword =
-            isControlDirective &&
+            isControlDirective && isEachKeywordNode(node.groups[i + 1]);
-            ["in"].indexOf(node.groups[i + 1].value) !== -1;
           const isForKeyword =
             atRuleAncestorNode &&
             atRuleAncestorNode.name === "for" &&
-            ["from", "through", "end"].indexOf(node.groups[i].value) !== -1;
+            isForKeywordNode(node.groups[i]);
           const isNextForKeyword =
-            isControlDirective &&
+            isControlDirective && isForKeywordNode(node.groups[i + 1]);
-            ["from", "through", "end"].indexOf(node.groups[i + 1].value) !== -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 &&

tests/css_atrule/__snapshots__/jsfmt.spec.js.snap

@@ -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...) {
 }

tests/css_atrule/each.css

@@ -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
+
+)
+
+{
+
+}

tests/css_atrule/for.css

@@ -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) {}