feat: added inline variants #333

[jguddas]

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]

This solves #333

[jguddas]

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

[gregberge]

Thanks @jguddas

[jguddas]

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?