glamor: CSS rule ordering can break mixed usage of shorthand and non shorthand properties

I’m having hard time reproducing this but it seems that this does not produce predictable results.

Consider following base styles:

const noPadding = css({padding: 0});
const leftPadding = css({paddingLeft: 100});

When combined like:

const combined = css(leftPadding, noPadding);

I would expect that following css would be generated:

.css-12345 {
    padding-left: 100px;
    padding: 0px;
}

but it seems that sometimes this is generated:

.css-12345 {
    padding: 0px;
    padding-left: 100px;
}

Which will results in different layout. I suspect that this is because glamor relies on object key ordering which is not guaranteed in Javascript really. But glamor has the ordering information from the css(leftPadding, noPadding) call so it should be possible enforce the order with glamor.

Has this been already thought out in glamor or do I just have bug in my code? 😃