Open dominickbrasileiro opened 8 months ago
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.
@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?
+1 for seeing this issue after upgrading to latest storybook (7)
i haven't found any solution yet :/
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.
@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
.psuedo-classes
class before them, and add them to the pageThe 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.
@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).
What's the reason for the limit of a thousand, is it a performance issue?
also seeing the error in the console. this seems to be a fundamental problem with using this with utility classes no?
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:
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