stylizer

2.1.1 • Public • Published

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.

Readme

Keywords

none

Package Sidebar

Install

npm i stylizer

Weekly Downloads

1

Version

2.1.1

License

MIT

Last publish

Collaborators

  • latentflip