stylizer v2.1.1

Stylizer

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

Installation

npm install stylizer --save

Usage:

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

With moonboots

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'
    ],

    beforeBuildCSS: function (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');
            }
        }
    },

    // ...
};

Development mode

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:

Live reload:

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.

Plugins

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.