Render pseudoclass states, so :hover etc can be snapshot-tested

Is your feature request related to a problem? Please describe.

I’m working on a component which I want to have styles that are not overridden by the hosting page. I use snapshots to help with this but am frustrated because snapshots don’t snap the hovered state of components.

For example, I have a grey button which should stay grey when hovered, not turn yellowgreen because some page using the component has decided to import some ugly styles.

To ensure my components can’t be overridden like that, I can add some CSS in the preview-header.html to mock the hosting page which has such poor tastes:

button:hover {
background: yellowgreen;
}

and this allows me to confirm if I have a problem via manual inspection (I manually hover over the button and see it is yellowgreen and not grey).

However, I cannot automate this - because Storybook isn’t taking a visual snapshot of the hovered button.

Describe the solution you’d like

I’d love to see something like this addon incorporated into Storybook: https://github.com/Ergosign/storybook-addon-pseudo-states#readme

That addon uses postcss-pseudo-classes under the hood (via a webpack config) to change button:hover { in the CSS to button:hover, button \:hover {, so the Button stories automatically generated can look like <button class="some-selector :hover">howdy</button>. However, I’m using CRA so don’t have the ability to override the webpack config. Would love to know if Storybook could provide better support for such functionality.

Describe alternatives you’ve considered

I’ve also looked at storycap, which allows using a .hover config option that specifies which element should be hovered when a snapshot is taken. However, I’m already using storyshots-puppeteer so I’d like to continue using that.

Are you able to assist bring the feature to reality? Possibly, but I’m not sure where to start.

Additional context Add any other context or screenshots about the feature request here.

[philippone]

I’m developing a add on for this: https://github.com/Ergosign/storybook-addon-pseudo-states

It’s already mentioned in the main post.

I’m thankful for any feedback.

[a7madgamal]

I’m also looking for this 😦