Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

55 lines (40 sloc) 1.903 kb

Connect Middleware

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


Return Connect middleware with the given 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.


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(
            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.

Jump to Line
Something went wrong with that request. Please try again.