CSS imported assets are bundled twice

[Atmos4]

When importing assets in CSS, it gets bundled twice (once by Storybook and once by rsbuild) resulting in broken URLs.

Example repo: https://github.com/Atmos4/rsbuild-storybook-demo/tree/wrong-asset-import
Branch: wrong-asset-import

Example CSS:

.asset-in-css::after {
  content: url("./assets/context.png");
  width: 10px;
  height: 10px;
}

Resulting in the following URL: /static/css/async/static/image/static/media/src/stories/assets/context.png.
The correct URL (that resolves to something) is: /static/image/static/media/src/stories/assets/context.png

Expected behavior:

Storybook should ignore those assets. Maybe there is a configuration option I can tweak to make storybook ignore these CSS assets, I am not sure.

[Atmos4]

I managed to find similar issues related to custom webpack configurations: https://stackoverflow.com/questions/66410246/how-can-i-use-static-assets-on-scss-with-storybook

It seems like if static assets are in a nested directory, Storybook cannot resolve them properly. Therefore my temporary solution is to change the rsbuildFinal to this:

const config: StorybookConfig = {
	rsbuildFinal: config => {
		config.output ||= {};
		config.output.distPath = {
			root: "/",
			image: "/",
			font: "/",
			css: "/",
			cssAsync: "/",
			svg: "/",
		};
		return config;
	},
};

It works, but it's not pretty. I wonder if there is a better fix 🤔

[fi3ework]

Thank you for the detailed issue report. I checked the repository and was able to reproduce the problem. How did you determine that this issue is caused by Storybook being bundled twice? Could you provide some clues for troubleshooting?

[Atmos4]

Now I am not really sure that is the case anymore

The reason why I was thinking that is because the URL clearly looks to be formed like this:
storybook static asset path + rsbuild bundled asset

But it might just be that storybook just can't resolve assets with nested paths and defaults to putting it in its default asset directory 🤔 I am not really sure