Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

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

Answered by Timeless0911
58bits asked this question in Q&A
Discussion options

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?

You must be logged in to vote

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

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.

Replies: 1 comment 1 reply

Comment options

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

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.

You must be logged in to vote
1 reply
Comment options

Hi @Timeless0911 - thanks for the reply. Understood.

Answer selected by 58bits
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Q&A
Labels
None yet

AltStyle によって変換されたページ (->オリジナル) /