Stylus only recompiles .styl files on index page load

I was originally super frustrated when trying to set up Stylus, because I would adjust my src and dest settings, , restart Node, refresh, and Stylus wasn't compiling. This was on a page like http://localhost:3000/tasks. However, the src and dest paths were correct, and when I would restart Node and try to load the index page, http://localhost:3000, Stylus would then compile correctly.

So now that I've figured out that it's compiling properly, but only from the home URL, I'm wondering if I have something set up wrong, because any changes to .styl files are not being updated until I refresh from the home page, not any GET parameter page.

var express = require('express');
var app = express();
var stylus = require('stylus');

app.configure(function () {
    this.set("views", __dirname + "/views/jade");
    this.set("view engine", "jade");
    this.use(express.bodyParser());
    this.use(express.methodOverride());
    this.use(this.router);

    this.use(stylus.middleware({
        src: __dirname + '/views/styl', //styl files to be compiled
        dest: __dirname + '/public/css', //destination for compiled css
        compress: true
    }));

    this.use(express.static(__dirname + '/public'));
});

Is what I'm describing the normal process, or should Stylus recompile no matter what your URL is if it notices changes in a .styl file?

I ended up going with the default Stylus path, meaning using a directory called "stylesheets" in both my "views" and "public" directory, and the following code:

    //Stylus
    this.use(stylus.middleware({
        src: __dirname + '/views', //styl files to be compiled
        dest: __dirname + '/public', //destination for compiled css
        compress: true
    }));

Stylus then looked for .styl files in /views/stylesheets, and compiled them to /public/stylesheets. For some reason, trying to change the name of the directories and being fancy with my paths got me into trouble. Judging from reading some of the forums, this seems to be not considered a bug at this time, but there it is.

I don't have a reputation of 50 to comment, but you can change the path as you see fit. First require the path module:

path = require('path')

Then resolve to your taste:

path.resolve('./') //this will be resolved to where your node app resides
path.resolve('../') //this will go one directory up from the path of your node app file
path.resolve('../../')  //this will go two directories up from the path of your node app file

Use console.log() to see what these produce. Then for the options in stylus, simply instead of using the __dirname as base, change it to the resolved path. So assuming you have a directory structure:

$userPath/myApp/frontend/src/app.js
$userPath/myApp/frontend/src/public
$userPath/myApp/frontend/static/public

You can then:

var staticPath = path.resolve('../') + '/static'; //$userPath/myApp/frontend/static

app.use(
  stylus.middleware({
    src:  __dirname + '/public/',
    dest: staticPath + '/public/',
    debug: true,
    compile : function(str, path) {
      return stylus(str)
        .set('filename', path)
        .set('warn', true)
        .set('compress', true);
    }
  })
);