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.

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

Answer 1

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);
});