Question

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)

Answer 1

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