storybook-addon-pseudo-states icon indicating copy to clipboard operation
storybook-addon-pseudo-states copied to clipboard

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

Open Sjeiti opened this issue 1 year ago • 0 comments
trafficstars

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

Sjeiti avatar Jun 28 '24 13:06 Sjeiti