Is it possible to build a react component with css.module ?

[h2ck4u]

hello. I'm creating a react library using tsup in a turborepo environment.

I checked that the bundle result contains the classname of the cssModule as an object.

// src/atom/input/input.module.css
var input_default = {
  warn: "input_warn",
  invalid: "input_invalid",
  disabled: "input_disabled",
  md: "input_md",
  sm: "input_sm",
  lg: "input_lg",
};

I deployed the bundled library as an npm package and imported it in MyApp to use it.

import MyInput from '@myreact-lib/input''

const com = () => {
  return <MyInput size="lg"/>
}

//render result
<input className="input_lg"> </input>

When I checked the rendered component, the style was not applied.

This is because the stylesheet included in input.module.css was not included in the bundle.

Is there a way to include styles when deploying a React component library using TSUP? Please help me.

// this is my tsup.config.js
export default defineConfig({
  dts: true,
  sourcemap: false,
  clean: true,
  treeshake: true,
  skipNodeModulesBundle: false,
  format: ['esm', 'cjs'],
  external: ['react', 'react-dom'],
  loader: {
    '.css': 'default'
  },
  tsconfig: './tsconfig.json',
});

Upvote & Fund

• We're using Polar.sh so you can upvote and help fund this issue.
• We receive the funding once the issue is completed & confirmed by you.
• Thank you in advance for helping prioritize & fund our backlog.

[h2ck4u]

i solved with tsup.config.js

i change loader 'css': 'default' > 'css: 'copy',

  loader: {
    '.css': 'default'
  },

[mayank1513]

You can also check out this repo - https://github.com/react18-tools/turborepo-template/

[gopal-virtual]

while @h2ck4u's solution works, but it

• doesn't minify the css
• doesn't puts the css inside a subfolder if needed.

on the other hand local-css option does solve the above two problem, but not automatically imported inside the js file, so I've to manually import it in consumer app.

[mayank1513]

I have built a plugin for this - https://github.com/react18-tools/esbuild-plugin-react18-css/

Example - https://github.com/react18-tools/turborepo-template/

[gopal-virtual]

@mayank1513, appreciate your effort. But your library still has the last problem I mentioned (i.e. manual import for css is needed). I am looking for css injection in JS.

[mayank1513]

@mayank1513, appreciate your effort. But your library still has the last problem I mentioned (i.e. manual import for css is needed). I am looking for css injection in JS.

Noted! Please create a feature request. I think this is very much doable and in the next version we could try to have this feature as well.