Repository: prettier/prettier (JavaScript)

Issue:
When box-shadow has multiple values (separated by comma) it'd be prettier to put each value on a separate line
**Prettier 1.16.4**
[Playground link](https://prettier.io/playground/#N4Igxg9gdgLgprEAuEAjCAPAtAZwBYCGAJhAO5IA6UABNQAwAOG1AjE-RwMQBmvANFVqNmAJnZ0ucKQG4qIPiAgMYAS2g5koAgCdtZAAo6EGlAQBuEFUXlptBMAGs4MAMoN7KqAHNkMbQFc4BTwYAFsAGwB1PBV4HHcwOBdjWJUzWIBPZHAcDQVPHDhtGH07L1CCZG4CcMKFACscDAAhO0dnFwJQuAAZTzgqmrqQRowXTy9wuABFfwh4QdqgkHdtQu1ssFybBm1PGEirGDxkAA46BV2IQsi7BmzduHWzAYVtOABHfxV30oJyypIapLBSFUIqXwBZY4CZTWbzAZAobLGAEVCHIjHZAiBR+AgqcITADCEFCFWyUGgrxA-kKABU0SZgYUAL4soA)
```sh
--parser css
```

**Input:**
```css
box-shadow:
  0px 1px 0 0 #fff,
  0px 2px 0 0 #eee;
```

**Output:**
```css
box-shadow: 0px 1px 0 0 #fff, 0px 2px 0 0 #eee;

```

**Expected behavior:**
```css
box-shadow:
  0px 1px 0 0 #fff,
  0px 2px 0 0 #eee;
```

When each value is on a separate line, the whole value feels significantly easier to read.
Always wrap certain CSS prop values (box-shadow, text-shadow, etc)
## Description

Always wrap specific CSS property values (box-shadow, transition, background-image, text-shadow, background). Fixes #6024

## Checklist

- [ ] I’ve added tests to confirm my change works.
- [ ] (If changing the API or CLI) I’ve documented the changes I’ve made (in the `docs/` directory).
- [ ] (If the change is user-facing) I’ve added my changes to `changelog_unreleased/*/XXXX.md` file following `changelog_unreleased/TEMPLATE.md`.
- [x] I’ve read the [contributing guidelines](https://github.com/prettier/prettier/blob/main/CONTRIBUTING.md).

**✨[Try the playground for this PR](https://prettier.io/playground-redirect)✨**



Hints:
I would love something like this!

I agree with this. `box-shadow` with multiple values looks better with each value on a separate line.

How about other properties like `background`, `background-image`, `text-shadow`, `@font-face#src`?

**background-image** (from [Lea Verou Patterns](http://projects.verou.me/css3patterns/#checkerboard))
```
background-image:
  linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
  linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
```

**text-shadow** (from [MDN docs](https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow))
```
text-shadow:
  1px 1px 2px red,
  0 0 1em blue,
  0 0 0.2em blue;
```

**font-face** (from [MDN docs](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face))
```
@font-face {
  font-family: "Open Sans";
  src:
    url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
    url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}
```

I would argue that these all look prettier with separate lines when they are separated with commas, particularly when there are more than 2 values.

I think such a rule will need some consideration for which CSS properties are enhanced by splitting across lines and which ones are not. `font-family` for example, looks worse when split:

**font-family**
```
font-family:
  'Helvetica Neue',
  Helvetica,
  system-ui,
  sans-serif;
```
Could we implement this please as soon as possible. I think it's time to improve this ugly style behavior. It's one of the worst behavior in Prettier.

I prefer always multiline when multiple values. 

**Bad**

```css
box-shadow: 0 0 10px black, 0 0 0 1px black;
```

**Good**

```css
box-shadow: 
  0 0 10px black, 
  0 0 0 1px black;
```

![just-do-it](https://user-images.githubusercontent.com/68586847/110715776-29f0e580-8206-11eb-90ab-217ea91bc795.gif)

And variables:

```scss
$shadow:
  0 0 0 1px #5b9dd9,
  0 0 2px 1px rgba(30, 140, 190, 0.8);
```

From: https://github.com/stylelint-scss/stylelint-scss/blob/HEAD/src/rules/dollar-variable-colon-newline-after/README.md
I have a proof-of-concept PR that implements this here: https://github.com/prettier/prettier/pull/13260. It hard-codes specific properties to always wrap if they have more than one value. (Notably, I skipped font-family since as another commenter pointed out it doesn't look great wrapped.)
Note that since it looks at the property, it won't apply to SASS variables.
It seems like this might need some more discussion as to the preferred behavior - I've narrowed down the two primary decisions that would need to be made.

### 1. Always wrap lists

We can choose to always use the new wrapping behavior for lists with two or more elements, or only do it if the line would wrap anyways.

**1.a - Always wrapping lists:**

```css
.selector {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.2);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.2),
    0 1px 2px 0 rgba(0, 0, 0, 0.2);
}
```

**1.b - Only use new wrapping if line needs to wrap:**

```css
.selector {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.2),
    0 1px 2px 0 rgba(0, 0, 0, 0.2);
}
```

### 2. Only wrap certain properties

Orthogonal from the above, we can choose to apply this new wrapping behavior only for certain properties (like `box-shadow`, `background-image`, etc) while keeping the existing behavior for others (notably, `font-family`, but also `transition-property`). This makes sense if those properties often have many short elements, but makes the behavior inconsistent and possibly unexpected.

**2.a - Only apply new wrapping to certain properties:**

```css
.selector {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.2),
    0 1px 2px 0 rgba(0, 0, 0, 0.2);
  font-family: -apple-system, BlinkMacSystemFont,
    avenir next, avenir, segoe ui, helvetica neue, helvetica,
    Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
  transition-property: opacity, color, transform, box-shadow,
    margin, padding;
}
```

**2.b - Apply new wrapping behavior to every property:**

```css
.selector {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.2),
    0 1px 2px 0 rgba(0, 0, 0, 0.2);
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    avenir next,
    avenir,
    segoe ui,
    helvetica neue,
    helvetica,
    Cantarell,
    Ubuntu,
    roboto,
    noto,
    arial,
    sans-serif;
  transition-property:
    opacity,
    color,
    transform,
    box-shadow,
    margin,
    padding;
}
```
Personally, I prefer "always". 
Another thing, where should we put `!important`?
> Personally, I prefer "always".

Thanks @fisker - can you clarify here? You mean option 1.a and 2.b?

> Another thing, where should we put `!important`?

Right now (in the PR), it goes on the same line as the last item in the property list.
1.a, only personal opinion, we need more discussion.
How about "wrap if any list item contains more than 2 spaces"?
That could work as well as an alternative for #2 where it doesn't require special-casing the property names.
Let's do it (https://github.com/prettier/prettier/issues/6024#issuecomment-1216191051) then, shall we?
👍 For this, we need more tests.
> For this, we need more tests.

Definitely - I also have a small thing to fix in the implementation first. Just wanted to make sure that this was a change that would be accepted before fixing up those additional things.
@fisker I think this PR needs a design decision before I can move forward - I'd be curious to hear your thoughts on https://github.com/prettier/prettier/issues/6024#issuecomment-1209580521.
This is much needed 

Patch:
diff --git a/src/language-css/printer-postcss.js b/src/language-css/printer-postcss.js
--- 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,


Test patch:
diff --git a/tests/format/css/atrule/__snapshots__/jsfmt.spec.js.snap b/tests/format/css/atrule/__snapshots__/jsfmt.spec.js.snap
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
 
diff --git a/tests/format/scss/scss/__snapshots__/jsfmt.spec.js.snap b/tests/format/scss/scss/__snapshots__/jsfmt.spec.js.snap
--- a/tests/format/scss/scss/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/format/scss/scss/__snapshots__/jsfmt.spec.js.snap
@@ -1786,17 +1786,29 @@ $list-comma: "item-1", "item-2", "item-3";
 $list-comma: "item-1", "item-2", "item-3";
 $list-comma: "item-1", "item-2", "item-3";
 $list-comma: "item-1", "item-2", "item-3";
-$list: "item-1.1" "item-1.2" "item-1.3", "item-2.1" "item-2.2" "item-2.3",
+$list:
+  "item-1.1" "item-1.2" "item-1.3",
+  "item-2.1" "item-2.2" "item-2.3",
   "item-3.1" "item-3.2" "item-3.3";
-$list: "item-1.1" "item-1.2" "item-1.3", "item-2.1" "item-2.2" "item-2.3",
+$list:
+  "item-1.1" "item-1.2" "item-1.3",
+  "item-2.1" "item-2.2" "item-2.3",
   "item-3.1" "item-3.2" "item-3.3";
-$list: "item-1.1" "item-1.2" "item-1.3", "item-2.1" "item-2.2" "item-2.3",
+$list:
+  "item-1.1" "item-1.2" "item-1.3",
+  "item-2.1" "item-2.2" "item-2.3",
   "item-3.1" "item-3.2" "item-3.3";
-$list: "item-1.1" "item-1.2" "item-1.3", "item-2.1" "item-2.2" "item-2.3",
+$list:
+  "item-1.1" "item-1.2" "item-1.3",
+  "item-2.1" "item-2.2" "item-2.3",
   "item-3.1" "item-3.2" "item-3.3";
-$list: "item-1.1" "item-1.2" "item-1.3", "item-2.1" "item-2.2" "item-2.3",
+$list:
+  "item-1.1" "item-1.2" "item-1.3",
+  "item-2.1" "item-2.2" "item-2.3",
   "item-3.1" "item-3.2" "item-3.3";
-$list: "item-1.1" "item-1.2" "item-1.3", "item-2.1" "item-2.2" "item-2.3",
+$list:
+  "item-1.1" "item-1.2" "item-1.3",
+  "item-2.1" "item-2.2" "item-2.3",
   "item-3.1" "item-3.2" "item-3.3";
 $list: (
   ("item-1.1", "item-1.2", "item-1.3"),
@@ -1870,7 +1882,10 @@ $space-scale: (0, "0") (0.25, "0-25") (0.5, "0-5") (0.75, "0-75") (1, "1")
 @error "Very long long long long long long long long long long long long long line Error (#{$message}).";
 @error "Very long long long long long long long long long long long long long line Error (#{$message}).";
 
-$buttonConfig: "save" 50px, "cancel" 50px, "help" 100px;
+$buttonConfig:
+  "save" 50px,
+  "cancel" 50px,
+  "help" 100px;
 
 $locale: "en_us";
 html[lang="#{$locale}"] {
@@ -2204,7 +2219,10 @@ $foundation-dir: "foundation";
   }
 }
 
-$icons: wifi "\\600", wifi-hotspot "\\601", weather "\\602";
+$icons:
+  wifi "\\600",
+  wifi-hotspot "\\601",
+  weather "\\602";
 
 @each $icon in $icons {
   .icon-#{nth($icon, 1)},
@@ -2251,7 +2269,12 @@ $icons: wifi "\\600", wifi-hotspot "\\601", weather "\\602";
 $last: nth($juggler, length($juggler));
 $x: if($last%2==0, 1/2, 3/2);
 $new: pow($last, $x);
-$sequence: 1, 1 1, 2 1, 1 2 1 1, 1 1 1 2 2 1;
+$sequence:
+  1,
+  1 1,
+  2 1,
+  1 2 1 1,
+  1 1 1 2 2 1;
 $new-entry: ();
 $new-entry: ();
 $new-entry: ();
@@ -2467,7 +2490,8 @@ a {
   color: red; // Comment
 }
 
-$my-list: "foo",
+$my-list:
+  "foo",
   // Comment
   "bar"; // Comment
 
@@ -3926,17 +3950,29 @@ $list-comma: "item-1", "item-2", "item-3";
 $list-comma: "item-1", "item-2", "item-3";
 $list-comma: "item-1", "item-2", "item-3";
 $list-comma: "item-1", "item-2", "item-3";
-$list: "item-1.1" "item-1.2" "item-1.3", "item-2.1" "item-2.2" "item-2.3",
+$list:
+  "item-1.1" "item-1.2" "item-1.3",
+  "item-2.1" "item-2.2" "item-2.3",
   "item-3.1" "item-3.2" "item-3.3";
-$list: "item-1.1" "item-1.2" "item-1.3", "item-2.1" "item-2.2" "item-2.3",
+$list:
+  "item-1.1" "item-1.2" "item-1.3",
+  "item-2.1" "item-2.2" "item-2.3",
   "item-3.1" "item-3.2" "item-3.3";
-$list: "item-1.1" "item-1.2" "item-1.3", "item-2.1" "item-2.2" "item-2.3",
+$list:
+  "item-1.1" "item-1.2" "item-1.3",
+  "item-2.1" "item-2.2" "item-2.3",
   "item-3.1" "item-3.2" "item-3.3";
-$list: "item-1.1" "item-1.2" "item-1.3", "item-2.1" "item-2.2" "item-2.3",
+$list:
+  "item-1.1" "item-1.2" "item-1.3",
+  "item-2.1" "item-2.2" "item-2.3",
   "item-3.1" "item-3.2" "item-3.3";
-$list: "item-1.1" "item-1.2" "item-1.3", "item-2.1" "item-2.2" "item-2.3",
+$list:
+  "item-1.1" "item-1.2" "item-1.3",
+  "item-2.1" "item-2.2" "item-2.3",
   "item-3.1" "item-3.2" "item-3.3";
-$list: "item-1.1" "item-1.2" "item-1.3", "item-2.1" "item-2.2" "item-2.3",
+$list:
+  "item-1.1" "item-1.2" "item-1.3",
+  "item-2.1" "item-2.2" "item-2.3",
   "item-3.1" "item-3.2" "item-3.3";
 $list: (
   ("item-1.1", "item-1.2", "item-1.3"),
@@ -4010,7 +4046,10 @@ $space-scale: (0, "0") (0.25, "0-25") (0.5, "0-5") (0.75, "0-75") (1, "1")
 @error "Very long long long long long long long long long long long long long line Error (#{$message}).";
 @error "Very long long long long long long long long long long long long long line Error (#{$message}).";
 
-$buttonConfig: "save" 50px, "cancel" 50px, "help" 100px;
+$buttonConfig:
+  "save" 50px,
+  "cancel" 50px,
+  "help" 100px;
 
 $locale: "en_us";
 html[lang="#{$locale}"] {
@@ -4344,7 +4383,10 @@ $foundation-dir: "foundation";
   }
 }
 
-$icons: wifi "\\600", wifi-hotspot "\\601", weather "\\602";
+$icons:
+  wifi "\\600",
+  wifi-hotspot "\\601",
+  weather "\\602";
 
 @each $icon in $icons {
   .icon-#{nth($icon, 1)},
@@ -4391,7 +4433,12 @@ $icons: wifi "\\600", wifi-hotspot "\\601", weather "\\602";
 $last: nth($juggler, length($juggler));
 $x: if($last%2==0, 1/2, 3/2);
 $new: pow($last, $x);
-$sequence: 1, 1 1, 2 1, 1 2 1 1, 1 1 1 2 2 1;
+$sequence:
+  1,
+  1 1,
+  2 1,
+  1 2 1 1,
+  1 1 1 2 2 1;
 $new-entry: ();
 $new-entry: ();
 $new-entry: ();
@@ -4607,7 +4654,8 @@ a {
   color: red; // Comment
 }
 
-$my-list: "foo",
+$my-list:
+  "foo",
   // Comment
   "bar"; // Comment
 
diff --git a/tests/format/stylefmt-repo/font-face/__snapshots__/jsfmt.spec.js.snap b/tests/format/stylefmt-repo/font-face/__snapshots__/jsfmt.spec.js.snap
--- a/tests/format/stylefmt-repo/font-face/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/format/stylefmt-repo/font-face/__snapshots__/jsfmt.spec.js.snap
@@ -12,7 +12,9 @@ printWidth: 80
 @font-face {
   font-family: "HelveticaNeueW02-45Ligh";
   src: url("/fonts/pictos-web.eot");
-  src: local("☺"), url("/fonts/pictos-web.woff") format("woff"),
+  src:
+    local("☺"),
+    url("/fonts/pictos-web.woff") format("woff"),
     url("/fonts/pictos-web.ttf") format("truetype"),
     url("/fonts/pictos-web.svg#webfontIyfZbseF") format("svg");
   font-weight: normal;
diff --git a/tests/format/stylefmt-repo/font-shorthand/__snapshots__/jsfmt.spec.js.snap b/tests/format/stylefmt-repo/font-shorthand/__snapshots__/jsfmt.spec.js.snap
--- a/tests/format/stylefmt-repo/font-shorthand/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/format/stylefmt-repo/font-shorthand/__snapshots__/jsfmt.spec.js.snap
@@ -15,7 +15,9 @@ printWidth: 80
 .class {
   font: normal normal 24px/1 "myfont";
   font: normal normal normal 12px/20px myfont;
-  font: normal 300 0.875em/1.3 "myfont", sans-serif;
+  font:
+    normal 300 0.875em/1.3 "myfont",
+    sans-serif;
 }
 
 ================================================================================