Emotion: Simulate pseudo classes?

[brentertz]

Hello. I am curious if there is a way in Emotion to simulate pseudo classes like is done in Glamor? If there is not currently a way to do this, is this something that you think may be achievable and desirable to include in Emotion?

https://github.com/threepointone/glamor/blob/master/docs/api.md#simulatepseudoclasses

I am investigating the migration of a library that is currently built on Glamorous, which may soon be deprecated. We currently leverage this functionality during development and in our visual regression test suite - e.g. to easily see different component states and ensure that styles are not unexpectedly broken.

[Andarist]

Not exactly like this, but as styles can be expressed as an object etc you can just use something like

const StyledDiv = styled.div({
  ':hover': hoverStyles
})

// this is somewhat equivalent of `simulate`
<StyledDiv 
  css={hoverStyles}
/>

On top of that u can ofc implement or own set of helpers which would allow u to replicate simulate API more closely.

Note css prop requires babel plugin in emotion@9

[brentertz]

Thanks.