fidian
commented
10 years ago TL;DR cssbeautify + csslint almost fit our needs
This might be a bit long. Brace yourself.
Once upon a time with a wonderful development team, there existed some really awful code. JavaScript, PHP, CSS, HTML, etc. We decided that pretty printed code would be best and then everyone's individual coding styles would be eliminated. All code would look the same, letting eyes parse the code faster because it was always in a standard layout. We decided to use git hooks (see git-started) and existing tools where possible. Reusing existing tools or adapting existing tools is the most ideal solution.
For CSS we initially were using cssbeautify and a separate linter (csslint, I believe). CSSBeautify didn't quite format some of the rules we had, and I'm unable to remember specifics. I believe that they were with some animations and functions. It was also very limited on controlling all of the whitespace in the file. Our viewpoint was that a pretty printer should manage every space, tab, and newline. I should be able to give minified CSS or weirdly spaced out rules (border: 1px solid \n black) and get back pristine CSS exactly how a browser would render it. Also the linter was unable to cope with some CSS3 or didn't prevent us adequately from doing stupid things.
One of our constraints was that we didn't really want to install a whole Ruby/Python toolchain on all of the machines in order to get a pretty printer working. It mostly had to work with what we already had. After much searching for alternate tools or determining what it would take to modify existing tools, we decided that none out there would fill our needs and there was much sadness across the empire. Thus started a little side project to create a pretty printer.
I think that PrettyCSS takes a different approach from cssbeautify and manages every single bit of whitespace. It is also like csslint but also adds in extra warnings and CSS3 support. It's name perhaps should be updated to reflect that the bulk of its work is in validation, linting, and early detection of cross-browser problems.
Is it perfect? Heck, is it even laid out nicely internally? No. Not at all. That's why I started other projects and have lots of open issues in this project. Here's a couple projects I've made, with a bit of background on them.
- Complexion, for instance, is a faster tokenization library than what PrettyCSS uses. I've used it to make pretty-js, which I think is pretty darn fast. I absolutely hate waiting around for tools to work. I'm working on a CSS ruleset for Complexion and will integrate that into PrettyCSS when it's ready.
- process-files lets me process files from the command line, including support for reading from stdin. It's written for pretty-js and is going to get merged into the prettycss binary.
- You've also seen option-parser, and that was written for this project as well. I didn't use lots of option parsing tools when I wrote this library because they all seemed to lack one feature or another. Many didn't support POSIX style arguments. Most didn't generate help. So I surveyed what was out for many languages and wrote option-parser. Since then other good libraries were also published, but I'm of course a bit fond of the one I wrote.
Progress is really slow. I can understand that people may have a hard time contributing to this project because of the internal complexity, and that's regrettable. However, I do intend to keep this project maintained and eventually rewrite the internals and add even more tests. When I do finish the incremental rewrite, I suspect many things about this project will change. For instance, I feel the configuration options are a bit messy. I'd like to follow npm's package naming conventions and use "pretty-css" instead, then also make the binary "pretty-css" to match. The rules should be in a much nicer format for reading and maintenance; reading the JS code is extremely tedious. Allowing LESS, SCSS, SASS syntax and eventually building in the preprocessors. Better debugging. The list goes on and on.
I welcome suggestions from anyone else for more features!
Extremely long winded reply, but I thought I should put it all down and then I can direct others here as well. Thanks for making it through to the end!
wamatt
Do you have any thoughts on why you started this project and how it compares?
Thanks + keep it up.