Does Bun support hot CSS reloading for CSS-in-JS

Hot CSS Reloading with CSS-in-JS

- Bun inserts `@supports` annotations into CSS that tag which files a stylesheet is composed of to enable hot reloading. Browsers ignore these annotations[1].

- When importing CSS in JavaScript-like loaders, Bun will transform the import statement and dispatch a custom event `onimportcss` with the CSS file URL. An event handler is automatically registered when HMR is enabled to insert the CSS file as a `` tag[1][4].

- This event handler can be turned off in a framework's `package.json` or by setting `globalThis["Bun_disableCSSImports"] = true;` in client-side code[1].

- Bun also exposes an API `Bun.getImportedStyles()` for SSR/SSG that returns a list of imported CSS files. This is useful for preventing flash of unstyled content[1][4].

Limitations and Workarounds

- As of Bun v0.1.5, the hot reloading functionality for CSS-in-JS was disabled due to bugs and lack of end-to-end test coverage. A workaround was to set the `BUN_FORCE_HMR=1` flag[2].

- In Bun v1.0, the `bun dev` command was changed to run the "dev" script in your `package.json`. This issue may no longer be applicable in the latest version[2].

- Some developers have used external tools like `watchman` to watch files and send a websocket message to reload the page when changes occur as a workaround for hot reloading[2].

In summary, Bun has built-in support for hot CSS reloading with CSS-in-JS frameworks, but there may be some limitations depending on the version. Workarounds are available to enable hot reloading if needed.