css conflicts in `Variation`s (0.2.0) about phoenix_storybook HOT 10 CLOSED

Hey @glennr 👋 I'd love to have your opinion on this:

https://github.com/phenixdigital/phx_live_storybook/blob/17-css-conflicts-in-variations-020/guides/sandboxing.md

from phoenix_storybook.

But our preflighted font class remains overridden

Unfortunately, I think that when providing your components styles to the storybook, you'll have to apply some styles on .lsb-sandbox yourself. There is no way your component can inherit styles from the HTML or body elements.

I will make the documentation more explicit.

I took a crack at the iframe option, but its falling over on the Story :ids?

Sorry about that, it's a bug!
Playground inits its attributes from your first story in the entry file. It looks like your first story is a StoryGroup, I will handle that and write a proper test.

from phoenix_storybook.

Hi Glenn, It seems to be a bug indeed!

I'm using a prefixed version of Tailwind (with the lsb- prefix) to prevent a CSS clash between the storybook and app's components, but I didn't realize that it wouldn't work with preflight styling (in both ways).

I think I will have to explore the iframe way, thanks for the insight.

For now (as the code base is still early and evolving fast), the best help you can provide me with is thorough and detailed feedback! Please go on :)

from phoenix_storybook.

I'm starting a new branch today, experimenting with iframes.
I'll keep you posted!

from phoenix_storybook.

Hi @cblavier

I like the iframe escape hatch. I couldn't get it working on your branch though?

Regarding this statement in your branch:

So unless your components use lsb- prefixed classes there should be no styling leak from the storybook to your components.

Yes and no. If, like me, your components also rely on styling from Tailwind preflights, then you're gonna have problems. Am I missing something?

I'm not sure how to work around problem #2 here. I glanced at the TW docs to see if there was an alternative way to configure my component fonts such that my Tailwind preflight config wouldn't conflict with phx_live_storybook's (or vice versa). No obvious solution yet.

from phoenix_storybook.

(Btw the %StoryGroup{} you added post 0.2.0 cleans things up really nicely)

from phoenix_storybook.

I like the iframe escape hatch. I couldn't get it working on your branch though?

It is available on my branch now: stories rendering is almost fine, but the playground iframe rendering is not fully working yet.
To enable it, add def container, do: :iframe to your component entry file.

Yes and no. If, like me, your components also rely on styling from Tailwind preflights, then you're gonna have problems. Am I missing something?

I'm using a custom Tailwind preflight, that will only preflight elements with lsb class. Since all elements in the storybook (from body to the smallest span have the lsb class) they should be quite protected because this preflight has a higher specificity.

from phoenix_storybook.

I grabbed c4600a5

I see your sandboxing (.lsb-sandbox) starting to improve things:

But our preflighted font class remains overridden

I took a crack at the iframe option, but its falling over on the Story :ids?

Stacktrace:

Request: GET /storybook/iframe/components/button?story_id=colors                                                                             
** (exit) an exception was raised:                                                                                                           
    ** (RuntimeError) unknown story :colors for module BrmblWeb.Storybook.Components.Button                                                  
        (brmbl 0.1.0) lib/brmbl_web/storybook.ex:3: BrmblWeb.Storybook.render_story/2                                                        
        (phx_live_storybook 0.3.0) lib/phx_live_storybook/live/entry/component_iframe_live.ex:53: anonymous fn/2 in PhxLiveStorybook.Componen
tIframeLive.render/1                                                                                                                         
        (phoenix_live_view 0.17.11) lib/phoenix_live_view/diff.ex:387: Phoenix.LiveView.Diff.traverse/7                                      
<SNIP>
[error] #PID<0.3198.0> running BrmblWeb.Endpoint (connection #PID<0.3171.0>, stream id 2) terminated

from phoenix_storybook.

but the playground iframe rendering is not fully working yet

oops - missed that :-)

from phoenix_storybook.

@cblavier I think the key step was the utilities layer for .lsb-sandbox which I missed in my custom.css:

// Existing config
@layer base {
  @font-face {
    font-family: 'Biryani';
    ...

// Live Storybook
@layer utilities {
  /* this style will be generated as .lsb-sandbox * { ... } */
  * {
    font-family: 'Nunito Sans';
  }
}

from phoenix_storybook.