Pseudo classes don't apply styles

[dominickbrasileiro]

Hi there,

I'm trying to use the pseudo-states in a Next.js + Tailwind CSS project, but I can't make them work.

I have installed the add-on correctly in .storybook/main.js, and the menu appears in the local storybook.

This is a test story that I'm using to debug:

const Hover = () => <span className="text-white bg-blue-core hover:bg-red-core">Hover Test</span>
Hover.parameters = {
  pseudo: { hover: true },
}

Am I missing something here?

The pseudo-hover-all class is being applied to my root component #storybook-root, but it has no effect on the preview.

Versions

@storybook/nextjs: 7.5.1
@storybook/react: 7.5.1
storybook-addon-pseudo-states: 2.1.2

[jhancock532]

Hmm, I've noticed errors / warnings in my console when using this library that too many hover CSS rules were detected and that the addon would only be able to support a subset of them. It might be worth checking if you have a similar warning in the console as Tailwind could be exporting a lot.

If the library is working as expected, it should generate a CSS rule along the lines of .pseudo-hover-all .hover:bg-red-core { background: red; }. You could check to see if this style rule appears in DevTools and if any other style rule is overriding it.

[dominickbrasileiro]

@jhancock532 thank you, my friend!
i see this warning in my console:

Reached maximum of 1000 pseudo selectors per sheet, skipping the rest.

a pseudo-hover class is injected into the component classes, but no styles are applied.
there aren't any styles overwriting it, and the rules don't appear in DevTools, so I'm guessing that is the problem.

have you worked around it, by any chance?

[surecloud-tstafford]

+1 for seeing this issue after upgrading to latest storybook (7)

[dominickbrasileiro]

i haven't found any solution yet :/

[surecloud-tstafford]

Us neither. We have an Angular project where this was working on version 6 then broken after the upgrade to latest 7.

Considering re-writing our scss with pseudo mixins so I can just apply them manually as standalone classes until this is resolved.

[jhancock532]

@dominickbrasileiro A workaround I considered was to add the missing styles to the webpage on page load. Unfortunately I've not implemented a complete solution yet as it's quite low priority / odd solution, but I made a draft of what should happen on CodePen: https://codepen.io/jhancock532/pen/qBJJOWE

1. Fetch all the style rules used in the current webpage
2. Identify the style rules that use psuedo-selectors and apply to the current component
3. Duplicate these style rules, prefixing the .psuedo-classes class before them, and add them to the page

The above script would be added at the end of .storybook/preview.js - note that this is definitely a workaround as it ignores the existing addon logic and bypasses Storybook's conventional addon integration methods.

[oluoluoxenfree]

@jhancock532 thank you, my friend! i see this warning in my console:

Reached maximum of 1000 pseudo selectors per sheet, skipping the rest.

a pseudo-hover class is injected into the component classes, but no styles are applied. there aren't any styles overwriting it, and the rules don't appear in DevTools, so I'm guessing that is the problem.

have you worked around it, by any chance?

This line is part of an if statement in the code with a break directly after; locally, if i remove the if/console/break block it works (there are console errors, but the pseudo states can be applied).

https://github.com/chromaui/storybook-addon-pseudo-states/blob/main/src/preview/rewriteStyleSheet.ts#L88-L90

What's the reason for the limit of a thousand, is it a performance issue?