[Bug]: output.inlineStyles: true doesn't seem to work in dev

[matteom-synth]

Version

System:
    OS: macOS 14.5
    CPU: (11) arm64 Apple M3 Pro
    Memory: 554.95 MB / 36.00 GB
    Shell: 3.7.1 - /opt/homebrew/bin/fish
  Browsers:
    Chrome: 126.0.6478.182
    Safari: 17.5
  npmPackages:
    @rsbuild/core: 1.0.1-beta.3 => 1.0.1-beta.3
    @rsbuild/plugin-react: 1.0.1-beta.3 => 1.0.1-beta.3

Details

I'm not sure if I have some wrong expectations, but output.inlineStyles: true doesn't seem to inline stylesheets into the resulting HTML in dev. Is it supposed to work only on production builds?

Reproduce link

https://github.com/matteom-synth/rsbuild-issue-repro-3

Reproduce Steps

1. Clone the repo.
2. Run pnpm install.
3. Run pnpm dev.
4. Check the HTML output. My expectation is that, given that output.inlineStyles is set to true, the stylesheet should be inlined into the HTML. But it doesn't seem to be the case:

[matteom-synth]

After a quick investigation, I guess it's because of this check, right?

rsbuild/packages/core/src/plugins/inlineChunk.ts

Line 11 in b46f3af

if (Object.keys(htmlPaths).length === 0 || isDev) {

Any reason why this is being disabled in dev? I guess it might be because it works better with HMR? Asking because sadly this is breaking our dev env (for a specific edge case) 🙃 because in our Webpack config by default styles are inlined in dev as well, and this is causing a differernt behaviour.
Any suggestion on how to inline CSS files in development?

[Thulof]

After a quick investigation, I guess it's because of this check, right?

rsbuild/packages/core/src/plugins/inlineChunk.ts

Line 11 in b46f3af

if (Object.keys(htmlPaths).length === 0 || isDev) {

Any reason why this is being disabled in dev? I guess it might be because it works better with HMR? Asking because sadly this is breaking our dev env (for a specific edge case) 🙃 because in our Webpack config by default styles are inlined in dev as well, and this is causing a differernt behaviour. Any suggestion on how to inline CSS files in development?

According to the docs, this option works only in production mode.

rsbuild/website/docs/en/config/output/inline-styles.mdx

Line 14 in b46f3af

Whether to inline output style files (.css files) into HTML with `<style>` tags in production mode.

[matteom-synth]

Crap I'm dumb as a rock. I didn't see that in the docs, sorry 🤦 I think the fact that Webpack defaults to them even in dev messed up with me. I'll try to find a way to make it work anyway. Thanks!

[chenjiahan]

We can add a new option to enable inline styles in the dev mode, do you need to use it?

[matteom-synth]

@chenjiahan thanks, it would be awesome but I'm sure you have other priorities :) so, no worries for now we'll deal with it in some other way.

[chenjiahan]

Get, thanks for the feedback

[Thulof]

Hi, I have created a pull request to solve this issue.

#3000