Building Stylus Themes with Grunt

Question

I'd like to have my stylus file accept variable input from grunt, loop the variable values, and output different themed css files.

Then I could easily switch themes like this. https://stackoverflow.com/a/7847009/55124

Is this possible? How would one set it up?

Right now I have grunt compiling stylus into my css. But, to generate a different theme, I have to manually change the value of my themeName variable in my mainCSS.stylus file and rebuild with grunt.

Answer 1

What do you think about this way:

There is a main.styl, that contains:

@import "variables"; 
//some other styles and imports

and there are some themes files:

 themes/default.styl
 themes/pretty-theme.styl
 themes/very-pretty-theme.styl

using grunt-contrib-copy you can copy the file themes/default.styl to the variables.styl and compile stylus to the css styles, than you delete variables.styl and again copy themes/pretty-theme.styl to the variables.styl and compile and so on.

copy: {
  default-theme: {
    src: 'themes/default.styl',
    dest: 'variables.styl',
  },
  pretty-theme: {
    src: 'themes/pretty-theme.styl',
    dest: 'variables.styl',
  },
  very-theme: {
    src: 'themes/very-pretty-theme',
    dest: 'variables.styl',
  },
}