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?

Hydrotropism

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.

Arsis

I'm happy as long as i get to write Stylus in dev, then deploy CSS to the clients browsers. Thanks! I'll try Watch. – Hydrotropism

I would also recommend this version of watch (github.com/visionmedia/watch#about). I've linked to the about section of the README which lists the enhancements over the original. – Arsis

I know this is kind of an old topic/thread, but I'm curious as to why exactly you think it shouldn't be compiled on the fly. I've been using build processes with preprocessors like Grunt for years, building out behemoth build/deployment processes and frankly, I'm getting a little tired of them. I wish modern browsers would just support these alternative syntaxes already... – Crystallization

@Crystallization Hopefully my latest edit answers your question. – Arsis

compiled LESS / CSS on the fly in browsers in development mode is a totally valid technique. Even more so with things like hot-module swapping. – Feaster

Answer 2

This page likely has the solution: http://learnboost.github.io/stylus/try.html

It seems to be compiling Stylus on the fly.

Feaster

This has it. stylus(str).render(function(err, cssStr){ ... }); Then just add the CSS inside style element. – Depository

what is the lib to do that? – Frigid

They are including a minified version of stylus: stylus-lang.com/try/stylus.min.js. If you put that script on any page you will have access to the stylus(src).render() functionality – Mandorla

Answer 3

Stylus is capable of running in the browser

There's a client branch available in the GitHub repo

Gokey

Answer 4

I don't totally understand your question but I'll offer some of the experience I've have with compiled css using LESS.

Earlier implementations needed javascript to compile the LESS files into CSS in the browser, I've never tried to work this way didn't seem that great to me and as you say if JS is switched off your in for a rough time.

I've been using applications recently to compile the LESS code into valid CSS, this gets around the need for JS to convert the source code.

The first application I used was crunch http://crunchapp.net/ which worked quite well but didn't compile the css on the fly.

The application I'm using now is called simpless http://wearekiss.com/simpless and this creates valid css on the fly so as soon as I've hit save in sublime text and refresh in the browser I can see my changes to the css.

Using this work flow, I'm able to get around the issues your raised above, when I'm done doing development I just upload my css file outputted from simpless which is also heavily minified which also saves time in terms of needing to optimise the css further.

I hope I have understood the question correctly, if not apologies.

Cheers, Stefan

Elapse

Extensions (kind of) requires JS, so I'm certain it's switched on. Simpless looks interesting, and Sublime too for that matter. I'll give that workaround a try. – Hydrotropism