From e16478ef8065e7a51ff74be49dd3518a7d6dafd9 Mon Sep 17 00:00:00 2001
From: Christopher Chedeau <vjeuxx@gmail.com>
Date: Wed, 7 Jun 2017 12:40:36 -0700
Subject: [PATCH] Fix less &:extends when parsed with scss (#2034)

This is the only breakage that people ever reported with CSS so I'm happy adding one edge case like this.

Fixes #1967
---
 src/printer-postcss.js                        | 13 ++++++++-
 .../__snapshots__/jsfmt.spec.js.snap          | 28 +++++++++++++++++++
 tests/css_extend/extend.css                   | 11 ++++++++
 tests/css_extend/jsfmt.spec.js                |  1 +
 4 files changed, 52 insertions(+), 1 deletion(-)
 create mode 100644 tests/css_extend/__snapshots__/jsfmt.spec.js.snap
 create mode 100644 tests/css_extend/extend.css
 create mode 100644 tests/css_extend/jsfmt.spec.js

diff --git a/src/printer-postcss.js b/src/printer-postcss.js
index 9695adf79..54f2f278b 100644
--- a/src/printer-postcss.js
+++ b/src/printer-postcss.js
@@ -60,10 +60,21 @@ function genericPrint(path, options, print) {
       ]);
     }
     case "css-decl": {
+      // When the following less construct &:extend(.foo); is parsed with scss,
+      // it will put a space after `:` and break it. Ideally we should parse
+      // less files with less, but we can hardcode this to work with scss as
+      // well.
+      const isValueExtend =
+        n.value.type === "value-root" &&
+        n.value.group.type === "value-value" &&
+        n.value.group.group.type === "value-func" &&
+        n.value.group.group.value === "extend";
+
       return concat([
         n.raws.before.replace(/[\s;]/g, ""),
         n.prop,
-        ": ",
+        ":",
+        isValueExtend ? "" : " ",
         path.call(print, "value"),
         n.important ? " !important" : "",
         n.nodes
diff --git a/tests/css_extend/__snapshots__/jsfmt.spec.js.snap b/tests/css_extend/__snapshots__/jsfmt.spec.js.snap
new file mode 100644
index 000000000..d2cf29d03
--- /dev/null
+++ b/tests/css_extend/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`extend.css 1`] = `
+.foobar {
+  &:extend(.foo);
+}
+
+.thing {
+  &:hover {
+    background-color: blue;
+    .thing-child {
+    }
+  }
+}
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+.foobar {
+  &:extend(.foo);
+}
+
+.thing {
+  &:hover {
+    background-color: blue;
+    .thing-child {
+    }
+  }
+}
+
+`;
diff --git a/tests/css_extend/extend.css b/tests/css_extend/extend.css
new file mode 100644
index 000000000..19ff013b9
--- /dev/null
+++ b/tests/css_extend/extend.css
@@ -0,0 +1,11 @@
+.foobar {
+  &:extend(.foo);
+}
+
+.thing {
+  &:hover {
+    background-color: blue;
+    .thing-child {
+    }
+  }
+}
diff --git a/tests/css_extend/jsfmt.spec.js b/tests/css_extend/jsfmt.spec.js
new file mode 100644
index 000000000..a7d303b6c
--- /dev/null
+++ b/tests/css_extend/jsfmt.spec.js
@@ -0,0 +1 @@
+run_spec(__dirname, { parser: "postcss" });