Usage with storybook

[tim-richter]

Hey everyone 👋

I've made storybook work with vanilla-extract and wanted to introduce the idea of adding documentation about the process so other developers don't run into the same issues I had with it.

Problems were mainly:

• The mini-css-extract-plugin relies on webpack 5 which storybook currently only supports by enabling it manually (here is a guide on how to do it)
• When extending the default storybook webpack config the .css rule that storybook comes with casts a pretty wide net and matches the vanilla.css files which results in errors because css-loader is applied multiple times to those files. My solution involved just filtering out the .css rules from the storybook config and then adding the vanilla.css rule (given the code for this seems rather brittle and would probably need to be adjusted) Line 18

As far as I can see everything works perfectly fine now even hot reloading etc.

Reproduction Repo

[tmm]

Also worth noting that Storybook has experimental Vite support. I tried it out and it works well — and is super fast.

[w3b-wiz4rd]

@tmm Heya, by any change do you have an example of how to set it up ? I've been struggling to make it work.
My current setup is: Vite + Storybook + vanilla-extract

If I use the component on the App.tsx generated by Vite everything works.

But in storybook I keep getting this:

Is the same component .. but still not working on storybook.

I followed the same pattern, but removing the miniCSS plugin, don't think is needed on vite;

This is my current man.js

`const path = require("path")

module.exports = {
stories: ["../src//*.stories.mdx", "../src//*.stories.@(js|jsx|ts|tsx)"],
addons: [
path.resolve("./.storybook/vanilla-extract"),
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions",
],

framework: "@storybook/react",
core: {
builder: "@storybook/builder-vite",
},
features: {
storyStoreV7: true,
},
}
`

This is my current vanilla-extract.js

`const { vanillaExtractPlugin } = require("@vanilla-extract/vite-plugin")

module.exports = {
webpackFinal(baseConfig, options) {
const { module = {}, plugins = {} } = baseConfig

return {
  ...baseConfig,
  plugins: [...plugins, new vanillaExtractPlugin()],
}

},
}
`
Any help would be appreciate it.
Regards.

[fredericoo]

@tmm Heya, by any change do you have an example of how to set it up ? I've been struggling to make it work. My current setup is: Vite + Storybook + vanilla-extract

If I use the component on the App.tsx generated by Vite everything works.

But in storybook I keep getting this:

Is the same component .. but still not working on storybook.

I followed the same pattern, but removing the miniCSS plugin, don't think is needed on vite;

This is my current man.js

`const path = require("path")

module.exports = { stories: ["../src//*.stories.mdx", "../src//*.stories.@(js|jsx|ts|tsx)"], addons: [ path.resolve("./.storybook/vanilla-extract"), "@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions", ],

framework: "@storybook/react", core: { builder: "@storybook/builder-vite", }, features: { storyStoreV7: true, }, } `

This is my current vanilla-extract.js

`const { vanillaExtractPlugin } = require("@vanilla-extract/vite-plugin")

module.exports = { webpackFinal(baseConfig, options) { const { module = {}, plugins = {} } = baseConfig

return {
  ...baseConfig,
  plugins: [...plugins, new vanillaExtractPlugin()],
}

}, } ` Any help would be appreciate it. Regards.

Did you find a solution?

[neolectron]

Solution here

[SaschaDens]

Thanks @tim-richter for the reproduction repository!

I was exactly trying to do the same things but then on the current release of storybook (with Webpack 4) but got eventually stuck.
I'm wondering if there is a possibility to make vanilla-extract run without the mini-css-extract-plugin loader where the style-loaderis used instead just to make the components visible in storybook.

No luck so far 😞 but I'll continue to also try as this looks promising.

[SaschaDens]

Good news I was able to make vanilla-extract run in the current release of storybook with the following adaptations.
I'll post it here for other developers in a similar situation 😄 .

For [email protected] you'll need Webpack 5 for the current release but I've tested with [email protected] and this also seems to do the trick.

yarn add --dev @vanilla-extract/css @vanilla-extract/webpack-plugin [email protected]

Then similar as @tim-richter mentioned the storybook configuration needs to be extended to exclude .vanilla.css out of the /\.css$/ regex of storybook and include the @vanilla-extract/webpack-plugin plugin.

This can be done by adapting storybooks following files:

// ./.storybook/main.js
const path = require('path');

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    path.resolve('./.storybook/vanilla-extract.js'),
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-create-react-app',
  ],
};

Then in ./.storybook/vanilla-extract.js you inject the plugin

// ./.storybook/vanilla-extract.js
const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  webpackFinal(baseConfig, options) {
    const { module = {}, plugins = {} } = baseConfig;

    const isCssRule = (rule) =>
      []
        .concat(rule?.test)
        .filter(Boolean)
        .find((expr) => expr.test('random.css'));
    module.rules
      .map(({ oneOf, ...rule }) =>
        oneOf ? oneOf.find(isCssRule) : isCssRule(rule),
      )
      .filter(Boolean)
      // Here we exclude *.vanilla.css files which will be taken up by the vanilla-extract
      .forEach((match) => match.exclude.push(/\.vanilla\.css$/));

    return {
      ...baseConfig,
      plugins: [
        ...plugins,
        new VanillaExtractPlugin(),
        new MiniCssExtractPlugin(),
      ],
      module: {
        ...module,
        rules: [
          ...module.rules,
          {
            test: /\.vanilla\.css$/i, // Targets only CSS files generated by vanilla-extract
            use: [
              MiniCssExtractPlugin.loader,
              {
                loader: require.resolve('css-loader'),
                options: {
                  url: false, // Required as image imports should be handled via JS/TS import statements
                },
              },
            ],
          },
        ],
      },
    };
  },
};

For storybook with webpack@5

@tim-richter for Line 18 you disable the default css-loader. You could potentially use the following snippet instead to make the regex ignore also \.vanilla.css$ and make both options work.

const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  webpackFinal(baseConfig, options) {
    const { module = {}, plugins = {} } = baseConfig;

    const cssRule = module.rules.find((rule) => rule?.test?.test('test.css'));
    cssRule.test = /.*(?<!\.vanilla)\.css$/;

    return {
      ...baseConfig,
      plugins: [
        ...plugins,
        new VanillaExtractPlugin(),
        new MiniCssExtractPlugin(),
      ],
      module: {
        ...module,
        rules: [
          ...module.rules,
          {
            test: /\.vanilla\.css$/i, // Targets only CSS files generated by vanilla-extract
            use: [
              MiniCssExtractPlugin.loader,
              {
                loader: require.resolve('css-loader'),
                options: {
                  url: false, // Required as image imports should be handled via JS/TS import statements
                },
              },
            ],
          },
        ],
      },
    };
  },
};

[tim-richter]

Really cool! Will definitely try that out seems like a better approach with the regex 😉

[igorthetigor]

FUIYOOOH that worked out of the noodle box!

[cadbox1]

I ran into the same issue where removing the original css loader meant regular css files couldn't load.

I tried this snippet but it still didn't work so I ended up modifying the added css-loader to include all css files and it seemed to work. maybe something changed on storybook's side.

tim-richter/next-boiler#27

[sean-tmg]

@tim-richter thanks so much for putting this together. Huge time saver for me to pick out the bits.

I used @SaschaDens suggestion for Webpack 5, and also had to add this to my Storybook main.js

♥️

[pruthvi2103]

For anyone struggling to get storybook up and running I have a simple example repo which has Storybook and Vanilla Extact with Vite. Feel free to go through the repo. Its simple, hassle free and works well.

[w3b-wiz4rd]

@pruthvi2103 Thanks a lot man! I've been struggling with this setup! It works!

[wallacerenan]

Best solution with webpack4!

create a file called webpack.config.js inside the .storybook folder, with the content:

// .storybook/webpack.config.js
const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin');

module.exports = ({ config }) => {

  const plugins = [new VanillaExtractPlugin(), ...config.plugins]

  config.plugins = plugins

  return config;
};

If you need another plugin, example:

// .storybook/webpack.config.js
const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = ({ config }) => {

  const plugins = [new VanillaExtractPlugin(), new MiniCssExtractPlugin(), ...config.plugins]

  config.plugins = plugins

  return config;
};

[liam-jones-lucout]

For anyone struggling to get Vanilla-Extract working with Storybook Vite, here's my storybook main.js:

const { mergeConfig } = require('vite');

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions"
  ],
  "framework": "@storybook/react",
  "core": {
    "builder": "@storybook/builder-vite"
  },
  "features": {
    "storyStoreV7": true
  },
  async viteFinal(config) {
    return mergeConfig(config, {
      plugins: [require("@vanilla-extract/vite-plugin").vanillaExtractPlugin()]
    });
  }
}

[jd-oconnor]

I wanted to share this in case anyone runs into a similar issue with SB 7 and getting build errors.

I spent several hours over the past couple of days trying to get SB 7 to build. I've been working on a private package for my company and implementing SB and Chromatic. This thread helped with some things, but once I got this error, I hit a brick wall

Running it locally was completely fine. But every time I ran a build, that's the error I would get.

Turns out, VE ships an older version of esbuild (0.11.16) in @vanilla-extract/integration but SB 7 needs/uses a newer version and that's what's causing the issue with SB. Kudos to the SB maintainer I worked with that helped me figure it out. Simple fix was adding:

"overrides": {
  "esbuild": "0.16.6"
},

Running it locally still works and the build now succeeds!

Here's my main.js

const path = require('path');

module.exports = {
  "core": {
    "builder": "webpack5",
  },
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    path.resolve('./.storybook/vanilla-extract.js'),
    path.resolve('./.storybook/ts-paths'),
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions"],
  "framework": {
    name: "@storybook/react-webpack5",
    options: {}
  },
  docs: {
    docsPage: "automatic"
  },
  typescript: {
    check: false,
    checkOptions: {},
    reactDocgen: false,
    reactDocgenTypescriptOptions: {
       shouldExtractLiteralValuesFromEnum: true,
       propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
    },
  },
};

[kim-jaedeok]

I think it could be simpler.
here is my main.js

const { VanillaExtractPlugin } = require("@vanilla-extract/webpack-plugin");
const { merge } = require("webpack-merge");

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
  ],
  framework: "@storybook/react",
  core: {
    builder: "@storybook/builder-webpack5",
  },
  webpackFinal: async (config) =>
    merge(config, {
      plugins: [new VanillaExtractPlugin()],
    }),
};

[dachewster99]

It takes roughly 15 seconds between making code changes, and actually seeing those changes in Storybook. Is anybody else having these issues? I do have a large amount of stories, but 15 seconds to notice a change still seems pretty excessive.

I dont believe this to be storybook itself, as if I update a prop in the side panel, it updates immediately. So i am assuming its something in the build. I am using vite

[jd-oconnor]

Hmmm 🤔 definitely wouldn't expect to have that with vite. Is there a repo you can share to take a look at the code?

[yyyyaaa]

same here, it gets worse once you get past 30+ stories (I'm using vite + storybook)

[cseas]

Thank you! Your solution helped point me in the right direction. However, instead of removing Storybook's css rule, I found it better to just add an exclude property to it instead so it leaves vanilla extract's files alone.

Here's my working config with Storybook 7 and webpack 5:

// .storybook/main.js
import { VanillaExtractPlugin } from "@vanilla-extract/webpack-plugin";
import MiniCssExtractPlugin from "mini-css-extract-plugin";

export default {
  // ... other options
  framework: {
    name: "@storybook/react-webpack5",
    options: {},
  },
  webpackFinal: async (config) => {
    const customConfig = { ...config };

    // modify css rule of storybook to exclude Vanilla Extract files
    for (let i = 0; i < customConfig.module.rules.length; i++) {
      if (customConfig.module.rules[i].test.test("sample.css")) {
        customConfig.module.rules[i].exclude = /\.vanilla\.css$/i;
        break;
      }
    }

    customConfig.module.rules.push(
      {
        test: /\.vanilla\.css$/i,
        use: [
          MiniCssExtractPlugin.loader,
          {  loader: "css-loader", options: {  url: false  }  },
        ],
      },
    );

    customConfig.plugins.push(
      new VanillaExtractPlugin(),
      new MiniCssExtractPlugin()
    );

    return customConfig;
  },
};

Full config for reference is here.

[mszczepanczyk]

Storybook 6 + Webpack 5 with working HMR (#905)

// .storybook/main.js

module.exports = {
  ...
  webpackFinal: async (config) => ({
    ...config,
    optimization: {
      ...config.optimization,
      // https://github.com/vanilla-extract-css/vanilla-extract/issues/905
      splitChunks: false,
    },
    plugins: [...config.plugins, new VanillaExtractPlugin()],
  })
}

[airtonix]

doesn't work on storybook 7

edit: it does, but...

went with:

import type { StorybookConfig } from '@storybook/nextjs';
import { VanillaExtractPlugin } from '@vanilla-extract/webpack-plugin';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';

const config: StorybookConfig = {
  framework: {
    name: '@storybook/nextjs',
    options: {},
  },
  core: {
    builder: '@storybook/builder-webpack5',
  },
  stories: [
    '../../website/src/**/*.stories.@(js|jsx|ts|tsx|mdx)',
    '../../../pkg/ds/*/src/lib/**/*.stories.@(js|jsx|ts|tsx|mdx)',
  ],
  addons: ['@storybook/addon-essentials', '@nrwl/react/plugins/storybook'],
  webpackFinal: async (config) => {
    return {
      ...config,
      optimization: {
        ...config.optimization,
        // https://github.com/vanilla-extract-css/vanilla-extract/issues/905
        splitChunks: false,
      },
      plugins: [
        ...config.plugins,
        new VanillaExtractPlugin(),
        new MiniCssExtractPlugin(),
      ],
    };
  },
};

export default config;

using nxdev here.

[gabrieloureiro]

This Vite solutions doesn't work for me. Any update?

[domyen]

@gabrieloureiro check out this recipe from the Storybook team.

Since Storybook reads your vite config out of the box, try removing viteFinal

For Vite users, Storybook uses your project's vite.config.js for its build configuration. This means if your project uses Vanilla Extract, it's also already configured for your Storybook. 🎉

You can view a full example on Stackblitz.