How can I use css modules in the src?

[xypnox]

Describe the bug

I want to make a library of a preset components with styles. However, adding a styles.module.css and importing it doesn't seem to work.

Ref:

https://github.com/xypnox/xip-solidjs-test https://github.com/xypnox/xip-solidjs-test/tree/main/src/buttons

Minimal Reproduction Link

https://stackblitz.com/~/github.com/xypnox/xip-solidjs-test

[thetarnav]

Does esbuild support css modules ootb? Maybe you need to use something like this: https://www.npmjs.com/package/esbuild-css-modules-plugin

[thetarnav]

Ok it actually does https://esbuild.github.io/content-types/#css-from-js

[xypnox]

Looking at the esbuild's docs I couldn't find a clear config or the reason why css module files are not being detected correctly.

Are there any suggestions where I should look for this?

I tried using postcss as described in tsup to support css. Ref: https://github.com/xypnox/xip-solidjs-test/tree/use-postcss

The css files gets generated in the dist but the user of the library has to import the css files from node modules/package specifically. Ideally it should be auto-imported depending on whether the component was used or not.

Moreover the postcss plugin is also affecting the css in dev.

[thetarnav]

The css files gets generated in the dist but the user of the library has to import the css files from node modules/package specifically. Ideally it should be auto-imported depending on whether the component was used or not.

this is expected tsup/esbuild can only bundle and copy the imported css to dist it won’t do any magic for the user