Fix Storybook incompatibility with Tailwindcss (fixes #62)

[Iinh]

This PR fixes issue #62 by adding the correct Tailwind CSS components, using https://github.com/jerriclynsjohn/svelte-storybook-tailwind as template.

[wlach]

Hi @linh! Thank you, this looks much better. However it looks like the heading isn't getting styled as I'd expect (it should be larger). I think this is because the styles in https://github.com/mozilla/glean-dictionary/blob/main/src/Tailwindcss.svelte aren't getting imported. Could you see if there's a way for them to be imported by default for all stories? You'll see that the main application includes them like this:

glean-dictionary/src/App.svelte

Line 36 in 5e78700

<Tailwindcss />

[Iinh]

What I’ve tried

I imported Tailwind to the story file itself to use as a styling wrapper with decorators. However, the problem is custom decorator syntax requires a div with literal styling that wraps around the component, like so:

export const Basic = () => {
  Component: SchemaViewer,
  decorators:  [(Story) => <div style={{ margin: '3em' }}><Story/></div>]
};

Tailwindcss.svelt is a Svelte component, so it can’t be properly used inside the callback function. Something like this wouldn’t work:

Import Tailwindcss from “../Tailwind”
export const Basic = () => {
  Component: SchemaViewer,
  decorators:  [(Story) => <div style={{ Tailwindcss }}><Story/></div>]
};

My solution

Currently, Tailwindcss is compiled to a separate CSS file at run time. The output of this file, according to the rollup configuration, is at /public/build/bundle.css. Since this CSS file always has to be compiled to be used in the main app, I thought why not use it for Storybook too. This also ensures that any additional styling, once processed, will apply to all stories. Attached image shows how the story looks with this solution.

Looking forward to feedback. Thank you!

[wlach]

@linh Would this not work?

Import Tailwindcss from “../Tailwind”
export const Basic = () => {
  Component: SchemaViewer,
  decorators:  [(Story) => <div><Tailwindcss/><Story/></div>]
};

Using the bundle css directly might be ok, though I'd worry about it being kept up to date (I'm not sure if storybook will recompile it when it changes?).

Regardless, thanks for your persistence on this!

[Iinh]

Hi @wlach, your code would cause an error in storybook. I believe because you used JSX (<div><Tailwindcss/><Story/></div>) inside decorators, and JSX syntax is invalid in Javascript without a compiler. That’s why the code sample used in the document for decorators would not work in our case because they all use JSX. However it would work in a React application.

The reason why I went with my solution because to fix this bug, the goal was to import the styling currently in Tailwindcss.svelte to storybook. After realizing that I could not use decorators or import the Tailwind component directly, I figured that another way to achieve this goal was to import the css bundle.

For now it does the job. Any changes to bundle.css that directly affects storybook will apply. I agree with you that it’s not the best way as we have to always make sure that css bundle is up to date when making Tailwind changes. As we add more stories that require complicated styling, to avoid relying on css bundle, we could:

• Have a separate styling folder system from the main app for better separation of concerns
• Set up Postcss configuration inside storybook so we don’t have to run npm run dev and rely on development build for Tailwind processing, something similar to this.

What do you think? I appreciate your time and feedback!

[wlach]

Hi @wlach, your code would cause an error in storybook. I believe because you used JSX (<div><Tailwindcss/><Story/></div>) inside decorators, and JSX syntax is invalid in Javascript without a compiler. That’s why the code sample used in the document for decorators would not work in our case because they all use JSX. However it would work in a React application.

You are of course totally right on this. Apologies for the misdirection.

Set up Postcss configuration inside storybook so we don’t have to run npm run dev and rely on development build for Tailwind processing, something similar to this.

I think this sounds like the way to go! The main piece of functionality we're looking for here are the storybook components reloading when people modify the top-level tailwind component. If that works, I think we're good to merge.

Thanks so much for your persistence on this.

[Iinh]

This update is looking to fix 2 problems.

1) Tailwind incompatibility with Storybook

Currently Tailwind doesn't work properly in Storybook. This is fixed by updating the webpack configuration to include svelte-preprocess. However this fix alone doesn't completely resolve the issue of storybook not rendering the top-level tailwind component because of the problem below.

2) Global styles not available globally

Tailwindcss.svelte has all css global rules, including the Tailwind utilities packages. The problem with this file is it's placed inside App.svelte, which means that global styles only get compiled and become available for other components after App is called. This is fine in development as App is always the first one called. However, in storybook, each component is called in isolation. For example, when SchemaViewer loads in Storybook the only styling available is from SchemaViewer itself. If App was never called, SchemaViewer can't inherit any global styles.

To fix this problem, we need to keep global styles in a different file. 3 main requirements:

• It can’t be a svelte component because we can’t use component syntax for styling in storybook
• It needs to be accessible to all components: it can’t belong to just one component, like how inaccessible Tailwindcss.svelte was because it's only available through App
• Changes to this file need to reload the components, both in development and storybook

I believe the best option is to replace Tailwindcss.svelte with a css file for global styles, because:

• A css file can be easily imported to use with storybook. Any changes will directly reload the stories
• In development: svelte-preprocess doesn’t compile css files outside of Svelte components, we can use postcss-cli to compile it instead. This css file writes to public/build/global.css, which is then used in index.html -- global styles will apply to all components. An npm script was added to watch this css file so that it'll recompile if changes are added.

With this change, all stories will independently inherit global styles. We also don't have to rely on development build as the css file is imported directly to storybook.

Looking forward to feedback @wlach. Thank you!

[wlach]

So in storybook, this works great! Unfortunately we lose live reloading inside the dev environment. I think what we need is a hybrid approach: the current approach in storybook, and the component approach in the actual app (by importing the css file inside of it, instead of defining it inline). I just tested and this seems possible, but I'll leave the solution to you.

This guide will be helpful for figuring it out: https://www.apostrof.co/blog/getting-tailwind-css-to-integrate-nicely-with-svelte-sapper/

Extra hint: You'll need to add postcss-import.

[wlach]

Should not be necessary (see review)

[Iinh]

Hi @wlach thank you for your feedback! I've updated my code with the hybrid approach. Looks like CircleCI failed my PR because of some code format error in Tailwindcss.svelte. I tried changing it around but it didn't seem to work. Locally my linter is not complaining anything so it's not clear what I need to fix either, I probably need another pair of eyes to help find this format error. What usually is your approach to solve issues like this? Thank you.

ps Sorry about the messy commit history, I was changing the file around hoping it would pass Circleci.

[wlach]

@linh try running npm run format! It should autofix things for you

[Iinh]

@wlach YES that fixed it, thank you so much! I learned so many new things this week. This PR is ready for review.

[wlach]

Awesome!