From 209cee6ceab831ed0c4dabafa44ec40665c5fa89 Mon Sep 17 00:00:00 2001
From: Daiki Ihara <sasurau4@gmail.com>
Date: Fri, 10 Jan 2020 06:38:16 +0900
Subject: [PATCH] Scss: fix scss variable string concatenation removing spaces
 (#7211)

---
 changelog_unreleased/scss/pr-7211.md          | 22 +++++++++
 src/language-css/printer-postcss.js           | 15 ++++--
 .../css_scss/__snapshots__/jsfmt.spec.js.snap | 49 +++++++++++++++++++
 tests/css_scss/string-concatanation.scss      |  6 +++
 4 files changed, 87 insertions(+), 5 deletions(-)
 create mode 100644 changelog_unreleased/scss/pr-7211.md
 create mode 100644 tests/css_scss/string-concatanation.scss

diff --git a/changelog_unreleased/scss/pr-7211.md b/changelog_unreleased/scss/pr-7211.md
new file mode 100644
index 000000000..3c00f3ceb
--- /dev/null
+++ b/changelog_unreleased/scss/pr-7211.md
@@ -0,0 +1,22 @@
+#### Fix scss variable string concatenation removing spaces ([#7211](https://github.com/prettier/prettier/pull/7211) by [@sasurau4](https://github.com/sasurau4))
+
+Previously, when Prettier format the scss variable string concatenation, it would remove spaces. Now, Prettier insert spaces around plus operator.
+
+<!-- prettier-ignore -->
+```scss
+// Input
+a {
+  background-image: url($test-path + 'static/test.jpg');
+}
+
+// Prettier stable
+a {
+  background-image: url($test-path+"static/test.jpg");
+}
+
+// Prettier master
+a {
+  background-image: url($test-path + "static/test.jpg");
+}
+```
+
diff --git a/src/language-css/printer-postcss.js b/src/language-css/printer-postcss.js
index b2b57ab00..da73429f6 100644
--- a/src/language-css/printer-postcss.js
+++ b/src/language-css/printer-postcss.js
@@ -458,16 +458,21 @@ function genericPrint(path, options, print) {
       for (let i = 0; i < node.groups.length; ++i) {
         parts.push(printed[i]);
 
-        // Ignore value inside `url()`
-        if (insideURLFunction) {
-          continue;
-        }
-
         const iPrevNode = node.groups[i - 1];
         const iNode = node.groups[i];
         const iNextNode = node.groups[i + 1];
         const iNextNextNode = node.groups[i + 2];
 
+        if (insideURLFunction) {
+          if (
+            (iNextNode && isAdditionNode(iNextNode)) ||
+            isAdditionNode(iNode)
+          ) {
+            parts.push(" ");
+          }
+          continue;
+        }
+
         // Ignore after latest node (i.e. before semicolon)
         if (!iNextNode) {
           continue;
diff --git a/tests/css_scss/__snapshots__/jsfmt.spec.js.snap b/tests/css_scss/__snapshots__/jsfmt.spec.js.snap
index fc75d517c..dd2c6963e 100644
--- a/tests/css_scss/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/css_scss/__snapshots__/jsfmt.spec.js.snap
@@ -4073,3 +4073,52 @@ label {
 
 ================================================================================
 `;
+
+exports[`string-concatanation.scss 1`] = `
+====================================options=====================================
+parsers: ["scss"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+a {
+  background-image: url($test-path + $test-path);
+  background-image: url($test-path + 'static/test.jpg');
+  background-image: url('../test/' + $test-path);
+  background-image: url('../test/' + 'static/test.jpg');
+}
+
+=====================================output=====================================
+a {
+  background-image: url($test-path + $test-path);
+  background-image: url($test-path + "static/test.jpg");
+  background-image: url("../test/" + $test-path);
+  background-image: url("../test/" + "static/test.jpg");
+}
+
+================================================================================
+`;
+
+exports[`string-concatanation.scss 2`] = `
+====================================options=====================================
+parsers: ["scss"]
+printWidth: 80
+trailingComma: "es5"
+                                                                                | printWidth
+=====================================input======================================
+a {
+  background-image: url($test-path + $test-path);
+  background-image: url($test-path + 'static/test.jpg');
+  background-image: url('../test/' + $test-path);
+  background-image: url('../test/' + 'static/test.jpg');
+}
+
+=====================================output=====================================
+a {
+  background-image: url($test-path + $test-path);
+  background-image: url($test-path + "static/test.jpg");
+  background-image: url("../test/" + $test-path);
+  background-image: url("../test/" + "static/test.jpg");
+}
+
+================================================================================
+`;
diff --git a/tests/css_scss/string-concatanation.scss b/tests/css_scss/string-concatanation.scss
new file mode 100644
index 000000000..40b085968
--- /dev/null
+++ b/tests/css_scss/string-concatanation.scss
@@ -0,0 +1,6 @@
+a {
+  background-image: url($test-path + $test-path);
+  background-image: url($test-path + 'static/test.jpg');
+  background-image: url('../test/' + $test-path);
+  background-image: url('../test/' + 'static/test.jpg');
+}