diff --git a/changelog_unreleased/css/16583.md b/changelog_unreleased/css/16583.md new file mode 100644 index 000000000..210447c55 --- /dev/null +++ b/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. + + +```css +/* Input */ +h1 { + --OFF: /* OFF */; +} + +/* Prettier stable */ +h1 { + --OFF: /* OFF *; +} + +/* Prettier main */ +h1 { + --OFF: /* OFF */; +} +``` diff --git a/src/language-css/parser-postcss.js b/src/language-css/parser-postcss.js index e549e48e1..ff46fa30f 100644 --- a/src/language-css/parser-postcss.js +++ b/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) { diff --git a/tests/format/css/comments/15948.css b/tests/format/css/comments/15948.css new file mode 100644 index 000000000..1937a1c1d --- /dev/null +++ b/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 */; +} diff --git a/tests/format/css/comments/__snapshots__/format.test.js.snap b/tests/format/css/comments/__snapshots__/format.test.js.snap index f4d57dee8..330099c33 100644 --- a/tests/format/css/comments/__snapshots__/format.test.js.snap +++ b/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"] diff --git a/tests/format/scss/comments/__snapshots__/format.test.js.snap b/tests/format/scss/comments/__snapshots__/format.test.js.snap index ba1ca68b2..4fe0ca126 100644 --- a/tests/format/scss/comments/__snapshots__/format.test.js.snap +++ b/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 */ }