search

jameslnewell / styled-components-breakpoint

Utility function for using breakpoints with styled-components 💅.
243 stars 17 forks source link

map: if breakpoint values aren't in breakpoint order then the ordering is wrong and specificity is out #16

Open jameslnewell opened 6 years ago

jameslnewell commented 6 years ago 
<Body size="lg" color={{desktop: 'primary.500', tablet: 'primary.100'}}>

Expected:

@media (min-width: 36.0625em)
<style>…</style>
.gOOjhT {
    color: #ccf2ed;
}
@media (min-width: 75.0625em)
<style>…</style>
.gOOjhT {
    color: #00c0a5;
}

Actual:

@media (min-width: 75.0625em)
<style>…</style>
.gOOjhT {
    color: #00c0a5;
}
@media (min-width: 36.0625em)
<style>…</style>
.gOOjhT {
    color: #ccf2ed;
}