storybook, tailwindcss and storybook addon styling issue | Storybook | Page 1

fallow nimbus Apr 12, 2023, 5:06 PM

#

currently having an issue with storybook and tailwind where its not loading the correct colors.

#

  theme: {
    extend: {
      /* Backgrounds */
      backgroundColor: {
        button: "var(--bg-button)",
        elevated: "var(--bg-elevated)",
        main: "var(--bg-main)",
        primary: "var(--bg-primary)",
        "primary-action": "var(--bg-primary-action)",
        "primary-action-hover": "var(--bg-primary-action-hover)",
        quaternary: "var(--bg-quaternary)",
        "react-select": "var(--bg-react-select)",
        secondary: "var(--bg-secondary)",
        "secondary-action": "var(--bg-secondary-action)",
        tertiary: "var(--bg-tertiary)",
        "tertiary-action": "var(--bg-tertiary-action)",
        tag: "var(--tag-bg)",
      },
    ...
  }
}```

#

@layer base {
  :root {
    /* Backgrounds */
    --bg-button: #fff;
    --bg-elevated: #fff;
    --bg-main: #fafafa;
    --bg-primary: #fff;
    --bg-primary-action: #171717;
    --bg-primary-action-hover: #313131;
    --bg-quaternary: #f0f0f0;
    --bg-react-select: #fff;
    --bg-secondary: #fafafa;
    --bg-secondary-action: #e5e5e5;
    --bg-tertiary: #f5f5f5;
    --bg-tertiary-action: #fff;
    --tag-bg: #f5f5f5;
    }
  ...
}

fallow nimbus Apr 12, 2023, 5:07 PM

#

fallow nimbus ```css @layer base { :root { /* Backgrounds */ --bg-button: #fff; ...

this is in a seperate file called colors.css

#

and importing that file in globals.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

@import "./fonts.css";
@import "./colors.css";```

fallow nimbus Apr 12, 2023, 5:08 PM

#

fallow nimbus and importing that file in globals.css: ```css @tailwind base; @tailwind compon...

importing this global file within preview.

fallen yarrow Apr 12, 2023, 7:17 PM

#

Hey @fallow nimbus let's see what's going on here

#

What version of Storybook and @storybook/addon-styling are you using?

#

Also can you share your .storybook/main.js with me here?

fallow nimbus Apr 12, 2023, 7:27 PM

#

module.exports = {
  stories: ["../src/stories/**/*.stories.@(ts|tsx|js|jsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-actions",
    "@storybook/addon-essentials",
    "@storybook/addon-styling",
    {
      name: "@storybook/addon-postcss",
      options: {
        postcssLoaderOptions: {
          implementation: require("postcss"),
        },
      },
    },
  ],
  staticDirs: ["../public"],
  framework: "@storybook/react",
  core: {
    builder: "@storybook/builder-webpack5",
  },
  typescript: {
    check: true, // type-check stories during Storybook build
  },
}

fallow nimbus Apr 12, 2023, 7:31 PM

#

fallen yarrow What version of Storybook and @storybook/addon-styling are you using?

  "@storybook/react": "^6.5.16",```

fallen yarrow Apr 12, 2023, 8:05 PM

#

Ahhhh, so there's a potential problem! @storybook/[email protected] is for Storybook 7

#

If you're using SB 6.5 you should use version 0.3.2 of addon styling

fallow nimbus Apr 12, 2023, 8:06 PM

#

fallen yarrow Ahhhh, so there's a potential problem! `@storybook/[email protected]` is for S...

would it be possible to upgrade to storybook 7?

#

what would the changes i have to do be?

fallen yarrow Apr 12, 2023, 8:10 PM

#

We offer some codemods to make it fairly straightforward for you 🙂

#

run npx storybook@latest upgrade

#

Also, what does your postcss.config.js file look like?

fallow nimbus Apr 12, 2023, 8:16 PM

#

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

fallen yarrow Apr 12, 2023, 8:17 PM

#

It looks like tailwind recommends using the postcss-import plugin if you have your tailwind files across multiple css files

https://tailwindcss.com/docs/adding-custom-styles#using-multiple-css-files

Adding Custom Styles - Tailwind CSS

Best practices for adding your own custom styles to Tailwind.

fallow nimbus Apr 12, 2023, 8:28 PM

#

fallen yarrow It looks like tailwind recommends using the postcss-import plugin if you have yo...

what should i do about this?

Attention: We've detected that you're using the following addons in versions which are known ││ to be incompatible with Storybook 7: ││ ││ - @storybook/[email protected]

fallen yarrow Apr 12, 2023, 8:29 PM

#

You can remove addon-postcss as it's deprecated and replaced by addon-styling 🙂

fallow nimbus Apr 12, 2023, 8:34 PM

#

seems to me upgrading broke a lot of things 😦

#

📎 message.txt

fallen yarrow Apr 12, 2023, 8:39 PM

#

It's okay! Seems scarier than it is ❤️

#

Did the upgrade command ask you about running some migration scripts?

fallow nimbus Apr 12, 2023, 8:41 PM

#

yep

#

did all those

fallen yarrow Apr 12, 2023, 8:42 PM

#

okay cool 🙂

#

Where are you importing those SuisseIntl-Thin.otf files?

fallow nimbus Apr 12, 2023, 8:51 PM

#

got a file called font.css

#

which i am importing in globals.css

#

  font-family: SuisseIntl;
  font-weight: 100;
  font-display: block;
  font-style: normal;
  src: url("/fonts/SuisseIntl-Thin.otf") format("otf");
}

@font-face {
  font-family: SuisseIntl;
  font-weight: 200;
  font-display: block;
  font-style: normal;
  src: url("/fonts/SuisseIntl-Ultralight.otf") format("otf");
}

@font-face {
  font-family: "SuisseIntl";
  font-weight: 300;
  font-display: block;
  font-style: normal;
  src: url("/fonts/SuisseIntl-Light.otf") format("otf");
}

@font-face {
  font-family: "SuisseIntl";
  font-weight: 400;
  font-display: block;
  font-style: normal;
  src: url("/fonts/SuisseIntl-Regular.otf") format("otf");
}

@font-face {
  font-family: "SuisseIntl";
  font-weight: 500;
  font-display: block;
  font-style: normal;
  src: url("/fonts/SuisseIntl-Medium.otf") format("otf");
}

@font-face {
  font-family: "SuisseIntl";
  font-weight: 600;
  font-display: block;
  font-style: normal;
  src: url("/fonts/SuisseIntl-SemiBold.otf") format("otf");
}

@font-face {
  font-family: "SuisseIntl";
  font-weight: 700;
  font-display: block;
  font-style: normal;
  src: url("/fonts/SuisseIntl-Bold.otf") format("otf");
}

@font-face {
  font-family: "SuisseIntl";
  font-weight: 900;
  font-display: block;
  font-style: normal;
  src: url("/fonts/SuisseIntl-Black.otf") format("otf");
}

#

we had a call regarding this one remember?

#

importing globals.css in preview.

fallow nimbus Apr 12, 2023, 8:55 PM

#

fallen yarrow It's okay! Seems scarier than it is ❤️

thanks again for all the help. i know you don't have to 😉 means a lot!

fallen yarrow Apr 12, 2023, 8:56 PM

#

I do remember! The font name was a give away

fallow nimbus Apr 12, 2023, 8:57 PM

#

haha

#

🙂

fallen yarrow Apr 12, 2023, 8:57 PM

#

So two things!

format("otf"); needed to be format("opentype");

#

And we switched to relative imports for the font file paths 🙂

fallow nimbus Apr 12, 2023, 8:58 PM

#

!!! why did it switch this

#

omg

fallen yarrow Apr 12, 2023, 9:01 PM

#

ahaha stranger things have happened

fallow nimbus Apr 12, 2023, 9:02 PM

#

got it.

fallen yarrow Apr 12, 2023, 9:02 PM

#

this time leave yourself a note in the comments

fallow nimbus Apr 12, 2023, 9:02 PM

#

is there a new way to write stories?

fallow nimbus Apr 12, 2023, 9:02 PM

#

fallen yarrow this time leave yourself a note in the comments

!! will do this. haha

#

thanks

fallen yarrow Apr 12, 2023, 9:02 PM

#

huzzah! it's working now?

fallow nimbus Apr 12, 2023, 9:02 PM

#

ye font issues gone

#

a weird semicolon issue now tho

fallen yarrow Apr 12, 2023, 9:02 PM

#

Well then we're getting better! last time it took us a few hours

fallow nimbus Apr 12, 2023, 9:03 PM

#

export default {
  title: "Atoms/Bar",
  component: Bar,
} as ComponentMeta<typeof Bar> <------ HERE IS it's saying MISSING SEMICOLON

const Template: ComponentStory<typeof Bar> = (args) => <Bar {...args} />

export const Default = Template.bind({})```

#

is this still a valid way to write stories?

fallen yarrow Apr 12, 2023, 9:03 PM

#

huh... it should be 🤔

#

Is it maybe an eslint based error?

fallow nimbus Apr 12, 2023, 9:04 PM

#

yes but saying within storybook preview

#

like displayign the error there

fallen yarrow Apr 12, 2023, 9:07 PM

#

Right! so one of those auto-migration scripts is to add some eslint checks to storybook files. missing semicolons is still valid. I guess we were trying to recommend best practices

#

By the way I see that you're using the Component Story Format 2 (CSF2) format for your story files 😄

#

This is totally valid but if you want an even easier way to write your stories try out our new version CSF3

#

https://storybook.js.org/blog/storybook-csf3-is-here/

Storybook Blog

Component Story Format 3 is here

Next gen story format to make you more productive

fallow nimbus Apr 12, 2023, 9:29 PM

#

fallen yarrow https://storybook.js.org/blog/storybook-csf3-is-here/

ye will use this

#

was never sure on what the best or most optimal way of writing these was 🙂

#

hahah

fallen yarrow Apr 12, 2023, 9:32 PM

#

I'll admit we haven't been the best at declaring best practices. We're going to work on changing that 🙂

#storybook, tailwindcss and storybook addon styling issue