Inline comments are considered part of the value in CSS Custom Properties

[oscarmarcelo]

I understand that custom properties have big implications in terms of the unpredictability in their values, but at least comments should be properly handled.

Tested in:

• Dart Sass 1.23.3 (locally)
• Dart Sass 1.18.0 (SassMeister)
• Node Sass 4.13.0 (locally)
• LibSass 3.5.4 (SassMeister)

Test Case

div
  --color: #fff // Comment
  --color: #fff /* Comment */

Expected

div {
  --color: #fff;
  --color: #fff; /* Comment */
}

Result

// Dart Sass
div {
  --color: #fff // Comment;
  --color: #fff /* Comment */;
}

// LibSass/Node Sass
div {
  --color: #fff;
  --color: #fff /* Comment */;
}

[nex3]

Dart Sass's output is correct here. The CSS custom properties spec allows nearly anything in the value of the comment, and because custom property values are accessible to JS any pre-processing would make Sass no longer a CSS superset. As such, Sass-specific features are turned off in custom property values, with the sole exception of interpolation.

Note that because loud comments are a CSS construct that doesn't produce a CSS token node, we could theoretically omit those, but we generally include loud comments in CSS output anyway so I don't think that makes sense either.