search

solidjs-community / solid-lib-starter

SolidJS library starter template. Use it to create your own solid package.
MIT License
99 stars 9 forks source link

How can I use css modules in the src? #6

Open xypnox opened 8 months ago

xypnox commented 8 months ago

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 commented 8 months ago

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

thetarnav commented 8 months ago

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

xypnox commented 8 months ago

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 commented 7 months ago

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