Fix formatting of incomplete CSS value comments (#16583)

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

changelog_unreleased/css/16583.md

@@ -0,0 +1,23 @@
+#### Fix formatting of incomplete CSS value comments (#16583 by @sosukesuzuki, @fisker)
+
+When formatting CSS value comments, the trailing `/` may be lost, resulting in an invalid comment.
+
+This change ensures that value comments are not truncated.
+
+<!-- prettier-ignore -->
+```css
+/* Input */
+h1 {
+  --OFF: /* OFF */;
+}
+
+/* Prettier stable */
+h1 {
+  --OFF:  /* OFF *;
+}
+
+/* Prettier main */
+h1 {
+  --OFF: /* OFF */;
+}
+```

src/language-css/parser-postcss.js

@@ -109,9 +109,7 @@ function parseNestedCSS(node, options) {
         ? (node.raws.value.scss ?? node.raws.value.raw)
         : node.value;
 
-      value = value.trim();
-
-      node.raws.value = value;
+      node.raws.value = value.trim();
     }
 
     let params = "";
@@ -161,7 +159,7 @@ function parseNestedCSS(node, options) {
       return node;
     }
 
-    if (value.length > 0) {
+    if (value.trim().length > 0) {
       const defaultSCSSDirectiveIndex = value.match(DEFAULT_SCSS_DIRECTIVE);
 
       if (defaultSCSSDirectiveIndex) {

tests/format/css/comments/15948.css

@@ -0,0 +1,12 @@
+h1 {
+  --OFF: /* OFF */;
+  --OFF:  /* OFF */;
+  --OFF:   /* OFF */;
+  --OFF:    /* OFF */;
+  --OFF:     /* OFF */;
+  --OFF:      /* OFF */;
+  --OFF:       /* OFF */;
+  --OFF:        /* OFF */;
+  --OFF:         /* OFF */;
+  --OFF:          /* OFF */;
+}

tests/format/css/comments/__snapshots__/format.test.js.snap

@@ -1,5 +1,41 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`15948.css format 1`] = `
+====================================options=====================================
+parsers: ["css"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+h1 {
+  --OFF: /* OFF */;
+  --OFF:  /* OFF */;
+  --OFF:   /* OFF */;
+  --OFF:    /* OFF */;
+  --OFF:     /* OFF */;
+  --OFF:      /* OFF */;
+  --OFF:       /* OFF */;
+  --OFF:        /* OFF */;
+  --OFF:         /* OFF */;
+  --OFF:          /* OFF */;
+}
+
+=====================================output=====================================
+h1 {
+  --OFF: /* OFF */;
+  --OFF: /* OFF */;
+  --OFF: /* OFF */;
+  --OFF: /* OFF */;
+  --OFF: /* OFF */;
+  --OFF: /* OFF */;
+  --OFF: /* OFF */;
+  --OFF: /* OFF */;
+  --OFF: /* OFF */;
+  --OFF: /* OFF */;
+}
+
+================================================================================
+`;
+
 exports[`CRLF.css format 1`] = `
 ====================================options=====================================
 parsers: ["css"]

tests/format/scss/comments/__snapshots__/format.test.js.snap

@@ -751,12 +751,12 @@ $var: /* comment 1 */ all /* comment 2 */ !default /* comment 3 */ ; /* comment
 }
 
 =====================================output=====================================
-$var: /* comment 1 */ all /* comment 2 */ !default /* comment 3 */; /* comment 4 */
+$var: /* comment 1 */ all /* comment 2 */ !default /* comment 3 */ ; /* comment 4 */
 
 @mixin text-color {
   /* comment 5 */
   /* comment 6 */
-  $text-color/* comment 7 */ : /* comment 8 */ red /* comment 9 */ !default /* comment 10 */; /* comment 11 */
+  $text-color/* comment 7 */ : /* comment 8 */ red /* comment 9 */ !default /* comment 10 */ ; /* comment 11 */
   /* comment 12 */
   color: $text-color;
 }
@@ -764,7 +764,7 @@ $var: /* comment 1 */ all /* comment 2 */ !default /* comment 3 */; /* comment 4
 .error {
   /* comment 13 */
   /* comment 14 */
-  $text-color/* comment 15 */ : /* comment 16 */ green /* comment 17 */ !global /* comment 18 */; /* comment 19 */
+  $text-color/* comment 15 */ : /* comment 16 */ green /* comment 17 */ !global /* comment 18 */ ; /* comment 19 */
   /* comment 20 */
 }