why don't these stylus hashes behave the same?

Question

In my Javascript:

// styl is the stylus compiler instance
styl.define('passedHash', new stylus.nodes.Object({
  top: 0,
  right: 2,
  bottom: 5,
  left: 20
}));

In my .styl file:

localHash = {
  top: 0
  right: 2
  bottom: 5
  left: 20
}
.fooBar
  nodeType typeof(localHash)
  padding unit(localHash['top'], 'px')
  nodeType typeof(passedHash)
  padding: unit(passedHash['top'], 'px')

The compiled output becomes:

.fooBar {
  nodeType: 'object';
  padding: 0px;
  nodeType: 'object';
}

If I uncomment that last line in the stylus, I expect the padding rule to be written out exactly the same for passedHash as it is for localHash . But instead, stylus crashes:

TypeError: expected "unit" to be a unit, but got null:null

Why? The compiler knows they're both objects... they appear to be the same exact object to me....

Answer 1

Well, according to the source of the Object node ( https://github.com/LearnBoost/stylus/blob/master/lib/nodes/object.js ) you cannot pass a JS object to its constructor. So your passedHash is empty and you get that error. However, you can coerce a real JS object to Stylus object using this code:

styl.define('passedHash', {
  top: 0,
  right: 2,
  bottom: 5,
  left: 20
}, true); // <-- true for raw coercion

Or more verbose version:

styl.define('passedHash', stylus.utils.coerceObject({
  top: 0,
  right: 2,
  bottom: 5,
  left: 20
}, true));