feat(fmt): support CSS, SCSS, Sass and Less

[g-plane]

This PR integrates Malva into deno fmt, which introduces the ability to format CSS, SCSS, Sass and Less files.

On Linux x64 6.10, this PR increases about 800KiB:

󰈺  deno  fmt-css  1                                                                                                                                                                                             
❯ wc -c target/release/deno
125168728 target/release/deno

󰈺  deno  main  1                                                                                                                                                                                                
❯ wc -c target/release/deno
124349456 target/release/deno

[castarco]

@g-plane any chance of this being integrated into Biomejs as well? 🥺

[g-plane]

No. Underlying AST structures can't be shared. If you want to format CSS, SCSS, Sass and Less with Malva but more configurable, you can also use Malva as a dprint plugin, while using Biome to format TypeScript or JavaScript.

[dsherret]

Exciting! Looks go to me. We'll merge this soon.

[crowlKats]

Just tested this, however getting panics consistently in multiple projects due to Formatting not stable. Bailed after 5 tries..
Files that this triggered on:

• https://github.com/denoland/docs/blob/2663420f4b87b290c39f8dfae53faeb5d98af777/styles.css
• https://github.com/denoland/docs/blob/2663420f4b87b290c39f8dfae53faeb5d98af777/overrides.css
• https://github.com/denoland/deno_doc/blob/fe93d097a8df3eb1aae87af8371a5cf3162b2182/src/html/templates/styles.css

[g-plane]

@crowlKats Fixed. Please try again.

[crowlKats]

@g-plane tried on the above files, and works nicely. tried with JSR though, and am getting

Error formatting: /Users/crowlkats/projects/deno/denoland/jsr/frontend/static/styles.css
   syntax error: expect token `{`, but found `(`

in this file https://github.com/jsr-io/jsr/blob/main/frontend/static/styles.css.
The error message itself is not very useful.

And one more tweak:

these are now a bit more annoying harder to read, it would be nice if they would be indented, like this:

[g-plane]

Here's an invalid syntax:
https://github.com/jsr-io/jsr/blob/7339d0d05b1536fed94a3ba45ecb106e58dd3e17/frontend/static/styles.css#L147

LightningCSS also doesn't allow this: playground, and Biome also doesn't allow this: playground, so you may need to update it.

[dsherret]

@g-plane do you know why it doesn't say the line and column number of the syntax error? It would be nice to improve that.

[g-plane]

The parser doesn't provide line and column information, but it provides offset position so we can do some calculations.

[crowlKats]

Here's an invalid syntax:
https://github.com/jsr-io/jsr/blob/7339d0d05b1536fed94a3ba45ecb106e58dd3e17/frontend/static/styles.css#L147

I see, however since tailwind is extremely spread throughout the deno styling ecosystem, especially with fresh supporting it out of the box, so we should support this, even if its not spec compliant

[g-plane]

@dsherret I found that Deno is already using codespan-reporting crate, and I think we can re-use this to generate better error message.

[g-plane]

@crowlKats Please test more repositories as possible so that I can fix them together, instead of releasing new version of formatter again and again.

[g-plane]

@crowlKats @dsherret All problems are solved.

[bartlomieju]

Thanks @g-plane! We'll check it out and merge. Since it's gonna be an unstable feature for the time being it's fine to have more bugs, we'll make sure to open issues if we get any reports.

[crowlKats]

All our cases seem covered & working, so LGTM!

[bartlomieju]

LGTM!

[marvinhagemeister]

@g-plane This is amazing! Super excited about having this in Deno 💯