Can we emitCss: true for CSS Modules - but not import the css?

[58bits]

It only took a few minutes for our to configure our React component library with rslib. This and rsbuild are really great projects.

With regards to CSS Module support - it all just 'worked' - even in a bundleless mode of Rslib after we set emitCss: true - which is awesome.

One question we have - is whether we could omit the final css import?

In other words...

button.tsx -> button.js

  'use client'
  import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
  import * as __WEBPACK_EXTERNAL_MODULE__button_module_js_521bc953__ from "./button.module.js";
  const Button = ({ variant = 'filled', size = 'md', type = 'button', intent = 'primary', fullWidth = false, ripple = true, className, children, 
  ...

button.module.js

- import "./button_module.css";
const button_module_rslib_entry_ = {
    button: "button-TEi52w",
    xs: "xs-MPC0q6",
    sm: "sm-YpBybC",
    md: "md-rYHbET",
    lg: "lg-hPRmmP",
    ...
};
export { button_module_rslib_entry_ as default };

button_module.css

  .button-TEi52w {
    cursor: pointer;
    text-align: center;
    gap: var(--gap-2);
    white-space: nowrap;
  ...

Could we remove the import "./button_module.css"; from button.module.js?

We'd still get our processed / obfuscated CSS output as above, but would use a separate build step to gather up all of the className obfuscated .module.css files and combine them into a single source styles.css file.

Thoughts?

[Timeless0911]

Hi, we do not have such a configuration. In order to ensure the correctness of the output, such a reference relationship of import "./button_module.css"; must be added, see

rslib/packages/core/src/css/libCssExtractLoader.ts

Line 276 in 8a33902

importCssFiles += `import "./${cssFilename}"`;

I suggest you do some deletion in the final output yourself, or use the bundle mode to bundle all styles into one file.

[58bits]

Hi @Timeless0911 - thanks for the reply. Understood.