Client side usage of Stylus (CSS)

Question

the new guy here. I've been looking for a good solution to using Stylus (compiled CSS) client side.

Now, I know the tips regarding not using compiled CSS client side because:

1. It breaks if JS is not in use.
2. It takes extra time to compile in a live client environment.
3. It needs to be recompiled at every single client, which just isn't green.

However, my environment is an extension made for Chrome and Opera. It works in a JS environment and it works offline, so neither 1, 2 or 3 applies. What I'm really looking for here is just a way to write CSS more efficiently with less headaches, more variables, nesting and mixins.

I have tried Less, which is the only one of the trio Less, Sass and Stylus which currently works nicely client side. So, does anyone know a good solution for Stylus?

Answer 1

CSS Preprocessors aren't actually meant to be run client-side. Some tools (i.e. LESS) provide a development-time client-side (JavaScript) compiler that will compile on the fly; however, this isn't meant for production.

The fact that Stylus/Sass do not provide this by default is actually a good thing and I personally wish that LESS did not; however, at the same time, I do realize that having it opens the door to people that may prefer to have some training wheels which can help them along in the beginning. Everyone learns in a different way so this may be just the feature that can get certain groups of people in the door initially. So, for development, it may be fine, but at the time of this writing, this workflow is not the most performant thing to do in production. Hopefully, at some point, most of the useful features in these tools will be added to native CSS then this will be a moot point.

Right now, my advice would be to deploy the compiled CSS only and use something like watch or guard or live-reload or codekit (or any suitable equivalent file watcher) in development so your stylus files are getting re-compiled as you code.