connorskees / grass

A Sass compiler written purely in Rust
https://docs.rs/grass/
MIT License
499 stars 38 forks source link

Comments in --var not removed #75

Closed eugenesvk closed 1 year ago

eugenesvk commented 1 year ago

upd: I see that it's a common sass misfeature https://github.com/sass/sass/issues/2770 so unlikely to expect grass to deviate

I'm using grass via zola SSG and I've noticed that comments in --var are not stripped from the output, thus breaking my ability to add comments with explanations for colors

// file.sass
:root.light
  --var:    oklch(.87 0   90)   // comment not removed in the output

I see that CSS variables should include everything, notably comments https://github.com/connorskees/grass/pull/67 on https://github.com/connorskees/grass/issues/19, which is maybe related and implies this is intentional, but I don't understand the reason behind that, the comments like these aren't meant to be included Although that example has foo: //; a semicolon, while the one I'm using is the cleaner sass version, so maybe this explains it?

(although some online dart sass tools strip the comments properly fro this format)

connorskees commented 1 year ago

Yes, this isn't super intuitive behavior, but grass may not deviate from other implementations here.

Being a superset of CSS, Sass must allow (almost) any value -- including what look like Sass comments -- to be part of custom properties. Although this is potentially surprising behavior, there are some users that rely on accessing such variables from JavaScript, and so Sass must parse custom properties specially.

It seems that libsass has a bug in which silent comments are stripped from custom properties, only for the indented syntax, which is why the online tools would not have this behavior. Ruby Sass and dart-sass have never had this bug.

You should be able to work around this by using loud comments, /* ... */, which will still be emitted but will be ignored by CSS.

eugenesvk commented 1 year ago

Thanks for the detailed explanation, yeah, found it out and am using the /**/ now (though this article I read says that Ruby sass also had this feature https://sass-lang.com/documentation/breaking-changes/css-vars)

By the way, what do you think about having a flag/option to enable the more convenient parsing?

connorskees commented 1 year ago

I've thought about a flag like "libsass quirks mode" that makes parsing more similar to libsass, but I wouldn't want to deal with the added maintenance burden of this. I would be hesitant to add a general flag for grass-specific parsing changes for similar reasons, in addition to compatibility concerns with other Sass implementations.

eugenesvk commented 1 year ago

Found a trick to use proper comments in the output, #{interpolation} in the property name disables this quirk and uses regular Sass parsing behavior

https://github.com/sass/sass/issues/2586#issuecomment-438050730

:root.light
  #{--var}: oklch(.87 0   90)   // comment are removed in the output!!!