linear[bot]
commented
1 year ago AP-3505 Pseudo states addon doesn't handle dynamic stylesheets
#### How is the user affected? And what is the expected behavior? BBC ran into this issue. I had a meeting with Natalia earlier today we finally boiled it down to this: [https://github.com/chromaui/storybook-addon-pseudo-states/issues/86](https://github.com/chromaui/storybook-addon-pseudo-states/issues/86) #### How many and/or what class of users does this impact? Users of CSS frameworks that dynamically inject new styles into existing stylesheets (e.g. Emotion/Styled Components) in conjunction with an asynchronous process that triggers such behavior (e.g. theme switcher). Both are commonplace. #### Is there a workaround? Very much dependent on the implementation details. For BBC they can reload the page, but Chromatic snapshots are still broken, so it's not really a workaround. #### What are the steps for reproducing the issue? Stories render correctly when visiting with a [URL](https://5d02576173cf8b00202bda0e-ffgfzlkukj.chromatic.com/?path=/story/components-interactions-signpost-link-tests--focus-dark&globals=servicePalette:serviceNeutralDark;corePalette:darkAlternative;pseudo.focus:!true) that contains globals, but doesn't when visiting with a plain [URL](https://5d02576173cf8b00202bda0e-ffgfzlkukj.chromatic.com/?path=/story/components-interactions-signpost-link-tests--focus-dark) that doesn't. This is why it works locally and when they copy/paste the URL to share with coworkers, but doesn't work when navigating to a story from Chromatic, or when Chromatic takes screenshots. To reproduce, simply remove the globals from the URL before requesting the page. #### Other information The problem is with the `__pseudoStatesRewritten: true` which is a performance enhancement to prevent the pseudo states addon from rewriting the same stylesheet multiple times. When a stylesheet gets new style rules added to it dynamically, these style rules don't get rewritten. Most likely this can be fixed by changing the addon to add `__pseudoStatesRewritten` to every rule rather than the stylesheet as a whole.
github-actions[bot]
This should allow sheets to be rewritten multiple times in case new rules are added later, whilst still not re-applying to already rewritten rules.
📦 Published PR as canary version:
2.1.2--canary.87.9ed8103.0:sparkles: Test out this PR locally via: ```bash npm install storybook-addon-pseudo-states@2.1.2--canary.87.9ed8103.0 # or yarn add storybook-addon-pseudo-states@2.1.2--canary.87.9ed8103.0 ```