doc

website/docs/en/config/module.mdx

@@ -511,6 +511,47 @@ Avoid generating and loading a stylesheet and only embed exports from css into o
 
 Customize the format of the local class names generated for css modules, besides the substitutions at [File-level](/config/output#file-context) and [Module-level](/config/output#module-context), also include `[uniqueName]` and `[local]`.
 
+#### module.generator["css/auto"].esModule
+
+<ApiMeta addedVersion="0.6.4" />
+
+- **Type:** `boolean`
+- **Default:** `true`
+
+Whether to add `__esModule` to the exports of CSS; if added, it will be treated as an ES Module during esm-cjs interop, otherwise, it will be treated as a CommonJS Module.
+
+For example, when using the cjs output from a third-party component library, it is sometimes necessary to add this configuration to ensure correct esm-cjs interop, to obtain the correct exports (this can be used in conjunction with [Rule.test](#ruletest) and other matching conditions to add it only for that particular component library).
+
+The original source code of the third-party component library:
+
+```js
+import style from './style.css';
+export function Button() {
+  return <button className={style.btn}></button>;
+}
+```
+
+The cjs format output published by the third-party component library:
+
+```js
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+exports.Button = Button;
+var _style = _interopRequireDefault(require('./style.css'));
+var _jsxRuntime = require('react/jsx-runtime');
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
+function Button() {
+  return /*#__PURE__*/ (0, _jsxRuntime.jsx)('button', {
+    className: _style['default'].btn, // <-- Note: After passing through _interopRequireDefault, this need to access default here.
+  });
+}
+```
+
 ### module.generator.css
 
 Generator options for `css` modules.
@@ -531,6 +572,12 @@ Same as [`module.generator["css/auto"].exportsConvention`](#modulegeneratorcssau
 
 Same as [`module.generator["css/auto"].exportsOnly`](#modulegeneratorcssautoexportsonly).
 
+#### module.generator.css.esModule
+
+<ApiMeta addedVersion="0.6.4" />
+
+Same as [`module.generator["css/auto"].esModule`](#modulegeneratorcssautoesmodule).
+
 ### module.generator["css/module"]
 
 Generator options for `css/module` modules.
@@ -557,6 +604,12 @@ Same as [`module.generator["css/auto"].exportsOnly`](#modulegeneratorcssautoexpo
 
 Same as [`module.generator["css/auto"].localIdentName`](#modulegeneratorcssautolocalidentname).
 
+#### module.generator["css/module"].esModule
+
+<ApiMeta addedVersion="0.6.4" />
+
+Same as [`module.generator["css/auto"].esModule`](#modulegeneratorcssautoesmodule).
+
 ## module.rules
 
 - **Type:** `Rule[]`

website/docs/zh/config/module.mdx

@@ -511,6 +511,47 @@ module.exports = {
 
 自定义生成的 CSS modules 的局部类名格式，除了在[文件级别](/config/output#file-context)和[模块级别](/config/output#module-context)的替换之外，还包括 `[uniqueName]` 和 `[local]`。
 
+#### module.generator["css/auto"].esModule
+
+<ApiMeta addedVersion="0.6.4" />
+
+- **类型：** `boolean`
+- **默认值：** `true`
+
+是否为 CSS 的导出添加 `__esModule`，如果添加则会在 esm-cjs interop 时当作 ES Module，否则当作 CommonJS Module。
+
+比如在使用第三方组件库的 cjs 产物时，有时需要添加该配置确保 esm-cjs interop 正确，以拿到正确的导出（可配合 [Rule.test](#ruletest) 等匹配条件只为该组件库添加）。
+
+组件库源码：
+
+```js
+import style from './style.css';
+export function Button() {
+  return <button className={style.btn}></button>;
+}
+```
+
+组件库发布的 cjs 产物：
+
+```js
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+exports.Button = Button;
+var _style = _interopRequireDefault(require('./style.css'));
+var _jsxRuntime = require('react/jsx-runtime');
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
+function Button() {
+  return /*#__PURE__*/ (0, _jsxRuntime.jsx)('button', {
+    className: _style['default'].btn, // <-- 注意：这里经过 _interopRequireDefault 后需要访问 default
+  });
+}
+```
+
 ### module.generator.css
 
 `css` 模块的生成器选项。
@@ -531,6 +572,12 @@ module.exports = {
 
 和 [`module.generator["css/auto"].exportsOnly`](#modulegeneratorcssautoexportsonly) 一样。
 
+#### module.generator.css.esModule
+
+<ApiMeta addedVersion="0.6.4" />
+
+和 [`module.generator["css/auto"].esModule`](#modulegeneratorcssautoesmodule) 一样。
+
 ### module.generator["css/module"]
 
 `css/module` 模块的生成器选项。
@@ -557,6 +604,12 @@ module.exports = {
 
 和 [`module.generator["css/auto"].localIdentName`](#modulegeneratorcssautolocalidentname) 一样。
 
+#### module.generator["css/module"].esModule
+
+<ApiMeta addedVersion="0.6.4" />
+
+和 [`module.generator["css/auto"].esModule`](#modulegeneratorcssautoesmodule) 一样。
+
 ## module.rules
 
 - **类型：** `Rule[]`

website/project-words.txt

@@ -125,5 +125,6 @@ modulegeneratorassetdataurlmimetype
 modulegeneratorcssautoexportsconvention
 modulegeneratorcssautoexportsonly
 modulegeneratorcssautolocalidentname
+modulegeneratorcssautoesmodule
 cssextractrspackplugin
 mysecretkey