search

phenixdigital / phoenix_storybook

A pluggable storybook for your Phoenix components.
MIT License
642 stars 49 forks source link

bug: setting up storybook breaks homepage rendering (CSS) #426

Closed sgardn closed 5 months ago

sgardn commented 5 months ago

Description

I'm trying to get up and running with phoenix storybook so I have an easier environment to learn a bit about LiveView components.

Trouble is, once I have set up the framework, it seems to have broken my homepage route asset pipeline. Though I do see the same CSS files getting sent over the wire in the developer tools tab, I do not see the styles taking effect.

Any ideas what I could have done wrong? Here's a branch with the minimal changes made to spin up an app and install storybook: https://github.com/sgardn/unprompted/tree/install-storybook

One thing that might be interesting is that there is a conflict between heroicons for Tailwind (as installed by Phoenix) and those required by storybook - I did have to flag the dependency as overrided, (though that really shouldn't break the rest of the CSS).

Details

Elixir: 1.16.0 Erlang: 25.3.2.8 Phoenix Storybook: 0.6.0

Before installing Phoenix storybook:

Screenshot 2024-02-09 at 4 36 41 PM Screenshot 2024-02-09 at 4 36 34 PM

After installing storybook:

Screenshot 2024-02-09 at 4 35 59 PM Screenshot 2024-02-09 at 4 36 13 PM

cblavier commented 5 months ago

Sounds like a duplicate of #419 no? The fix in the generator is not yet released but you can do the change manually on your layout file

sgardn commented 5 months ago

It is indeed a duplicate - thanks! I didn't think to check in resolved issues, figured it was a new issue 😵‍💫

Can you explain a little why it's worth prefixing the tailwind classes for the "normal" app with the .important class to override specificity? It feels a little odd to me that installation / usage of the package ends up being "visible" in the HTML of the actual web app itself.

If it's possible, it might be preferable to avoid that. I realize this might mean some changes for the storybook pages / HTML / classes, but might make page painting slightly quicker for actual apps and avoid confusion down the road.

cblavier commented 5 months ago

Since all HTML (storybook's and application's) are living in the same document, we needed to figure out a strategy to prevent CSS leaking (both ways).

This documentation explains all of this: https://hexdocs.pm/phoenix_storybook/sandboxing.html (part 3 is explaining the important part)