From 313519d8ae10de735b596613c3b17bcaa7eabd7c Mon Sep 17 00:00:00 2001
From: Christopher Chedeau <vjeuxx@gmail.com>
Date: Wed, 21 Jun 2017 13:02:16 -0700
Subject: [PATCH] Allow long media rules to break (#2219)

Fixes #2198
---
 src/printer-postcss.js                              |  2 +-
 tests/css_media/__snapshots__/jsfmt.spec.js.snap    | 13 +++++++++++++
 tests/css_media/jsfmt.spec.js                       |  1 +
 tests/css_media/overflow.css                        |  2 ++
 .../at-media/__snapshots__/jsfmt.spec.js.snap       |  8 ++++++--
 5 files changed, 23 insertions(+), 3 deletions(-)
 create mode 100644 tests/css_media/__snapshots__/jsfmt.spec.js.snap
 create mode 100644 tests/css_media/jsfmt.spec.js
 create mode 100644 tests/css_media/overflow.css

diff --git a/src/printer-postcss.js b/src/printer-postcss.js
index 2b1bf1ff7..3695b2180 100644
--- a/src/printer-postcss.js
+++ b/src/printer-postcss.js
@@ -141,7 +141,7 @@ function genericPrint(path, options, print) {
         }
         parts.push(childPath.call(print));
       }, "nodes");
-      return join(", ", parts);
+      return group(indent(join(concat([",", line]), parts)));
     }
     case "media-query": {
       return join(" ", path.map(print, "nodes"));
diff --git a/tests/css_media/__snapshots__/jsfmt.spec.js.snap b/tests/css_media/__snapshots__/jsfmt.spec.js.snap
new file mode 100644
index 000000000..4398cc98c
--- /dev/null
+++ b/tests/css_media/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`overflow.css 1`] = `
+@media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3/2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
+}
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+@media all and (-webkit-min-device-pixel-ratio: 1.5),
+  all and (-o-min-device-pixel-ratio: 3/2),
+  all and (min--moz-device-pixel-ratio: 1.5),
+  all and (min-device-pixel-ratio: 1.5) {
+}
+
+`;
diff --git a/tests/css_media/jsfmt.spec.js b/tests/css_media/jsfmt.spec.js
new file mode 100644
index 000000000..a7d303b6c
--- /dev/null
+++ b/tests/css_media/jsfmt.spec.js
@@ -0,0 +1 @@
+run_spec(__dirname, { parser: "postcss" });
diff --git a/tests/css_media/overflow.css b/tests/css_media/overflow.css
new file mode 100644
index 000000000..edd11eb4d
--- /dev/null
+++ b/tests/css_media/overflow.css
@@ -0,0 +1,2 @@
+@media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3/2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
+}
diff --git a/tests/stylefmt/at-media/__snapshots__/jsfmt.spec.js.snap b/tests/stylefmt/at-media/__snapshots__/jsfmt.spec.js.snap
index dd3b3188d..8b2e7cc11 100644
--- a/tests/stylefmt/at-media/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/stylefmt/at-media/__snapshots__/jsfmt.spec.js.snap
@@ -26,10 +26,14 @@ exports[`at-media.css 1`] = `
 }
 @media (not ( screen and ( color ) )), print and (color) {
 }
-@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) {
+@media screen and (device-aspect-ratio: 16/9),
+  screen and (device-aspect-ratio: 16/10) {
 }
 
-@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-resolution: 2dppx), (min-resolution: 192dpi) {
+@media (-webkit-min-device-pixel-ratio: 2),
+  (min--moz-device-pixel-ratio: 2),
+  (min-resolution: 2dppx),
+  (min-resolution: 192dpi) {
 }
 
 `;