Loop a Stylus command in Elixir

Question

I have switchable themes and colors for my site, and I need Elixir/Gulp to render all the possible theme-color combinations as CSS files. Here's my gulpfile.js:

var gulp = require('gulp'),
    notify = require('gulp-notify'),
    elixir = require('laravel-elixir'),
    stylus = require('laravel-elixir-stylus'),
    watch = require('gulp-watch');

var themes = [
    "alpha",
    "beta"
];

var colors = [
    "blue",
    "red",
    "green"
];

if(elixir.config.babel)
    elixir.config.babel.enabled = false;

elixir(function(mix) {
    for(ti = 0; ti < themes.length; ++ti) {
        for(ci = 0; ci < colors.length; ++ci) {
            mix.stylus([
                'colors/'+colors[ci]+'.styl',
                'themes/'+themes[ti]+'/main.styl'
            ], "public/css/"+themes[ti]+"."+colors[ci]+".css");
        }
    }
});

To me, it looks like this should run. I tested the loop, and I know it goes through every theme-color combination just fine.

However, when I run it, it creates a folder beta.green.css, inside of which are two files, main.styl and green.styl.

How do I make this generate all of the Stylus commands, and not just the last one?
How do I make it combine the results in a single file, and not two separate files in a folder?

If you want to include multiple files in the directory, use `*.extension`. — Ali Gajani, Jul 13 '15 at 00:53
But the idea is that I need to have multiple files going to multiple destinations. Includes inside the main.styl handle getting all the other files, but what I need is for each iteration of the for-inside-a-for to generate its own destination file. — Emphram Stavanger, Jul 13 '15 at 00:55

score 2 · Accepted Answer · answered Jul 17 '15 at 12:47

Eventually ended up ditching Elixir altogether and just doing it in pure Gulp;

gulp.task('styles', function(cb){
    async.each(themes, function(theme, done) {
        async.each(colors, function(color, next) {
            gulp
                .src([
                    './resources/assets/stylus/colors/'+color+'.styl',
                    './resources/assets/stylus/themes/'+theme+'/main.styl'
                ])
                .pipe(stylus())
                .pipe(concat(theme+"."+color+'.css'))
                .pipe(gulp.dest('./public/css'))
                .on("end", next);
        }, done);
    }, cb);
});

score 0 · Answer 2 · answered Jul 13 '15 at 05:02

Maybe laravel-elixir-stylus shouldn't be called multiple times? (Or maybe, this is a bug … if you look at the end of the implementation, you can see that tasks are being queued with the name stylus, probably overwriting each other) – so only the last one queued (beta + green) gets executed.
The second argument to mix.stylus is an output directory, pass in just "public/css/" instead of "public/css/"+themes[ti]+"."+colors[ci]+".css" if you don't want separate output folders.

"To me, it looks like this should run. I tested the loop, and I know it goes through every theme-color combination just fine." – if you tested the loop outside the call to elixir, can you put in a console.log and see what gets triggered when you run the task?

Loop a Stylus command in Elixir

2 Answers2