Storybook issue

hello, is virtual:windi.css generated somewhere ? i wish to use storybook and if i read the doc correctly i need to import windicss as a global css stylesheet in .storybook/preview.js but it can’t find the file

16:21:49 [vite] Internal server error: Failed to resolve import "virtual:windi.css" from ".storybook\preview.js". Does the file exist?
  Plugin: vite:import-analysis
  File: C:/Users/UserName/Desktop/projects/javascript/test-storybook/.storybook/preview.js
  1  |  import 'virtual:windi.css';
     |          ^
  2  |  
  3  |  export const parameters = {
      at formatError (C:\Users\UserName\Desktop\projects\javascript\test-storybook\node_modules\vite\dist\node\chunks\dep-5c642f9e.js:43549:46)
      at TransformContext.error (C:\Users\UserName\Desktop\projects\javascript\test-storybook\node_modules\vite\dist\node\chunks\dep-5c642f9e.js:43545:19)
      at normalizeUrl (C:\Users\UserName\Desktop\projects\javascript\test-storybook\node_modules\vite\dist\node\chunks\dep-5c642f9e.js:45157:26)
      at async TransformContext.transform (C:\Users\UserName\Desktop\projects\javascript\test-storybook\node_modules\vite\dist\node\chunks\dep-5c642f9e.js:45285:57)
      at async Object.transform (C:\Users\UserName\Desktop\projects\javascript\test-storybook\node_modules\vite\dist\node\chunks\dep-5c642f9e.js:43747:30)
      at async transformRequest (C:\Users\UserName\Desktop\projects\javascript\test-storybook\node_modules\vite\dist\node\chunks\dep-5c642f9e.js:59401:29)
      at async C:\Users\UserName\Desktop\projects\javascript\test-storybook\node_modules\vite\dist\node\chunks\dep-5c642f9e.js:59538:32

[CanRau]

Got it working with storybook-builder-vite

// .storybook/main.js
const path = require("path");
const WindiCSS = require("vite-plugin-windicss").default;

module.exports = {
  stories: [
    "../components/**/*.stories.mdx",
    "../components/**/*.stories.@(js|jsx|ts|tsx)",
  ],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
  core: {
    builder: "storybook-builder-vite",
  },
  async viteFinal(config, { configType }) {
    config.plugins = config.plugins ?? [];
    config.plugins.push(
      WindiCSS({
        config: path.join(__dirname, "..", "windi.config.ts"), // that was my missing piece
      })
    );
    return config;
  },
};

and just for reference

import "virtual:windi.css";

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

[jbrnsk]

No problem @harlan-zw! Shortly-after I shared my workaround, antfu (I’ve @-ed him enough on this one) provided the actual best solution to my issue.

Windi allows you to specify the root directory. And then you don’t need my workaround in the windi.config. All it takes is one extra line to what @CanRau shared:

    config.plugins.push(
      WindiCSS({
        config: join(__dirname, '..', 'windi.config.ts'),
        root: dirname(__dirname),
      })
    );