Can I use Bun's hot CSS reloading with React

Hot CSS Reloading with React

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

- 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.

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

- 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.

Limitations

- 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.

- 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.

- 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.

In summary, Bun has built-in support for hot CSS reloading with React, but there may be some limitations depending on the version. Workarounds are available to enable hot reloading if needed. The functionality is still maturing and may improve in future versions of Bun.