SCSS/LESS: Fix comment inside parens (#9710)

changelog_unreleased/scss/pr-9710.md

@@ -0,0 +1,23 @@
+#### Fix broken comment inside parens (#9710 by @fisker)
+
+<!-- prettier-ignore -->
+```scss
+// Input
+.simplification {
+  foo: (
+    calc() // not a comment anymore
+  );
+}
+
+// Prettier stable
+.simplification {
+  foo: (calc() // not a comment anymore);
+}
+
+// Prettier master
+.simplification {
+  foo: (
+    calc() // not a comment anymore
+  );
+}
+```

src/language-css/printer-postcss.js

@@ -534,6 +534,9 @@ function genericPrint(path, options, print) {
       const atRuleAncestorNode = getAncestorNode(path, "css-atrule");
       const isControlDirective =
         atRuleAncestorNode && isSCSSControlDirectiveNode(atRuleAncestorNode);
+      const hasInlineComment = node.groups.some((node) =>
+        isInlineValueCommentNode(node)
+      );
 
       const printed = path.map(print, "groups");
       const parts = [];
@@ -800,6 +803,10 @@ function genericPrint(path, options, print) {
         parts.push(line);
       }
 
+      if (hasInlineComment) {
+        parts.push(breakParent);
+      }
+
       if (didBreak) {
         parts.unshift(hardline);
       }

tests/less/comments/__snapshots__/jsfmt.spec.js.snap

@@ -198,6 +198,46 @@ printWidth: 80
 ================================================================================
 `;
 
+exports[`in-value.less format 1`] = `
+====================================options=====================================
+parsers: ["less"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+.real-world-example {
+  background: radial-gradient(
+      circle at left 0% bottom $position,
+      transparent,
+      transparent $diameter,
+      #fbfbfb calc(#{$diameter} + 1px) // Add 1px for edge-smoothing.
+    );
+}
+
+.simplification { 
+  foo: (
+    calc() // not a comment anymore
+  );
+}
+
+=====================================output=====================================
+.real-world-example {
+  background: radial-gradient(
+    circle at left 0% bottom $position,
+    transparent,
+    transparent $diameter,
+    #fbfbfb calc(#{$diameter} + 1px) // Add 1px for edge-smoothing.
+  );
+}
+
+.simplification {
+  foo: (
+    calc() // not a comment anymore
+  );
+}
+
+================================================================================
+`;
+
 exports[`issue-8130.less format 1`] = `
 ====================================options=====================================
 parsers: ["less"]

tests/less/comments/in-value.less

@@ -0,0 +1,14 @@
+.real-world-example {
+  background: radial-gradient(
+      circle at left 0% bottom $position,
+      transparent,
+      transparent $diameter,
+      #fbfbfb calc(#{$diameter} + 1px) // Add 1px for edge-smoothing.
+    );
+}
+
+.simplification { 
+  foo: (
+    calc() // not a comment anymore
+  );
+}

tests/scss/comments/__snapshots__/jsfmt.spec.js.snap

@@ -338,6 +338,46 @@ printWidth: 80
 ================================================================================
 `;
 
+exports[`in-value.scss format 1`] = `
+====================================options=====================================
+parsers: ["scss"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+.real-world-example {
+  background: radial-gradient(
+      circle at left 0% bottom $position,
+      transparent,
+      transparent $diameter,
+      #fbfbfb calc(#{$diameter} + 1px) // Add 1px for edge-smoothing.
+    );
+}
+
+.simplification { 
+  foo: (
+    calc() // not a comment anymore
+  );
+}
+
+=====================================output=====================================
+.real-world-example {
+  background: radial-gradient(
+    circle at left 0% bottom $position,
+    transparent,
+    transparent $diameter,
+    #fbfbfb calc(#{$diameter} + 1px) // Add 1px for edge-smoothing.
+  );
+}
+
+.simplification {
+  foo: (
+    calc() // not a comment anymore
+  );
+}
+
+================================================================================
+`;
+
 exports[`lists.scss format 1`] = `
 ====================================options=====================================
 parsers: ["scss"]

tests/scss/comments/in-value.scss

@@ -0,0 +1,14 @@
+.real-world-example {
+  background: radial-gradient(
+      circle at left 0% bottom $position,
+      transparent,
+      transparent $diameter,
+      #fbfbfb calc(#{$diameter} + 1px) // Add 1px for edge-smoothing.
+    );
+}
+
+.simplification { 
+  foo: (
+    calc() // not a comment anymore
+  );
+}