chromaui / storybook-addon-pseudo-states

CSS pseudo-classes for Storybook
MIT License
90 stars 30 forks source link

Ignore comment to prevent CSS generation (or negate `:not(:focus)`) #122

Open Sjeiti opened 5 months ago

Sjeiti commented 5 months ago

We have an element that uses a :not(:focus) rule with visually-hidden styling. This works fine in production but in Storybook the rules are almost always applied.

I was hoping v3.1.1 would fix it, but it made the issue even harder to work around. Prior we had one additional rule, now we have two: :not(:focus), :not(.pseudo-focus), :not(.pseudo-focus-all *). This means to test this element not having the rules applied we have to add .pseudo-focus-all to a parent, .pseudo-focus to the element itself, as well as actually focussing the element.

Is there a way to ignore some CSS? (and not add the extra rules) Maybe something like:

:not(:focus) {
    /* pseudo-state-ignore */
    @include visually-hidden;
}

thanks

Ron