Setting Up Auto Compile for Stylus

express.js + stylus: Automatic stylus compiling doesn't work

For the compiling to work, the directory that you're serving from must also exist in the source directory. Since style.styl is in the root of the source, it is also in the root for GET requests. In resources, rename stylus to css, and change your configuration to look like this:

app.use(stylus.middleware({
  src: __dirname + '/resources',
  dest: __dirname + '/public',
  debug: true,
  force: true
}));

Now when you GET /css/style.css, it will compile the stylesheets. Graphically, this is how compiling is structured:

/resources/style.styl       -->   /public/style.css
/resources/css/style.styl   -->   /public/css/style.css

Then, another issue comes up. You want to serve /public with /static.

app.use('/static', express.static(__dirname + '/public'));

You will have to change that line to:

app.use('/static', express.static(__dirname + '/public/static'));

The solution to this would be to structure your application like this:

myApp
├─┬ public
│ └─┬ static
│   └── css
└─┬ resources
  └─┬ static
    └─┬ css
      └── style.styl

Now, when you GET /static/css/style.css, the stylesheets will be compiled from location /resources/static/css/style.styl.

As a result with the file tree shown above and this code:

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

app.use('/static', express.static(__dirname + '/public/static'));
app.use(stylus.middleware({
  src: __dirname + '/resources/',
  dest: __dirname + '/public/',
  debug: true,
  force: true,
}));

On first load /static/css/style.css will 404 but on second load the stylesheets will be there.

Stylus doesn't compile array items

The problem now is with the selector as the proper interpolation syntax (of wrapping variables within {}) is not used. Modify the code like below and it should work fine.

Also note that the array's are zero based whereas the nth-child selectors are one based and so the array indexes should be used as i - 1.

li
  background-color: rgba(#000, .3) /* changed color just for the demo */

  siz = 10px 70px 30px 50px 60px 20px 90px 25px 40px 30px
  deg = 45deg 45deg 45deg 45deg 45deg 45deg 45deg 45deg 45deg 45deg
  pos = 50px 120px 150px 170px 220px 250px 270px 320px 370px 420px

  for i in (1..10)
    &:nth-child({i}) /* note the change here */
      width: siz[i - 1] /* note the change to index */
      height: siz[i - 1] /* note the change to index */
      left: pos[i - 1] /* note the change to index */
      transform: translateY(100px) rotate(deg[i - 1]) /* note the change to index */

CodePen Demo

Setting stylus variables programmatically

Something like:

var stylus = require('stylus');

stylus('body\n  color: some-color')
  .define('some-color', new stylus.nodes.RGBA(128, 128, 128, 1)) // #808080
  .render(function(err, css) {
    if (err) throw err;
    console.log(css);
  });

See lib/nodes/rgba.js and lib/nodes/hsla.js.

I guess you can also use json bif for your task.

What is the best way to use the stylus css preprocessor on Windows and Visual Studio?

What do you mean on "supports"?

If just live watch and compress, there are few tools...

GIU:

• Mixture http://mixture.io/
• LiveReload http://livereload.com/ (beta!)

or use node.js in console for autocompile.

stylus - middleware not compiling the `styl` file

I looked at your app structure. It doesn't match your configuration. You have your file at ./public/stylus/tcp.styl but that needs to match your src stylus configuration option. Set it up with this structure:

• move your stylus code to ./public/css/tcp.styl
  
  • keeping the .styl and .css file next to each other simplifies things.
• stylus middleware option: src: __dirname + '/public'
  
  • remove the stylus middleware dest. It will default to the same as src and everything will be simpler.
• URI to load /css/tcp.css
• compiled css will end up in ./public/css/tcp.css, to be served by your static middleware after the stylus middleware compiles it.

---

Related Topics