Add object notation for variants

[d3dc]

This PR adds support for tailwind variants by allowing objects in cx prop values.

<Box w={[ 'full', { md: '4/5', lg: '3/5' } ]} />

The key names of any object are prefixed to the prop name and the object values are appended following the same rules as every other normal value.

w-full md:w-4/5 lg:w-3/5

Things to consider:

• Is this useful for any other frameworks?
  • bootstrap mixes variants as an extension block to the modifier: col-md-6
• What else could objects do?
  • blocks? Card={ header: 'bold', border: 'md' } => Card__header-bold Card__border-md

[d3dc]

Trying to publish this under the next tag... 🤞

npm install classier-react@next

[d3dc]

Merging as the simple-blocks branch will allow transformFn to be changed.

note nested variants are not defined behavior