search

tweag / topiary

https://topiary.tweag.io/
MIT License
511 stars 17 forks source link

Add CSS formatter #699

Closed lavigneer closed 3 months ago

lavigneer commented 3 months ago

Add CSS Formatter

Description

Hi there! First off I'd like to say I think this project is really neat, I like how you're leveraging existing treesitter grammars to do code formatting. I was hoping to help contribute to this project as I'd love to see it grow and I thought adding a CSS formatter would be not overly challenging but useful.

I wanted to build as close to an approximation in terms of formatting is Prettier, which is the go to formatter in the web ecosystem at the moment. I first built a script that scraped all the examples from https://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/html/full/flat/index.html and put them in the test css files that I ran my queries against. My original plan was to commit that as the test case but I realized a real-world example would be more useful and in fact there were some things missing in those w3 examples, like animation keyframes and charset to name a couple.

I noticed you use bootstrap in your website pacakge, so I opted instead to pull the minified version of the latest bootstrap utilities build and run it through my formatter to get the expected result. To ensure that the formatter I added was in fact doing what it should have, I also ran the same minified bootstrap css through prettier and ran a diff against my format and theirs. The only differences were changes to the actual content in some places by prettier. Specifically it added a 0 before any decimal numeric that was not greater than 1 (e.g., .75 -> 0.75) and removing quotes around the data-bs-theme value selectors. See prettier-diff.txt for the entire diff.

Please let me know if there's anything I could do better or if you're not accepting PRs for new language support at this time, I certainly understand and can close this off.

Thanks for your time.

P.S. there were a few things I noticed while trying to work on this that may be useful information:

  1. There doesn't seem to be a way to have something for max line width. Perhaps leveraging the softline captures to tell the formatter that it's ok to wrap long lines of code across multiple lines without requiring the developer to multiline first?
  2. There is no way to force newlines between items. You can allow newlines above something with allow_blank_line_before, but in some cases it could be useful to not only allow it but enforce it?
  3. The nix develop command appears to be in a broken state right now. I spent some time debugging it and it appears that the revision of tree-sitter-bash that you are pinned to references a revision of a submodule for https://git.savannah.gnu.org/git/bash.git that does not exist. The specific error I get is Cannot find Git revision 'a99d905216cc0aac5de0c3050f4afc54e21c6bc5' in ref 'refs/heads/master' of repository 'https://git.savannah.gnu.org/git/bash.git'!

Checklist

Checklist before merging:

lavigneer commented 2 months ago

Thanks for taking the time to take a look at this and merging it in so quickly. I'll try to keep an eye on any issues that might come up with the css formatting and can lend a hand where desired.