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
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 thegenerateMedia()
functions in an arbitrary manner:Using it is possible like this:
So we'd have the possibility to go at chaining like the proposed
As now it's easy to add
aliases
andfeatures
as well and still be able to chain the functions in an arbitrary manner : ).