fix: extra space between '#' and '{' (#13286)

jspereiramoura · fisker · web-flow · commit 2d3a2748471b · 2022-08-17T23:32:29.000+09:00
* fix: extra space between '#' and '{'

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

Co-authored-by: fisker Cheung &lt;lionkay@gmail.com&gt;

* adding changelog

* Update 13286.md

Co-authored-by: fisker Cheung &lt;lionkay@gmail.com&gt;
diff --git a/changelog_unreleased/scss/13286.md 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
@@ -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
@@ -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
@@ -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) {

Original file line number	Diff line number	Diff line change
`@@ -825,6 +825,14 @@ function genericPrint(path, options, print) {`
`825`	`825`	`continue;`
`826`	`826`	`}`
`827`	`827`
	`828`	`+ if (`
	`829`	`+ iNode.value?.endsWith("#") &&`
	`830`	`+ iNextNode.value === "{" &&`
	`831`	`+ isParenGroupNode(iNextNode.group)`
	`832`	`+ ) {`
	`833`	`+ continue;`
	`834`	`+ }`
	`835`	`+`
`828`	`836`	// Be default all values go through `line`
`829`	`837`	`parts.push(line);`
`830`	`838`	`}`
Original file line number	Diff line number	Diff line change
`@@ -12,6 +12,7 @@ printWidth: 80`
`12`	`12`	`prop1: var(--#{$var});`
`13`	`13`	`prop2: var(#{$var}, --my-#{$var}, pink);`
`14`	`14`	`prop3: calc(var(--#{$var}) * 1px);`
	`15`	`+ prop4: var(--spacer#{(1) + 2});`
`15`	`16`	`}`
`16`	`17`
`17`	`18`	`@supports (--#{$prop}: green) {`
`@@ -27,6 +28,7 @@ printWidth: 80`
`27`	`28`	`prop1: var(--#{$var});`
`28`	`29`	`prop2: var(#{$var}, --my-#{$var}, pink);`
`29`	`30`	`prop3: calc(var(--#{$var}) * 1px);`
	`31`	`+ prop4: var(--spacer#{(1) + 2});`
`30`	`32`	`}`
`31`	`33`
`32`	`34`	`@supports (--#{$prop}: green) {`
Original file line number	Diff line number	Diff line change
`@@ -4,6 +4,7 @@`
`4`	`4`	`prop1: var(--#{$var});`
`5`	`5`	`prop2: var(#{$var}, --my-#{$var}, pink);`
`6`	`6`	`prop3: calc(var(--#{$var}) * 1px);`
	`7`	`+ prop4: var(--spacer#{(1) + 2});`
`7`	`8`	`}`
`8`	`9`
`9`	`10`	`@supports (--#{$prop}: green) {`