morajabi / styled-media-query

💅💍 Better media queries for styled-component
MIT License
1.32k stars 53 forks source link

Proposal for V3 chainable API #20

Open timhagn opened 4 years ago

timhagn commented 4 years ago

As #11 is open long enough and I like the ideas in the latest comments of styled-media-query becoming chainable, I looked for ways we could accomplish this. As ES only has a proposal for making classes also callable, I searched a little and stumbled upon this gem and worked from it to be able to call the generateMedia() functions in an arbitrary manner:

Using it is possible like this:

const media = new GenerateMediaChained();
...
// Later in a styled-component:
`${media.greaterThan('medium').css`flex:1`}`
// But the following (calling the class driectly) works as well : ).
`${media.greaterThan('medium')`flex:1`}`
// And one could even do this, but atm only the last function in the chain will be used in the end:
`${media.greaterThan('medium').lessThan('small')`flex:1`}`

So we'd have the possibility to go at chaining like the proposed

${media.for('retina')`
   display: flex;
`};

${media.width.between('sm', 'lg').for('retina')`
   display: block;
`};

As now it's easy to add aliases and features as well and still be able to chain the functions in an arbitrary manner : ).

timhagn commented 4 years ago

Does really no one want to have a look at this : ( ?