Stylus outputs selectors in wrong (reverse) order

[Denis535]

I'm just experimenting trying to make my styles more concise:

style(selector)
    context = {
        selector: selector,
        styles: ()
    }
    define('context', context, true)

prop(name, value)
    push(context.styles, @block {
        add-property(name, value)
    })

flush()
    selector = replace('(\s+)', ' ', get-value(get-key('selector', context.selector)))
    styles   = context.styles
    {selector}
        for style in styles
            {style}
    define('context', null, true)

I'm trying to do something like a chain of function calls (fluent interface).
But because the flush does not start from the beginning of the line, it produces the wrong result:

style(card   ) prop('value', 1) flush()
style(header ) prop('value', 2) flush()
style(content) prop('value', 3) flush()
style(footer ) prop('value', 4) flush()

As you can see the output in reverse order:

.card .footer {
  value: 4;
}
.card .content {
  value: 3;
}
.card .header {
  value: 2;
}
.card {
  value: 1;
}

So, what the hell? How can I fix this?

[Denis535]

Some secondary functions:

get-key(key...)
    result =         get-string(key[0])
    result += '--' + get-string(key[1]) if key[1] != null
    result += '--' + get-string(key[2]) if key[2] != null
    result
get-value(key)
    if is-defined(get-string(key))
        return get-definition(get-string(key))
    error('Value is undefined: ' + key)