Add arbitrary variants

[ben-rogerson]

This PR adds custom selectors to twin.
These selectors can be added within square brackets using the same syntax as variants:

// Style all child paragraph elements
tw`[div]:block`

// ↓ ↓ ↓ ↓ ↓ ↓

({
  "div": {
    "display": "block"
  }
});

Add scoped styles from a parent

// Prop styling
;<div tw="[p]:(text-white bg-black) [div]:my-4">
    <p>...</p>
	<div>...</div>
</div>

// Styled component
const Component = tw.div`[p]:(text-white bg-black) [div]:my-4`
;<Component>
    <p>...</p>
	<div>...</div>
</Component>

Style all child elements when the parent is hovered

// Prop styling
;<div tw="hover:[*]:bg-black">...</div>

// Styled component
const Component = tw.div`hover:[*]:bg-black`
;<Component>....</Component>

Style an element by its custom className

// Prop styling
const Component = (props) => (
	<div {...props} tw="[&.is-padded]:p-10">...</div>
)
;<Component className="is-padded" />

// Styled component
const StyledComponent = tw.div`[&.is-padded]:p-10`
const Component = (props) => (
	<StyledComponent {...props}>....</StyledComponent>
)
;<Component className="is-padded" />