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

[simonihmig]

I was running into this, just with plain CSS. And I don't think this is what we should expect.

According to esbuild docs...

The bundled JavaScript generated by esbuild will not automatically import the generated CSS into your HTML page for you. Instead, you should import the generated CSS into your HTML page yourself along with the generated JavaScript.

I think this makes sense for apps (when the build system does not handle the html file itself), but it doesn't for libraries. They don't have control over the index.html, and I don't see a point libs having to tell their users that they have to explicitly import the lib's CSS. The only thing they would have to do is ship the CSS in the package (e.g. dist), but also keep the CSS import in place. We know that these libs are being consumed by solid apps built with vite, and vite will handle CSS imports just fine ootb.

When I build a lib with CSS imports using this starter kit, it will copy the CSS files to dist, but effectively strip out any CSS imports from the JS. When I add those CSS imports back by hand (to the dist files) and consume the lib in a solid app, the CSS is applied perfectly fine.

I am co-maintaining a similar blueprint for Ember.js addons, and we have a (rollup-based) build plugin exactly for this use case, that will keep static assets in the build output, but also preserve any imports to it, so the consuming app can process them.

Also, forcing users to import the lib's CSS somewhere in their app (entrypoint) is likely to prevent build optimizations like code splitting for CSS, which works nicely when every component just imports the CSS it needs for itself.

Correct me if I'm wrong, but it doesn't seem like tsup/esbuild allows you to easily customize this as needed. For now I'll probably have to go back and set up a rollup based build chain that allows more control over the process. A bit unfortunate, as using the starter kit I was hoping to not have to reinvent the wheel...