Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

css conflicts in Variations (0.2.0) #17

Closed
glennr opened this issue Aug 13, 2022 · 10 comments · Fixed by #25
Closed

css conflicts in Variations (0.2.0) #17

glennr opened this issue Aug 13, 2022 · 10 comments · Fixed by #25

Comments

@glennr
Copy link

glennr commented Aug 13, 2022 •
edited

Hi!

LSB version: 0.2.0

I've noticed the LSB styles are fighting with app styles imported via css_path

It appears LSB combines its own, and my_app's css together in the document <head>. This may cause components rendered inside %Variation elements to inherit styling from LSB, and not the app.

In my specific case, the use of a LSB text classes on <body> (lsb-font-inter lsb-text-base etc) are overriding my Tailwind base styles, which are added to <html> in preflight in my css bundle.

What are your plans here? I see that Storybook renders each Story in its own iframe.

Anything we can help with?
@glennr glennr changed the title Rendering a story in its own iframe css conflicts in Variations (0.2.0) Aug 13, 2022
@glennr glennr changed the title css conflicts in Variations (0.2.0) css conflicts in Variations (0.2.0) Aug 13, 2022
@cblavier
Copy link
Contributor

cblavier commented Aug 13, 2022 •
edited

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 :)

@cblavier
Copy link
Contributor

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

@cblavier
Copy link
Contributor

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

@glennr
Copy link
Author

glennr commented Aug 17, 2022

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.

@glennr
Copy link
Author

glennr commented Aug 17, 2022

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

@cblavier cblavier mentioned this issue Aug 17, 2022
Closed
@cblavier
Copy link
Contributor

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.

@glennr
Copy link
Author

glennr commented Aug 18, 2022

I grabbed c4600a5

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

image

But our preflighted font class remains overridden

image

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

image

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

@glennr
Copy link
Author

glennr commented Aug 18, 2022

but the playground iframe rendering is not fully working yet

oops - missed that :-)

@cblavier
Copy link
Contributor

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.

@cblavier cblavier linked a pull request Aug 18, 2022 that will close this issue
17 css conflicts in variations 020 #25
Merged
@glennr
Copy link
Author

glennr commented Aug 19, 2022 •
edited

@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';
  }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

17 css conflicts in variations 020 phenixdigital/phoenix_storybook
2 participants
@glennr @cblavier