Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Proposal for V3 chainable API #20

Open
wants to merge 4 commits into
base: master
Choose a base branch
from

Conversation

timhagn
Copy link
Collaborator

@timhagn timhagn commented Oct 26, 2019

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
Copy link
Collaborator Author

timhagn commented Nov 15, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant