Add styled-component as styling-property (like 'states')

[misantronic]

🚀 Feature Proposal

Ability to add a styled-component as a styling-property just like we do it in the states of a theme.

Motivation

Sometimes it isn't possible to map a css-context directly to xstyled-system. A neat addition to the existing states of xstyled would be to add a styled-component (which stringifies to a css-class) to the tree, so it would be possible to specifically style this component.

Example

xstyled workaround:

const Child = styled(x.div)``;

const Parent = styled(x.div)`
  &:hover ${StyledComponent} {
    color: red;
  }
`

how it could be:

const Child = styled(x.div)``;

const Parent = styled(x.div)``

Parent.defaultProps = {
  color: {
    hover: { [Child]: 'red' }
  }
}

Pitch

I think this would be a really great addition to the existing system. I saw issues where this exact problem was solved by various workarounds that don't really fit the system.

[jguddas]

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

It feels absolutely right to fall back to &:empty when theme.states['&:empty'] is not defined,
just like we use red when theme.colors.red is not defined.

@gregberge I'm happy to give this a try and create a PR if you like this idea.

[gregberge]

I see the idea, not sure it is easy to implement.

[misantronic]

@gregberge can you please link the line in the code, where those default states are applied?

[jguddas]

@misantronic this is where the states and screens come from. https://github.com/gregberge/xstyled/blob/3e3fbcb2284dfb7f7e3cb723b5772ca8bdc24b08/packages/system/src/theme.ts#L32-L40

[jguddas]

@misantronic is there anything other than #334 that needs to be done, or can this be closed?

[gregberge]

It should work.