Output Stylus files to custom directory in express3

express, node.js, stylus

Solution

I try to set up custom `src` and `dest` too and I can't. In search of solutions I looked into the Stylus source. In two words pathes to `styl` and to `css` files should be similar. If link to `css` file in html looks like

<link rel="stylesheet" href="css/app.css">

and Its physical path is

public/css/app.css

then your `styl` file should be located at

stylus/css/app.styl

and Express config should be

app.configure('dev', function () {
  ...
  app.use(stylus.middleware({
    src: __dirname + '/stylus/',
    dest: __dirname + '/public/',
    compile: function(str, path) { ... }
  }));
  ...
});

What I saw in the source.

Stylus parses all requests and selects only those that are requested `css` files. Then It combines `css` url's pathname with your `dest` option, replaces `css` with `styl` in pathname and combines result with your `src` option:

// Middleware
return function stylus(req, res, next){
  if ('GET' != req.method && 'HEAD' != req.method) return next();
  var path = url.parse(req.url).pathname;
  if (/\.css$/.test(path)) {
    var cssPath = join(dest, path)
      , stylusPath = join(src, path.replace('.css', '.styl'));

    // ...

  } else {
    next();
  }
}

Problem

I have my project and was porting some code over from express2.5.7 to express3.0.3. I thought it was almost be a 1:1 transfer, but I'm running into an issue of not being able to compile my stylus files into the directory I specified. Here is my basic app.js setup: ``` /** * Module dependencies. */ var express = require('express') , routes = require('./routes') , user = require('./routes/user') , http = require('http') , path = require('path') , nib = require('nib') , bootstrap = require('bootstrap-stylus') , stylus = require('stylus'); var app = module.exports = express(); app.configure('dev', function(){ var stylusMiddleware = stylus.middleware({ src: __dirname + '/stylus/', // .styl files are located in `/stylus` dest: __dirname + '/public/css/', // .styl resources are compiled `/css/*.css` debug: true, compile: function(str, path) { // optional, but recommended console.log(path); return stylus(str) .set('filename', path) //.set('warn', true) .set('compress', true) .use(bootstrap()) } }); app.use(express.logger('dev')); app.use(stylusMiddleware); app.use(express.errorHandler({ dumpExceptions: true, showStack: true })); app.set('view options', { pretty: true }); }); app.configure('prod', function(){ app.use(express.errorHandler()); }); app.configure(function(){ app.set('port', process.env.PORT || 3000); app.set('views', __dirname + '/views'); app.set('view engine', 'jade'); app.use(express.favicon()); app.use(express.bodyParser()); app.use(express.methodOverride()); app.use(app.router); app.use(express.static(path.join(__dirname, 'public'))); }); app.get('/', routes.index); app.get('/users', user.list); http.createServer(app).listen(app.get('port'), function(){ console.log("Express server listening on port " + app.get('port')); }); ``` I've tested the `app.configure` stuff and it is going through the correct methods ('dev' and the configure with just a function)

Original source