Do not add trailing comma for grouped scss comments (#15217)

* Do not add trailing comma for grouped scss comments * add changelog
prettier · Aug 11, 2023 · 8a3e73c · 8a3e73c
1 parent 06a8e37
commit 8a3e73c
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 1 deletion.
diff --git a/changelog_unreleased/scss/15217.md b/changelog_unreleased/scss/15217.md
@@ -0,0 +1,25 @@
+#### Do not add trailing comma for grouped scss comments (#15217 by @auvred)
+
+<!-- prettier-ignore -->
+```scss
+/* Input */
+$foo: (
+	'property': (),
+	// comment 1
+	// comment 2
+)
+
+/* Prettier stable */
+$foo: (
+  "property": (),
+  // comment 1
+  // comment 2,
+);
+
+/* Prettier main */
+$foo: (
+  "property": (),
+  // comment 1
+  // comment 2
+);
+```
diff --git a/src/language-css/print/parenthesized-value-group.js b/src/language-css/print/parenthesized-value-group.js
@@ -40,6 +40,10 @@ function printTrailingComma(path, options) {
 
   if (
     path.node.type !== "value-comment" &&
+    !(
+      path.node.type === "value-comma_group" &&
+      path.node.groups.every((group) => group.type === "value-comment")
+    ) &&
     shouldPrintTrailingComma(options) &&
     path.callParent(() => isSCSSMapItemNode(path, options))
   ) {

diff --git a/tests/format/scss/scss/__snapshots__/jsfmt.spec.js.snap b/tests/format/scss/scss/__snapshots__/jsfmt.spec.js.snap
@@ -1558,6 +1558,17 @@ label {
 div {
   margin: - pow(2, 2) * 100px;
 }
+
+$foo: (
+    'property1': (),
+    // comment 1
+    // comment 2
+
+    'property2': 1,
+    /** comment 1 */
+    /* comment 2 */
+);
+
 =====================================output=====================================
 @media #{$g-breakpoint-tiny} {
 }
@@ -2631,6 +2642,14 @@ div {
   margin: - pow(2, 2) * 100px;
 }
 
+$foo: (
+  "property1": (),
+  // comment 1
+  // comment 2
+  "property2": 1,
+  /** comment 1 */ /* comment 2 */
+);
+
 ================================================================================
 `;
 
@@ -3732,6 +3751,17 @@ label {
 div {
   margin: - pow(2, 2) * 100px;
 }
+
+$foo: (
+    'property1': (),
+    // comment 1
+    // comment 2
+
+    'property2': 1,
+    /** comment 1 */
+    /* comment 2 */
+);
+
 =====================================output=====================================
 @media #{$g-breakpoint-tiny} {
 }
@@ -4805,6 +4835,14 @@ div {
   margin: - pow(2, 2) * 100px;
 }
 
+$foo: (
+  "property1": (),
+  // comment 1
+  // comment 2
+  "property2": 1,
+  /** comment 1 */ /* comment 2 */
+);
+
 ================================================================================
 `;
 

diff --git a/tests/format/scss/scss/scss.scss b/tests/format/scss/scss/scss.scss
@@ -1088,4 +1088,14 @@ label {
 // #5636
 div {
   margin: - pow(2, 2) * 100px;
-}
+}
+
+$foo: (
+    'property1': (),
+    // comment 1
+    // comment 2
+
+    'property2': 1,
+    /** comment 1 */
+    /* comment 2 */
+);