search

styled-components / xstyled

A utility-first CSS-in-JS framework built for React. 💅👩‍🎤⚡️
https://xstyled.dev
MIT License
2.27k stars 107 forks source link

feat: added inline variants #333 #334

Closed jguddas closed 2 years ago

jguddas commented 2 years ago

Summary

Example: <x.div color={{ '&:empty': 'red' }}/>

This makes it, so we fall back to &:empty when theme.states['&:empty'] and theme.breakpoints['&:empty'] is not defined, just like we use red when theme.colors.red is not defined.

Test plan

I added unit tests, if there are more test cases I should take a look at, let me know. I also tried it out using x from the styled-components package.

jguddas commented 2 years ago

This solves #333

jguddas commented 2 years ago

Did you find the time to have a look at this @gregberge?

gregberge commented 2 years ago

Thanks @jguddas

jguddas commented 2 years ago

Awesome, we have used my version in production for quite some time now and would love to switch back, are you going to create a minor release for this?