Fix line break in CSS declaration with comma (prettier#14208)

Co-authored-by: fisker Cheung <lionkay@gmail.com>
nthachus · Mar 23, 2023 · c6e026e · c6e026e
1 parent 5461057
commit c6e026e
Show file tree

Hide file tree

Showing 12 changed files with 170 additions and 49 deletions.
diff --git a/changelog_unreleased/css/14208.md b/changelog_unreleased/css/14208.md
@@ -0,0 +1,23 @@
+#### Fix line break in CSS declaration with comma (#14208 by @mvorisek)
+
+<!-- prettier-ignore -->
+```css
+// Input
+.myclass {
+  box-shadow:
+    inset 0 0 10px #555,
+    0 0 20px black;
+}
+
+// Prettier stable
+.myclass {
+  box-shadow: inset 0 0 10px #555, 0 0 20px black;
+}
+
+// Prettier main
+.myclass {
+  box-shadow:
+    inset 0 0 10px #555,
+    0 0 20px black;
+}
+```
diff --git a/src/language-css/printer-postcss.js b/src/language-css/printer-postcss.js
@@ -1,5 +1,7 @@
 "use strict";
 
+/** @typedef {import("../document").Doc} Doc */
+
 const getLast = require("../utils/get-last.js");
 const {
   printNumber,
@@ -152,7 +154,16 @@ function genericPrint(path, options, print) {
         ? removeLines(print("value"))
         : print("value");
 
-      if (!isColon && lastLineHasInlineComment(trimmedBetween)) {
+      if (
+        !isColon &&
+        lastLineHasInlineComment(trimmedBetween) &&
+        !(
+          node.value.type === "value-root" &&
+          node.value.group.type === "value-value" &&
+          node.value.group.group.type === "value-paren_group" &&
+          path.call(() => shouldBreakList(path), "value", "group", "group")
+        )
+      ) {
         value = indent([hardline, dedent(value)]);
       }
 
@@ -924,17 +935,17 @@ function genericPrint(path, options, print) {
       }
 
       if (!node.open) {
-        const printed = path.map(print, "groups");
-        const res = [];
-
-        for (let i = 0; i < printed.length; i++) {
-          if (i !== 0) {
-            res.push([",", line]);
-          }
-          res.push(printed[i]);
-        }
-
-        return group(indent(fill(res)));
+        const forceHardLine = shouldBreakList(path);
+        const parts = join(
+          [",", forceHardLine ? hardline : line],
+          path.map(print, "groups")
+        );
+        return indent(
+          forceHardLine
+            ? [hardline, parts]
+            : // TODO: Use `parts` when merge to `next` branch
+              group(fill(parts.parts))
+        );
       }
 
       const isSCSSMapItem = isSCSSMapItemNode(path);
@@ -1169,6 +1180,18 @@ function printCssNumber(rawNumber) {
   );
 }
 
+function shouldBreakList(path) {
+  const node = path.getNode();
+  const parentParentParentNode = path.getParentNode(2);
+  return (
+    !node.open &&
+    (parentParentParentNode.type === "css-decl" ||
+      (parentParentParentNode.type === "css-atrule" &&
+        parentParentParentNode.variable)) &&
+    node.groups.some((node) => node.type === "value-comma_group")
+  );
+}
+
 module.exports = {
   print: genericPrint,
   embed,

diff --git a/tests/format/css/atrule/__snapshots__/jsfmt.spec.js.snap b/tests/format/css/atrule/__snapshots__/jsfmt.spec.js.snap
@@ -1580,33 +1580,39 @@ format(
 =====================================output=====================================
 @font-face {
   font-family: "Open Sans";
-  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
+  src:
+    url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
     url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
 }
 @font-face {
   font-family: "Open Sans";
-  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
+  src:
+    url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
     url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
 }
 @font-face {
   font-family: "Open Sans";
-  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
+  src:
+    url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
     url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
 }
 @font-face {
   font-family: "Open Sans";
-  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
+  src:
+    url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
     url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
 }
 @font-face {
   font-family: "Open Sans";
-  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
+  src:
+    url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
     url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
 }
 @font-face {
   font-family: "Open Sans";
 
-  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
+  src:
+    url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
     url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
 }
 

diff --git a/tests/format/css/comments/__snapshots__/jsfmt.spec.js.snap b/tests/format/css/comments/__snapshots__/jsfmt.spec.js.snap
@@ -397,7 +397,8 @@ a {
 
 @font-face {
   font-family: "Prettier";
-  src: /* comment 16 */ local(/* comment 17 */ "Prettier" /* comment 18 */),
+  src: /* comment 16 */
+    local(/* comment 17 */ "Prettier" /* comment 18 */),
     /* comment 19 */ /* comment 20 */ url("http://prettier.com/font.woff")
       /* comment 21 */; /* comment 22 */
 }

diff --git a/tests/format/css/fill-value/__snapshots__/jsfmt.spec.js.snap b/tests/format/css/fill-value/__snapshots__/jsfmt.spec.js.snap
@@ -15,7 +15,12 @@ div {
 div {
   border-left: 1px solid
     mix($warningBackgroundColors, $warningBorderColors, 50%);
-  $fontFamily: "Lato", -apple-system, "Helvetica Neue", Helvetica, Arial,
+  $fontFamily:
+    "Lato",
+    -apple-system,
+    "Helvetica Neue",
+    Helvetica,
+    Arial,
     sans-serif;
 }
 

diff --git a/tests/format/css/indent/__snapshots__/jsfmt.spec.js.snap b/tests/format/css/indent/__snapshots__/jsfmt.spec.js.snap
@@ -16,7 +16,8 @@ div {
 div {
   background: var(fig-light-02) url(/images/inset-shadow-east-ltr.png) 100% 0
     repeat-y;
-  box-shadow: 0 0 1px 2px rgba(88, 144, 255, 0.75),
+  box-shadow:
+    0 0 1px 2px rgba(88, 144, 255, 0.75),
     0 1px 1px rgba(0, 0, 0, 0.15);
   padding-bottom: calc(
     var(ads-help-tray-footer-with-support-link-height) +

diff --git a/tests/format/less/comments/__snapshots__/jsfmt.spec.js.snap b/tests/format/less/comments/__snapshots__/jsfmt.spec.js.snap
@@ -455,7 +455,8 @@ printWidth: 80
   #bbbbbb // then some B
   #cccccc; // and round it out with C
 
-@test-comma-separated: #aaaaaa,
+@test-comma-separated:
+  #aaaaaa,
   // Start with A
   #bbbbbb,
   // then some B

diff --git a/tests/format/less/less/__snapshots__/jsfmt.spec.js.snap b/tests/format/less/less/__snapshots__/jsfmt.spec.js.snap
@@ -3198,7 +3198,9 @@ div {
 }
 
 .myclass {
-  box-shadow: inset 0 0 10px #555, 0 0 20px black;
+  box-shadow:
+    inset 0 0 10px #555,
+    0 0 20px black;
 }
 
 .mixin() {

diff --git a/tests/format/scss/comments/__snapshots__/jsfmt.spec.js.snap b/tests/format/scss/comments/__snapshots__/jsfmt.spec.js.snap
@@ -224,16 +224,22 @@ selector {
 // #8052
 $font-family-rich:
   // custom
-  "Noto Sans TC", "Noto Sans SC", "Noto Sans JP",
+  "Noto Sans TC",
+  "Noto Sans SC",
+  "Noto Sans JP",
   // Safari for OS X and iOS (San Francisco)
   -apple-system,
   BlinkMacSystemFont,
   // fallback
   Roboto,
-  "Helvetica Neue", Helvetica, Arial, sans-serif,
+  "Helvetica Neue",
+  Helvetica,
+  Arial,
+  sans-serif,
   // emoji
   "Apple Color Emoji",
-  "Segoe UI Emoji", "Segoe UI Symbol" !default;
+  "Segoe UI Emoji",
+  "Segoe UI Symbol" !default;
 
 // #7109
 .test {
@@ -394,7 +400,8 @@ $my-list2:
   c;
 
 =====================================output=====================================
-$my-list: "foo",
+$my-list:
+  "foo",
   // Foo
   "bar"; // Bar