mozilla/zamboni — pull request #650 by cvan (2013-03-03 02:28:54+00:00)
Title: Stylus support

Turns out LESS is becoming *less* and *less* maintained (and is hella slow). Also, turns out Stylus is amazing (and is hella fast).

* [LESS](https://github.com/cloudhead/less.js) requires node.js.
* [SASS](https://github.com/nex3/sass) requires Ruby.
* [Stylus](https://github.com/LearnBoost/stylus) requires node.js.

Some of its niceties:

* [mixins with default values](http://learnboost.github.com/stylus/docs/mixins.html)
* [keyword arguments](http://learnboost.github.com/stylus/docs/kwargs.html)
* [rest... arguments](http://learnboost.github.com/stylus/docs/vargs.html)
* [automatic vendor prefixing (if we want)](http://learnboost.github.com/stylus/docs/keyframes.html)
* so much more…

Oh, and did I mention [automatic recompilation out of the box](http://learnboost.github.com/stylus/docs/middleware.html)?

How is it syntactical different from LESS?
* Nesting format stays the same. Still use curly braces.
* For variables instead of `@` use `$`.
* For mixins instead of `.mixin()` write `mixin()`.
* Instead of overloading the mixins for optional arguments, use default argument values.

Blockers:
* https://github.com/jsocol/jingo-minify/pull/42
* IT to use `npm install` (I've added `stylus` to our `package.json`)

I did a visual comparison, and did a `diff` of the files and they're almost nearly identical, save some rounding for `fade-out` and `darken` calculations.

I'd like to do this with AMO too - I've got a [script](https://gist.github.com/cvan/5061790) so the conversion is pretty trivial.

Using stylus shaves quite a few seconds off `compress_assets`:

python manage.py compress_assets --settings=settings_local_mkt 16.00s user 2.34s system 99% cpu 18.420 total
python manage.py compress_assets --settings=settings_local_mkt 26.14s user 3.84s system 99% cpu 30.095 total

And the file-size differences:

less/:
-rw-r--r-- 1 chris wheel 82191 Mar 2 18:03 consumer-all.css
-rw-r--r-- 1 chris wheel 104768 Mar 2 18:03 consumer-desktop-all.css
-rw-r--r-- 1 chris wheel 123795 Mar 2 18:03 devreg-all.css
-rw-r--r-- 1 chris wheel 70614 Mar 2 18:03 ecosystem-all.css
-rw-r--r-- 1 chris wheel 22132 Mar 2 18:03 in-app-payments-all.css
-rw-r--r-- 1 chris wheel 6682 Mar 2 18:03 lookup-all.css
-rw-r--r-- 1 chris wheel 29934 Mar 2 18:03 offline-all.css
-rw-r--r-- 1 chris wheel 84749 Mar 2 18:03 reviewers-all.css
-rw-r--r-- 1 chris wheel 16344 Mar 2 18:03 splash-all.css
-rw-r--r-- 1 chris wheel 33854 Mar 2 18:03 stats-all.css
-rw-r--r-- 1 chris wheel 5455 Mar 2 18:03 themes-all.css

styl/:
-rw-r--r-- 1 chris wheel 76288 Mar 2 18:01 consumer-all.css
-rw-r--r-- 1 chris wheel 98934 Mar 2 18:01 consumer-desktop-all.css
-rw-r--r-- 1 chris wheel 121588 Mar 2 18:01 devreg-all.css
-rw-r--r-- 1 chris wheel 58383 Mar 2 18:01 ecosystem-all.css
-rw-r--r-- 1 chris wheel 16357 Mar 2 18:01 in-app-payments-all.css
-rw-r--r-- 1 chris wheel 6637 Mar 2 18:01 lookup-all.css
-rw-r--r-- 1 chris wheel 25061 Mar 2 18:01 offline-all.css
-rw-r--r-- 1 chris wheel 83728 Mar 2 18:01 reviewers-all.css
-rw-r--r-- 1 chris wheel 16551 Mar 2 18:01 splash-all.css
-rw-r--r-- 1 chris wheel 33693 Mar 2 18:01 stats-all.css
-rw-r--r-- 1 chris wheel 5426 Mar 2 18:01 themes-all.css

The main benefit as I see it to using Stylus is the rapid compilation, which makes this a great candidate for Fireplace. This streamlines our development and deployment for Marketplace as a packaged app.