stylizer

Stylizer makes it super easy to integrate stylus, and stylus plugins, into a node/moonboots project.

Stylizer

Stylizer makes it super easy to integrate stylus, and stylus plugins, into a node/moonboots project.

npm install stylizer --save
var stylizer = require('stylizer');
 
stylizer({
    infile: '/path/to/infile.styl',      // required, input styl file to build 
    outfile: '/path/to/outfile.css',     // optional, output css file, defaults to infile with .css extension 
    plugins: ['nib'],                    // optional, array of stylus compatible plugin module names, default: [] 
    development: true                    // optional, whether to run in development mode, default: false 
    watch: '/path/to/stylusfiles/**/*.styl' // optional, enable live reload, see below. 
}, function (err) {                      // required, callback to run when built 
    console.log('Stylus css written');
});
var templatizer = require('templatizer');
var librariesDir = __dirname + '/libraries';
var stylesheetsDir = __dirname + '/public/css';
var stylizer = require('stylizer');
 
var moonbootsConfig;
 
moonbootsConfig = {
 
    //... 
 
    stylesheetsDir: stylesheetsDir,
    stylesheets: [
        stylesheetsDir + '/app.css'
    ],
 
    beforeBuildCSSfunction (done) {
        if (config.isDev) {
            stylizer({
                infile: stylesheetsDir + '/app.styl',
                outfile: stylesheetsDir + '/app.css',
                plugins: ['nib'],
                development: true,
                watch: stylesheetsDir + '/**/*.styl'
            }, function (err) {
                if (err) return console.log(err);
                console.log('CSS written');
            }
        }
    },
 
    // ... 
};

Enabling development mode will:

  • Not propagate exceptions, to keep your dev server running.
  • Create a css file which, on a stylus build failure, hides your app body and replaces it with something like this to help you spot stylus errors easily:

  • Enable live reload, as below:

If development: true and watch: is defined, live reload events will be sent to connected browsers running the livereload chrome extension. This means css will autorefresh without a page reload, which is great for development/prototyping.

Currently, watch should be a glob matching your stylus files that you want to be watched, e.g: /path/to/stylus/files/**/*.styl.

Stylizer supports stylus plugins like nib. To include them, list their module names in the plugins option.

You can write your own plugins. Just create a module, which exports a single function to be called by stylus' .use method. See nib for an example.