[Help Wanted] Config Vite compiler with PostCSS, Tailwind and custom alias

[RodrigoTomeES]

Hi!,

I am triying to make more efficient my storybook build, I first tried SWC but I only had a improvent in build time not in HMR, the creator of SWC for Storybook recommend me use vite instead so I am here!, First of all thanks for your hard work. I am trying to configurate Vite with PostCSS, Tailwind and custom alias.

My OLD configuration is this:

const path = require('path');
const aliasConfig = require('../tsconfig.json');
const pathsNext = aliasConfig.compilerOptions.paths || {};

function getPaths(paths) {
  const pathsSB = {};
  const keys = Object.keys(paths);

  keys.forEach(function (key) {
    const alias = key.replace('/*', '');
    const pathNext = `../${paths[key][0].replace('*', '')}`;

    pathsSB[alias] = path.resolve(__dirname, pathNext);
  });

  return pathsSB;
}

module.exports = {
  webpackFinal: async (config, { configType }) => {
    config.resolve.modules = [path.resolve(__dirname, '..'), 'node_modules'];
    config.resolve.alias = {
      ...config.resolve.alias,
      ...getPaths(pathsNext),
    };
    return config;
  },
  stories: [
    '../components/**/*.stories.mdx',
    '../components/**/*.stories.@(js|jsx|ts|tsx)',
    '../stories/**/*.stories.mdx',
    '../stories/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    {
      /**
       * Fix Storybook issue with PostCSS@8
       * @see https://github.com/storybookjs/storybook/issues/12668#issuecomment-773958085
       *
       * Fix Storybook issue with CSS Module and PostCSS
       * @see https://github.com/storybookjs/addon-postcss/issues/29
       */
      name: '@storybook/addon-postcss',
      options: {
        styleLoaderOptions: {},
        cssLoaderOptions: {
          modules: true,
          sourceMap: true,
          importLoaders: 1,
        },
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    },
  ],
  staticDirs: ['../public', '../assets', '../stories/assets'],
  framework: '@storybook/react',
  core: {
    builder: 'webpack5',
  },
};

I followed the examples and I add the storybook-builder-vite as builder, enabled storyStoreV7 and added viteFinal instead of webpackFinal.

const path = require('path');
const aliasConfig = require('../tsconfig.json');
const pathsNext = aliasConfig.compilerOptions.paths || {};

function getPaths(paths) {
  const pathsSB = {};
  const keys = Object.keys(paths);

  keys.forEach(function (key) {
    const alias = key.replace('/*', '');
    const pathNext = `../${paths[key][0].replace('*', '')}`;

    pathsSB[alias] = path.resolve(__dirname, pathNext);
  });

  return pathsSB;
}

module.exports = {
  stories: [
    '../components/**/*.stories.mdx',
    '../components/**/*.stories.@(js|jsx|ts|tsx)',
    '../stories/**/*.stories.mdx',
    '../stories/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    {
      /**
       * Fix Storybook issue with PostCSS@8
       * @see https://github.com/storybookjs/storybook/issues/12668#issuecomment-773958085
       *
       * Fix Storybook issue with CSS Module and PostCSS
       * @see https://github.com/storybookjs/addon-postcss/issues/29
       */
      name: '@storybook/addon-postcss',
      options: {
        styleLoaderOptions: {},
        cssLoaderOptions: {
          modules: true,
          sourceMap: true,
          importLoaders: 1,
        },
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    },
    'storybook-addon-swc',
  ],
  staticDirs: ['../public', '../assets', '../stories/assets'],
  framework: '@storybook/react',
  core: {
    builder: 'storybook-builder-vite',
  },
  features: {
    storyStoreV7: true,
  },
  async viteFinal(config, { configType }) {
    config.resolve.modules = [path.resolve(__dirname, '..'), 'node_modules'];
    config.resolve.alias = {
      ...config.resolve.alias,
      ...getPaths(pathsNext),
    };
    return config;
  },
};

But I am receiving this error in the stories:

And in the console it show this:

yarn run v1.22.17
$ start-storybook -p 6006
info @storybook/react v6.4.13
info 
info => Loading presets
info => Serving static files from ././public at /
info => Serving static files from ././assets at /
info => Serving static files from ././stories/assets at /
info => Loading custom manager config
info => Loading custom manager config

info => Using cached manager
╭────────────────────────────────────────────────────╮
│                                                    │
│   Storybook 6.4.13 for React started               │
│   2.53 s for preview                               │
│                                                    │
│    Local:            http://localhost:6006/        │
│    On your network:  http://192.168.1.157:6006/    │
│                                                    │
│   A new version (6.4.19) is available!             │
│                                                    │
│   Upgrade now: npx sb@latest upgrade               │
│                                                    │
│   Read full changelog: https://git.io/fhFYe        │
│                                                    │
╰────────────────────────────────────────────────────╯
16:52:56 [vite] Internal server error: Failed to resolve import "!style-loader!css-loader!postcss-loader!@styles/storybook.css" from ".storybook/preview.js". Does the file exist?
  Plugin: vite:import-analysis
  File: /Users/user/Sites/project/.storybook/preview.js
  7  |   * @see https://github.com/tailwindlabs/tailwindcss/issues/6314#issuecomment-1018747989
  8  |   */
  9  |  import '!style-loader!css-loader!postcss-loader!@styles/storybook.css';
     |          ^
  10 |  
  11 |  export const parameters = {
      at formatError (/Users/user/Sites/project/node_modules/vite/dist/node/chunks/dep-9c153816.js:38098:46)
      at TransformContext.error (/Users/user/Sites/project/node_modules/vite/dist/node/chunks/dep-9c153816.js:38094:19)
      at normalizeUrl (/Users/user/Sites/project/node_modules/vite/dist/node/chunks/dep-9c153816.js:69819:26)
      at async TransformContext.transform (/Users/user/Sites/project/node_modules/vite/dist/node/chunks/dep-9c153816.js:69959:57)
      at async Object.transform (/Users/user/Sites/project/node_modules/vite/dist/node/chunks/dep-9c153816.js:38334:30)
      at async doTransform (/Users/user/Sites/project/node_modules/vite/dist/node/chunks/dep-9c153816.js:53030:29)

I am importing my styles in preview.js

/**
 * Fix Storybook issue with Tailwind
 * Also is need to add stories directory to content in Tailwind config
 * @see https://github.com/tailwindlabs/tailwindcss/issues/6314#issuecomment-1018747989
 */
import '!style-loader!css-loader!postcss-loader!@styles/storybook.css';

System

Environment Info:

  System:
    OS: macOS 12.3
    CPU: (8) arm64 Apple M1 Pro
  Binaries:
    Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v17.3.1/bin/yarn
    npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
  Browsers:
    Chrome: 99.0.4844.83
    Firefox: 98.0.1
    Safari: 15.4
  npmPackages:
    @storybook/addon-actions: ^6.4.13 => 6.4.13 
    @storybook/addon-docs: ^6.4.13 => 6.4.18 
    @storybook/addon-essentials: ^6.4.13 => 6.4.13 
    @storybook/addon-links: ^6.4.13 => 6.4.13 
    @storybook/addon-postcss: ^2.0.0 => 2.0.0 
    @storybook/builder-webpack5: ^6.4.13 => 6.4.13 
    @storybook/manager-webpack5: ^6.4.13 => 6.4.13 
    @storybook/react: ^6.4.13 => 6.4.13 
    @mdx-js/preact: ^2.1.0 => 2.1.0
    storybook-builder-vite: ^0.1.21 => 0.1.21
    vite: ^2.8.6 => 2.8.6

Can anyone help me? Thanks!

[haleksandre]

Hi,

Try changing the following line In your preview.js

-   import '!style-loader!css-loader!postcss-loader!@styles/storybook.css';

+   import '@styles/storybook.css';

The reason for the error is that Vite doesn't understand Webpack's import loader syntax !style-loader!css-loader!postcss-loader!.

[RodrigoTomeES]

@haleksandre Hi, thanks! I also tried that before, but I had got this error. I don't understand why it says it finds the symbol "<" when it doesn't exist.

[theobscenezen]

It's pretty late, but i came across the same issue and got it working with simply importing import 'tailwindcss/tailwind.css'; instead of import '@styles/storybook.css';

I came across this in a DaisyUI-Example (tailwind-based component library).