Built SB has odd selectors that is being applied

[tounsoo]

Hey team, I noticed some discrepancies between the dev mode vs built files.

For example, & li+li appears on a built files which has higher priorities than the css I have for my components. (I am using CSS at-layers rule for my components)

Screenshot of built

Build

https://tounsoo.github.io/margin-ds/?path=/story/component-listbox--default

SB team response

On further inspection it looks like it might be an issue with storybook-rsbuild. At least if you check out the build output from React+Vite and React+Webpack examples, you'll see the <style> tag will contain this:

but in your example it's minified+compiled, which produces the wrong selector.
It could also be a webpack-plugin in your setup that compiles the styles wrong, not supporting the CSS nesting syntax with &.
If you could create a minimal reproduction and open a bug report that would be great 👍

[fi3ework]

Could you provide a minimal reproduction. I tried to visit https://github.com/tounsoo/margin-ds, but it seems to be a private repository at the moment.

[fi3ework]

Confirmed. The code on the left side is the source code, the selector is nested in sb-errordisplay, whereas in the right output, no parent selector anymore.

[fi3ework]

The root cause is terser/html-minifier-terser#177.

As for this won't happen in Vite or webpack5 builder, is because html-minify options here will be merged with Rsbuild's default options(https://github.com/rspack-contrib/rsbuild-plugin-html-minifier-terser/blob/38897bccc4330f9191e5d7c9ea54f8e7f5f76015/src/index.ts#L56-L68), which enabled minifyCSS and triggered the issue above.

To resolve the problem, we should simply align with webpack builder's config (https://github.com/storybookjs/storybook/blob/bbfdf5897e399f65368ca2ed14930b912e466a25/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts#L184-L189) strictly, stop from merging with the default options in rsbuild-plugin-html-minifier-terser.

[tounsoo]

Just updated to the 0.0.11 and confirmed it fixed this issue! Thank you so much for quick response and release 🙏