I’ve been hesitant on publishing this, because I’m never happy with the code I write. As it happens, I have the same problem with writing articles for my blog as well (some people tell me I simply try too hard…). Anyway, without further delay, I present to you my latest pet project: Less.NET!
What is Less.NET?
Less.NET is a C# port of the LessCSS ruby gem. I have been using LessCSS in a few test projects, and I am really happy with the way it structures my CSS files (see http://www.lesscss.org for more info).
Why port to .NET?
This is actually a multipart story. First off, I want to be able to simply use a IHttpHandler implementation which I can wire up in my web.config to parse lessCSS files and output CSS, directly. With the ruby gem I managed this by writing a very crude wrapper which fires off a new process which executes the less compiler. Not only is this very clunky, it’s also not really reliable. I needed (read: wanted) a better way to do this.
The second part is that ruby is simply too slow to my liking (cue ‘define slow’ discussion!). The parsing of the files starts to take a significant amount of time when files get bigger/more complex, which I think is better spent coding.
Third, and perhaps the most important reason: I want to learn. Parsing CSS is a nice way to learn how to parse a DSL using Antlr, something I wanted to try for a while. Little did I know that CSS can get pretty complex when adding all those little, unknown, hardly supported features that are in CSS3… I also wanted to get some hands on experience with running an open-source project, although I don’t know if I’ll really get the community input I’m hoping for.
How it works
Less.NET is written in C#, using Antlr to generate a lexer/parser, Linq to objects for a few collection based operations and mainly a lot of (way too verbose) code. It’s still in a pre-pre-pre-alpha stage, possibly even a throw-away-prototype. The flow of the library is basically this:
(Less)CSS –> Lexer –> Parser –> Less.NET object tree –> some magic on the tree –> CSS
I’ve highlighted the bits that are at the core of the library. The object tree is a pretty simple model, starting with a simple document, branching to rules, variables, selectors and properties.
- Document
- Rules
- Selectors
- Properties
- Rules
- Mixins
- Variables
Using this tree, I can easily traverse the tree, flatten it (merge all nested rules with their parents), evaluate the mixins/variables and output some CSS. That’s all there is to it!
Roadmap
Currently, I’m getting all specs taken from the ruby sources to pass, or at least to generate equivalent CSS. Due to different processing steps it might be possible that the CSS output string is not 100% equal to the ruby gem’s output. The semantics of the output should be the same though. Aside from that, I’m trying to come up with meaningful things to test. I’ve noticed that while writing/changing the grammar, I’ve broken my build many times. I think the first thing I’m going to write tests for is the parser, testing all rules for expected output.
To put it into measurable blocks, this is what I want to have before adding the version 0.1 label to the project:
Where to find it
You can find the sources on github: http://github.com/erikvanbrakel/less.net/
A few notes on the sources. It might not build. It might contain duplicate code. It might be ugly altogether. Please remember that it’s a prototype, with a LOT of refactoring to do. If you want to help me out, drop me a line on twitter (@erikvanbrakel), or via github. Help can be anything ranging from antlr work (grammar definition) to C# coding, even simply giving suggestions or tips on how to improve the code is good. Heck, even simply saying you’re following it helps, because that gives me incentive to put more time in it!
Thanks to:
Now go, go and give me some feedback!
Update
LessCss for .NET is now available in the form of .Less. I teamed up with Chris and Daniel, we moved to Chris’ codebase and worked from there. The source, latest builds and google community are linked directly from the site at http://www.dotlesscss.com/.
Game on!