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) + + +```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) {