Specificity confusion in Glamor with multiple inlined style/media

[KyleAMathews]

I have a div that I'm adding some styles too:

        <div
          {...style({
            paddingTop: rhythm(1),
            textAlign: 'center',
            maxWidth: 960,
            margin: '0 auto',
          })}
          {...media(presets.tablet, {
            paddingTop: rhythm(3),
          })}
        >

The media paddingTop should always win but when it's at rhythm(3) (Typography.js helper function) it doesn't but if I change it to rhythm(3.5) it does.

Screenshots from chrome devtools:

rhythm(3.0)

rhythm(3.5)

It looks like it's just the hash length for the media query attribute that's changing?

[KyleAMathews]

Hmm... I didn't know media queries don't affect specificity http://stackoverflow.com/questions/19038240/media-query-styles-not-overriding-original-styles

So I guess it really is just the length of the data attribute name changing?

[KyleAMathews]

Oh and I get now why I hadn't realized before media queries don't affect specificity — it's because I always put the larger queries after the smaller ones (or the default) so overriding just happened.

Can we enforce that in Glamor? That later style or media props override earlier ones?

[KyleAMathews]

Ahhh.... https://github.com/threepointone/glamor/blob/master/docs/howto.md#multiple-styles-to-an-element

[threepointone]

did using merge/compose work?
[really wish css was applied in the order of declaration on the element, not the order in the stylesheet. tch.]

[KyleAMathews]

Yes it did! Got side tracked and didn't follow up. Shouldn't be have doubted that you hadn't already thought of everything ;-)