Search code examples
node.jsstylus

how to .define() a color with stylus

I try to define a color using stylus API .define(name, value):

var stylus = require('stylus');
stylus('.foo { color: darken(mycolor, 50%) }')
.define('mycolor', '#123')
.render(function(err, css) {
    console.log(err);
    console.log(css);
});

error:

TypeError: expected rgba or hsla, but got string:'#123'

In the documentation, I cannot see any reference to a color type.

Solution

  • .define('mycolor', '#123') always defines a string, as you may have found out. Even if you say .define('mycolor', 'rgba(0,0,0,0)'), you will get the same error.

    What you need to do is define a rgba or hsla node, which you can do like so:

    stylus('.foo { color: darken(mycolor, 50%) }')
.define('mycolor', new stylus.nodes.RGBA(1, 0x11, 0x22, 0x33))

    Sadly, I've been unable to find an easy way to define a colour node from a colour string directly.

    new stylus.Parser('#123').lexer.color().val, or new stylus.Parser('#123').peek().val will work for hex strings, though.