Stories: Check out pseudo states plugin

[swisspost-bot]

https://storybook.js.org/addons/storybook-addon-pseudo-states

This plugin enables preview of pseudo states for stories. Check if we can use it to simulate hover/focus states in tests.

[imagoiq]

Every solution listed below has at least one similar limitation:

• No support for web-components built stylesheet

storybook-addon-pseudo-states plugin

PR experiment: #2076

Limitation

• No support for @media, see Added support for media queries chromaui/storybook-addon-pseudo-states#75
  • Buttons: background-color is right, but we don't see the animated arrow because of @media (prefers-reduced-motion: no-preference) usage.
• Currently, it breaks as Fix issue with pseudo classes chromaui/storybook-addon-pseudo-states#82 it doesn't support ::-moz-range-thumb or ::-webkit-slider-thumb. This can be fixed by adding them here: https://github.com/chromaui/storybook-addon-pseudo-states/blob/07abc1bb39ee4f3377955b23860c275de12b872f/src/constants.js#L6
• Currently, it uses the DOM API, so the whole stylesheet transformation appears in the browser and for each load of the page, which is not optimal. Also, for this reason, it's limited to 1000, so for us (~3500 lines) to be usable we need to remove this limit (and fork the package). Lines to be removed: https://github.com/chromaui/storybook-addon-pseudo-states/blob/baaa167909676b6fcfb778564cecb92636db390a/src/rewriteStyleSheet.js#L68-L70

giuseppeg/postcss-pseudo-classes

Last update: Nov 2019

This plugin is a bit out of date and don't support some new CSS additions like :is.
Some PRs are waiting to be merged (for a long) time that solves most of the issue (see Fork philippone/postcss-pseudo-classes)

PR experiment that :

• Compile all the Pull requests additions that haven't been merged
• Make it compatible with PostCSS 8
• Blacklist :not, :where, :is

#2092

Limitation

None other than the general one about web-components.