From 2d3a2748471bf03d4bf59e3dc47f689cc984fadf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Pereira?=
 <43006560+jspereiramoura@users.noreply.github.com>
Date: Wed, 17 Aug 2022 11:32:29 -0300
Subject: [PATCH] fix: extra space between '#' and '{' (#13286)

* fix: extra space between '#' and '{'

* Update src/language-css/printer-postcss.js

Co-authored-by: fisker Cheung <lionkay@gmail.com>

* adding changelog

* Update 13286.md

Co-authored-by: fisker Cheung <lionkay@gmail.com>
---
 changelog_unreleased/scss/13286.md                  | 13 +++++++++++++
 src/language-css/printer-postcss.js                 |  8 ++++++++
 .../scss/variables/__snapshots__/jsfmt.spec.js.snap |  2 ++
 tests/format/scss/variables/variables.scss          |  1 +
 4 files changed, 24 insertions(+)
 create mode 100644 changelog_unreleased/scss/13286.md

diff --git a/changelog_unreleased/scss/13286.md b/changelog_unreleased/scss/13286.md
new file mode 100644
index 000000000..d64d73195
--- /dev/null
+++ b/changelog_unreleased/scss/13286.md
@@ -0,0 +1,13 @@
+#### fix: extra space between '#' and '{' (#13286 by @jspereiramoura)
+
+<!-- prettier-ignore -->
+```scss
+// Input
+padding: var(--spacer#{(1) + 2});
+
+// Prettier stable
+padding: var(--spacer# {(1) + 2});
+
+// Prettier main
+padding: var(--spacer#{(1) + 2});
+```
diff --git a/src/language-css/printer-postcss.js b/src/language-css/printer-postcss.js
index 825961ff2..744646020 100644
--- a/src/language-css/printer-postcss.js
+++ b/src/language-css/printer-postcss.js
@@ -825,6 +825,14 @@ function genericPrint(path, options, print) {
           continue;
         }
 
+        if (
+          iNode.value?.endsWith("#") &&
+          iNextNode.value === "{" &&
+          isParenGroupNode(iNextNode.group)
+        ) {
+          continue;
+        }
+
         // Be default all values go through `line`
         parts.push(line);
       }
diff --git a/tests/format/scss/variables/__snapshots__/jsfmt.spec.js.snap b/tests/format/scss/variables/__snapshots__/jsfmt.spec.js.snap
index 6f19d50c0..4312c1b47 100644
--- a/tests/format/scss/variables/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/format/scss/variables/__snapshots__/jsfmt.spec.js.snap
@@ -12,6 +12,7 @@ printWidth: 80
   prop1: var(--#{$var});
   prop2: var(#{$var}, --my-#{$var}, pink);
   prop3: calc(var(--#{$var}) * 1px);
+  prop4: var(--spacer#{(1) + 2});
 }
 
 @supports (--#{$prop}: green) {
@@ -27,6 +28,7 @@ printWidth: 80
   prop1: var(--#{$var});
   prop2: var(#{$var}, --my-#{$var}, pink);
   prop3: calc(var(--#{$var}) * 1px);
+  prop4: var(--spacer#{(1) + 2});
 }
 
 @supports (--#{$prop}: green) {
diff --git a/tests/format/scss/variables/variables.scss b/tests/format/scss/variables/variables.scss
index 35e7c6e9b..577714686 100644
--- a/tests/format/scss/variables/variables.scss
+++ b/tests/format/scss/variables/variables.scss
@@ -4,6 +4,7 @@
   prop1: var(--#{$var});
   prop2: var(#{$var}, --my-#{$var}, pink);
   prop3: calc(var(--#{$var}) * 1px);
+  prop4: var(--spacer#{(1) + 2});
 }
 
 @supports (--#{$prop}: green) {