[ CRITICAL ]: Using the addon freezes the app

[fcisio]

When having this addon on my storybook, the whole app would freeze and go unresponsive upon entering only a couple of characters in a controls field.

Any interaction with other addons would eventually, break the app.

No errors ever output in the console, so it was hard to trace it back to this dependency.

I hope this can prevent trouble for some people.

[ghengeveld]

Hey, could you share some info about your setup?

I've noticed the addon doesn't work well with Tailwind in dev mode, because it incluses all of its styles in the stylesheet, including over a thousand pseudo class selectors. I'm working on a new approach to fix this. Meanwhile, 1.0.0-rc.4 should no longer freeze up, but rather just stop processing after 1000 pseudo classes.

[fcisio]

@ghengeveld Yeah makes sense.
I use emotion.js with a theme provider.

I kinda gave up on this addon. But if you release a new version I can test it on my end and let you know if it's fixed.

[sjwilczynski]

Hey, I have to say I am super exited about this project as it's one of the few missing pieces that we have in our screenshot automation pipeline. We tried the addon out but unfortunately, it freezes the storybook for us too - after we navigate few times using default storybook component navigation, we are not able to click on anything anymore (and that is even without interacting with the addon at all - just by having it enabled).

Not sure what info would help you figure out the root cause but our setup is:

• react 16.11.0
• storybook 6.1.14 with a11y,actions,controls,docs,knobs,toolbars,viewport addons
• office-ui-fabric-react 7.158.1 as our component library and merge-styles as our css-in-js library

We also noticed a couple of errors in the console when viewing stories on failing to execute insertRule. Here is one of them:

withPseudoState.js:178 DOMException: Failed to execute 'insertRule' on 'CSSStyleSheet': Failed to parse the rule '.ColDir-root:focus:not(:focus-visible):not(:hover) .directsText-232, .pseudo-focus.pseudo-focus-visible.pseudo-hover .ColDir-root:not():not() .directsText-232 { display: none; }'.
    at rewriteStyleSheets (http://localhost:52752/vendors~main.b48b59379cb9ad43dc02.bundle.js:350104:21)
    at Object.<anonymous> (http://localhost:52752/vendors~main.b48b59379cb9ad43dc02.bundle.js:350138:10)
    at http://localhost:52752/vendors~main.b48b59379cb9ad43dc02.bundle.js:87098:14
    at Array.forEach (<anonymous>)
    at Channel.handleEvent (http://localhost:52752/vendors~main.b48b59379cb9ad43dc02.bundle.js:87097:19)
    at handler (http://localhost:52752/vendors~main.b48b59379cb9ad43dc02.bundle.js:87023:16)
    at Channel.emit (http://localhost:52752/vendors~main.b48b59379cb9ad43dc02.bundle.js:87030:9)
    at StoryRenderer._callee3$ (http://localhost:52752/vendors~main.b48b59379cb9ad43dc02.bundle.js:116642:30)
    at tryCatch (http://localhost:52752/vendors~main.b48b59379cb9ad43dc02.bundle.js:342983:40)
    at Generator.invoke [as _invoke] (http://localhost:52752/vendors~main.b48b59379cb9ad43dc02.bundle.js:343213:22) null
rewriteStyleSheets @ withPseudoState.js:178

[radulle]

What is the progress on this issue?

[ghengeveld]

Hey, sorry for the delay and thanks for reporting. I've been dealing with Storybook 6.2 issues since it was released a couple weeks ago. Now that that's settled down, I can direct some attention to this addon again.

[ghengeveld]

To clarify the situation, here's the deal:

• Currently the addon rewrites document.styleSheets by removing any rules that contain a pseudo selector and insert a copy in their place, with an additional class selector that we can toggle from JS.
• This approach has the benefit that it works regardless of the way the styles were loaded.
• The downside is that it uses DOM APIs to do the many individual rule rewrites, which means it can be very slow, to the point where it causes Storybook to hang.

Some potential solutions:

• Rewrite the entire stylesheet in one go (as a string). Disable/remove the existing stylesheet and insert a completely new one (as a style tag).
• Trace which styles are actually applied in the current story, and only rewrite those. Probably this will be just as slow.
• Somehow do the rewrite lazily. This is tricky because we're trying to get stories to render with their enabled pseudo styles as soon as possible. Lazy loading could make snapshot testing unreliable.
• Use Mock Service Worker to intercept requests for CSS files and rewrite them there, so it's done in a separate thread. This won't work for <style> tags though.

[rogersampaio]

This problem is also happening with me, after I added plyr-react with a video component it started crashing everything, even when I was not testing the video component itself. I was using storybook 6.3.7. Then I updated it to storybook 6.4.0-alpha.31 and the "pseudo-states" is gone, the menu with button states is not showing but at least everything is working fine now.

The solution I have for now is not to use this addon. But it would be great to have this solved, let me know if I can contribute with more information.

[tolesdev]

This is very much a critical bug still -- is this project dead?

[KorySchneider]

This is still a major performance issue, and seems to be related to the docs addon.

A workaround is to only include this addon and related stories (in main.js) when building storybook for snapshot testing, and build without for deploying.

[FezVrasta]

Having the same issue with Tailwind JIT

[mondash]

I'd experienced this issue using TailwindCSS. I've just tried re-enabling this addon now that my project uses storybook's webpack5 builder and things appear to be running much smoother. Am I going crazy or can anyone else confirm?

[ghengeveld]

Closing this, as the issue seems to be resolved and the ticket is stale.

[unional]

I'm still observing freezes, on storybook 8.0.8

It happens when I change the parameter key in the story:

export const MyStory: Story = {
	parameters: {
		pseudo: {
			hover: ['.hover'],
			active: ['.active'],
			focusVisible: ['.focus'] // <-- here
		}
	},