Having trouble with Storybook integration

Hello! I am having trouble getting Windi working with my home-baked Vue 3 ui kit that has a storybook for local development and testing. I am using this vite plugin and my storybook main.js looks like this:

const { join, resolve } = require('path');
const WindiCSS = require('vite-plugin-windicss').default;

module.exports = {
  async viteFinal(config, { configType }) {
    config.resolve.alias = {
      ...config.resolve.alias,
      '@': resolve(__dirname, '../src'),
    };
    config.resolve.modules = [resolve(__dirname, '@', '../src'), 'node_modules'];
    config.plugins = config.plugins ?? [];
    config.plugins.push([
      WindiCSS({
        config: join(__dirname, '..', 'windi.config.ts'),
      }),
    ]);
    config.resolve.dedupe = ['@storybook/client-api'];

    // return the customized config
    return config;
  },
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  core: {
    builder: 'storybook-builder-vite',
  },
};

However, Windi does not appear to be scanning my Vue components. If I add the windi classes to the windi config whitelist, it will work. So I was hoping somebody could point me in the right direction for one of the two solutions.

1. Less ideal: Whitelist everything. Is there a regex pattern I could add to the windi.config.ts whitelist to just import everything. And then use purgecss to remove the unused styles when building for production?

2. Ideal: Get windi scanning my Vue components properly when serving storybook. Obviously this is what I actually want. But it’s been a terribly elusive problem, so I’d happily settle for the former. If it’s an easy patch-fix.

Thank you!

Edit: Spelling errors

[antfu]

Sorry I didn’t get time to look into your repro but glad you figure it out! I guess Storybook somehow should better set Vite’s root to project root instead of their own subfolder otherwise this might also cause other plugins to fail.

Meanwhile, our vite plugin provides an option to set the root explicitly:

     WindiCSS({
        root: dirname(__dirname)
      }),

and maybe then you can remove those workaround

[antfu]

Can you create a minimal reproduction so I might be able to have a closer look?