So what’s up with Stylus?

About Stylus, Styl and the future of CSS preprocessors

A short introduction

Stylus, like SASS is a CSS preprocessor. These CSS-like languages get parsed into regular old CSS that can be parsed by your browser. Each language has a slightly different syntax and while SASS is written in Ruby, Stylus is written in JavaScript.

Being a Node.js developer I find it a bit cumbersome to use a preprocessor with a completely different ecosystem and syntax. How bad I feel about Ruby, how good I feel about Sass. Sass is very good: it has the largest developer ecosystem of any preprocessor, features the largest amount of plugins and just recently got official Chrome support (for source maps). It also has quite some features that Stylus doesn’t such as @content.

Nevertheless I still prefer the node-based Stylus. I can simply npm update it, look at the code and understand what is going on (kind of, compare that to node-sass for example) and build packages on top of it like it were nothing. Stylus has a lean syntax that is very tolerant and is pretty fast.

The present

For a while everything seemed to go well with Stylus. It gained a lot of attention and people seemed to be switching. But since a few months things have slowed down a bit: there are 388 open issues at the time of writing, 65 pull requests and it’s been 2 months since the last update. What has happened?

The maker of Stylus, TJ Holowaychuck, hasn’t vanished from the planet, instead he’s been working on Rework, the modularized preprocessor framework. Framework? Yes, it’s a framework to build preprocessors on. And built on top of that comes Styl, a configuration of Rework that’s pretty much the same as Stylus with one big exception: Styl doesn’t feature a runtime. It says so in the README. What this means is that it doesn’t support complex logic and most likely never will. But it is however blazingly fast, up to 100 times faster if I’m not mistaken.

So what’s wrong?

Stylus has a name but lost support. Styl doesn’t have a name, but is being developed actively. Stylus features a rich amount of options, Styl is simple but fast. The problem that arises here is that both frameworks excel in one thing, but lack the complementary features. Stylus is hard to maintain, Styl is fresh and new. I say we need a solution.

The proposition

I’m probably not the first to say this, but I suggest we build an iteration module (or mine it from stylus), merge it into Rework, make Styl handle it correctly and then merge Styl into Stylus. Yes, things will be broken. Yes, people will wonder why the syntax has changed. And yes, things will be better. We’ll have a fast preprocessor, built on modules, on node, which can be extended into infinity. I hope it happens, I wouldn’t want to end up using Sass because there’s no other choice.

Oh and if you’re reading this, keep up the good work TJ. Whatever criticism you may find in this post, it’s with the best intentions.

Sincerely,

Yoshua

Removing features to make things faster can feel a bit like removing all the seats from a car just to speed it up.