Skip to content
This repository
Fetching contributors…

Octocat-spinner-32-eaf2f5

Cannot retrieve contributors at this time

file 55 lines (40 sloc) 1.903 kb

Connect Middleware

Stylus ships with Connect middleware for auto-compiling Stylus sheets when modified.

stylus.middleware(options)

Return Connect middleware with the given options.

Options

  `force`     When __true__ styles will always re-compile
  `src`       Source directory used to find .styl files
  `dest`      Destination directory used to output .css files
              when undefined defaults to `src`.
  `compress`  Whether the output .css files should be compressed
  `compile`   Custom compile function, accepting the arguments
              `(str, path)` returning the renderer.

Examples

Here we set up the custom compile function so that we may alter the renderer by providing additional settings.

By default the compile function simply sets the filename and renders the CSS.

    function compile(str, path) {
      return stylus(str)
        .import(__dirname + '/css/mixins/blueprint')
        .import(__dirname + '/css/mixins/css3')
        .set('filename', path)
        .set('warn', true)
        .set('compress', true);
    }

Pass the middleware to Connect, grabbing .styl files from this directory and saving .css files to ./public. Also supplying our custom compile function.

Following that we have a staticProvider layer setup to serve the .css files generated by Stylus.

    var stylus = require('stylus');

    var server = connect.createServer(
        stylus.middleware({
            src: __dirname
          , dest: __dirname + '/public'
          , compile: compile
        })
      , connect.staticProvider(__dirname + '/public')
    );

When force is used, the styles will be unconditionally re-compiled, however even without this option the Stylus middleware is smart enough to detect changes in @imported files.

Something went wrong with that request. Please try again.