CSS variable comments next to code not getting removed

[akicho8]

I am trying to migrate from node-sass to dart-sass, but the handling of comments next to CSS variables is different between node-sass and dart-sass, causing warnings to occur and potentially breaking the CSS when switching to sass. After experimenting with a small sample, I realized that I could remove the comments on the right side of the CSS variables by converting sass to scss format, but since I have a lot of existing sass code written with node-sass and also want to continue writing in sass format, I do not want to convert everything to scss just for this issue. Is there a way to remove comments next to CSS variables in sass format, similar to how it's done with node-sass?

Steps to reproduce

cat <<EOF | sass --stdin --indented
:root
  --foo: white // comment1
body
  background-color: black // comment2
  color: var(--foo)
EOF

After conversion:

:root {
  --foo: white // comment1;
}

body {
  background-color: black;
  color: var(--foo);
}

Expected behavior

--foo: white;

Actual behavior

--foo: white // comment1;

The comment1 remains and is considered as part of the value, therefore it is not properly interpreted as CSS.
The comment2 has been properly deleted.

System configuration

$ sass --version
1.63.2 compiled with dart2js 3.0.3

[connorskees]

This is intended behavior of Sass. See sass/sass#2770 and https://sass-lang.com/documentation/style-rules/declarations/#custom-properties.

sass/sass#2586 (comment) contains some workarounds for this behavior.

[akicho8]

@connorskees After reading related articles, I changed the comments from // to /* */, and though it felt odd to have a comment before the semicolon, it was correctly interpreted by the browser. I would not have understood this had I not received your advice. Thank you.