[Bug]: HMR is broken for bundled CSS in Storybook v8 with Vite

[Th3S4mur41]

Describe the bug

After upgrading to v8, HMR is no longer working for imported bundled CSS

Storybook needs to be restarted in order to see the changes

To Reproduce

https://stackblitz.com/edit/storybook-issue-26881

Note

index.css is being compiled in a separate process with a watcher.

preview.ts

import type { Preview } from '@storybook/web-components';

import '/dist/index.css';

const preview: Preview = {
	parameters: {}
};

export default preview;

System

Storybook Environment Info:

  System:
    OS: Windows 11 10.0.22631
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
  Binaries:
    Node: 20.10.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.5.1 - C:\src\@eviden-parallel\core\node_modules\.bin\npm.CMD <----- active
  Browsers:
    Edge: Chromium (123.0.2420.81)
  npmPackages:
    @storybook/addon-a11y: ^8.0.5 => 8.0.6
    @storybook/addon-designs: ^8.0.0 => 8.0.0
    @storybook/addon-docs: ^8.0.5 => 8.0.6
    @storybook/addon-essentials: ^8.0.5 => 8.0.6
    @storybook/addon-links: ^8.0.5 => 8.0.6
    @storybook/addon-mdx-gfm: ^8.0.5 => 8.0.6
    @storybook/blocks: ^8.0.5 => 8.0.6
    @storybook/theming: ^8.0.5 => 8.0.6
    @storybook/web-components: ^8.0.5 => 8.0.6
    @storybook/web-components-vite: ^8.0.5 => 8.0.6
    storybook: ^8.0.5 => 8.0.6

Additional context

No response

[shilman]

Probable dupe of #26881

[Th3S4mur41]

@shilman if reloading is sufficient to get the latest update is sufficient to workaround the issue in #26881, then this is not a duplicate...

In this case here, the only way to get the latest CSS is to restart the server.
Reloading (even force reload), is not sufficient.

[shilman]

@Th3S4mur41 my bad, thanks for clarifying! Re-opening

[shilman]

Fyi @valentinpalkovic - possibly related to your other issues but not a duplicate

[valentinpalkovic]

After debugging and trying a few things, Vite seems to ignore files in dist folders (at least they are not watched) and, therefore, does not trigger an HMR event. If you rename dist to something else, HMR and watching the file works :)

I don't know whether we can do anything about this. Therefore, I would close this issue.

[Th3S4mur41]

I've tried to fix it using a bunch of of wayt to configure the watcher setting of the vite config like e.g.

// vite.config.mjs
import { defineConfig } from 'vite';

export default defineConfig({
build: {
    watch: {
			exclude: ['node_modules'],
      include: ['src/**', 'dist/**']
    }
  }
});

Unfortunately, that didn't work. This is probably related to vitejs/vite#8619

Changing the output of my postcss to the build folder and loading the CSS in preview.ts from there as suggested by @valentinpalkovic required some changes in the various build and release scripts, but did solve the issue.
So thanks for the workaround 👍