[Feature]: Support CSS and css-modules in `bundle: false`

[SoonIter]

Version

@rslib/core 0.0.5

Details

#140

1. import "./reset.css"; directly import css will generate a empty chunk reset.mjs by css-extract-rspack-plugin

./dist
└── esm
    ├── CounterButton.d.mts
    ├── CounterButton.mjs
    ├── env.d.mjs
    ├── reset.mjs
    └── static/css
        └── reset.css

// reset.mjs
// CONCATENATED MODULE: ./src/reset.css
// extracted by css-extract-rspack-plugin

2. import styles from './index.module.css';

./dist
└── esm
    ├── CounterButton.d.mts
    ├── CounterButton.mjs
    ├── CounterButtonStyle.module.mjs
    └── static/css
        └── CounterButtonStyle.module.css

// CounterButtonStyle.module.mjs
// extracted by css-extract-rspack-plugin
/* harmony default export */ const index_module = {
    textRed: "textRed-IhMFNY"
};
export { index_module as default };

expected behavior

./dist
└── esm
    ├── CounterButton.d.mts
    ├── CounterButton.mjs
    ├── CounterButtonStyle.module.mjs
    └── static/css
-      └── CounterButtonStyle.module.css
+      └── CounterButtonStyle_module.css

// CounterButtonStyle.module.mjs
+ import '../static/css/CounterButtonStyle_module.css'
// extracted by css-extract-rspack-plugin
/* harmony default export */ const index_module = {
    textRed: "textRed-IhMFNY"
};
export { index_module as default };

Reproduce link

in the draft pr

Reproduce Steps

in the draft pr examples/react-component-bundle-false

[fi3ework]

Some additional information:

1. Do we need to continue using css-extract-rspack-plugin in Rslib which is used in Rsbuild now? Since the CSS is relative simpler in library building. Keep using css-extract-rspack-plugin to align better with Rsbuild while use experiments.css is more future oriented.

2. I used to tested that https://www.npmjs.com/package/webpack-remove-empty-scripts could remove the empty chunk with webpack and minicss-extract-plugin. Maybe we need to port the logic to css-extract-rspack-plugin.

[SoonIter]

@fi3ework

experiments.css

experiments.css is currently difficult to adjust, because it needs to be aligned with webpack and our feature needs to be able to adjust flexibly for now, so we consider the css-extract-rspack-plugin first and may port it to experiments.css in the future

1. Do we need to continue using css-extract-rspack-plugin in Rslib which is used in Rsbuild now?

Yes,

I hope to reuse the CSS Modules capability of css-loader, as this can remain as consistent as possible with the build config in the web app. To use the return values of css-loader, css-extract-plugin is the only choice I think.

But at present, css-extract-rspack-plugin can't meet our needs. we still need some patches

e.g:

1. rename the css module file with this.emitFile in loader

./dist
└── esm
    ├── CounterButton.d.mts
    ├── CounterButton.mjs
    ├── CounterButtonStyle.module.mjs
    └── static/css
-      └── CounterButtonStyle.module.css
+      └── CounterButtonStyle_module.css

2. add import

// CounterButtonStyle.module.mjs
+ import '../static/css/CounterButtonStyle_module.css'
// extracted by css-extract-rspack-plugin
/* harmony default export */ const index_module = {
    textRed: "textRed-IhMFNY"
};
export { index_module as default };

there are two ways

1. write a new and simple lib-css-extract-loader (without hmr or css runtime, ...etc of css-extract)

just emit assets with this.emitFile loader api

• benefits: simple
• drawbacks: need to replace CssExtractPlugin.loader with lib-css-extract-loader and remove CssExtractPlugin in Rsbuild

2. do some changes to current CssExtractPlugin in https://github.com/web-infra-dev/rspack/blob/8f9db27586ebde35908fc0d1f57742b443fa0bb8/packages/rspack/src/builtin-plugin/css-extract/loader.ts#L295

• benefits: reuse tools.cssExtract
• drawbacks: add some options to cssExtract

I used to tested that npmjs.com/package/webpack-remove-empty-scripts could remove the empty chunk with webpack and minicss-extract-plugin. Maybe we need to port the logic to css-extract-rspack-plugin

in the web app and bundle mode, the empty chunk can be deleted by treeshaking and minifier, 😂our case is quite special.

[fi3ework]

3. add import

// CounterButtonStyle.module.mjs
+ import '../static/css/CounterButtonStyle_module.css'
// extracted by css-extract-rspack-plugin
/* harmony default export */ const index_module = {
    textRed: "textRed-IhMFNY"
};
export { index_module as default };

Is this code snippet for bundleless mode?