How do I use CSS Modules in cargo-leptos as enabled by LightningCSS?

[saikatdas0790]

I see that cargo-leptos has in-built support for Lightning CSS. How would I use the CSS Modules feature from LightningCSS in a Leptos component?

I have a folder structure like this:

CSS that looks like this:

And a component that looks like this:

How do I get the Leptos component to use the styles from the CSS module?

[gbj]

Aren't CSS modules kind of a JavaScript concept? Per the LightningCSS docs:

This returns an exports object in addition to the compiled code and source map. Each property in the exports object maps from the original name in the source CSS to the compiled (i.e. hashed) name. You can use this mapping in your JavaScript or template files to reference the compiled classes and identifiers.
Depending on what exactly the output looks like I guess maybe there would be some way to include_bytes! and parse this output as JSON or whatever, and then use the appropriate class names, but I'm not sure how exactly this would work. There's no built-in support for this in cargo-leptos, which uses lightningcss essentially as a CSS minifier.

If you're just looking for some kind of scoped CSS support in general you could look at something like stylers

[saikatdas0790]

I looked into stylers and tried to make it work but was unable to. It also looks like there are some open issues around things not working and at this stage I feel like I would just struggle more to make things work.

Is there a simple way to add per-component CSS in a CSS file (for the native autocomplete in VSCode) in Leptos without any additional dependencies?

[tqwewe]

It also looks like there are some open issues around things not working and at this stage I feel like I would just struggle more to make things work.

Is there a specific issue you're having with it?

Is there a simple way to add per-component CSS in a CSS file (for the native autocomplete in VSCode) in Leptos without any additional dependencies?

"without any dependencies" no, but stylers is essentially what you're looking for. You can write your CSS in separate css files and include them with the style_sheet! macro.

[saikatdas0790]

I created a minimal reproduction here.

https://github.com/saikatdas0790/bug-report-cargo-leptos-stylers-setup

Steps I took:

• Started a new cargo-leptos project with the axum backend
• Followed the steps here add the dependencies and add the build.rs file. I also change the output in the build.rs to be ./style/main.css as that is the value in style-file = "style/main.css" in Cargo.toml
• The import in the build.rs is invalid. It makes the compiler unhappy.

[tqwewe]

Looks like you should use version 1.0.0-alpha of stylers instead of *

[saikatdas0790]

I was able to make Stylers work. Thank you.

However, the experience seems super annoying.

• I need to restart the cargo-leptos watch every time I make changes to the stylesheet. This is regardless of if it's cargo-leptos watch with or without --hot-reload. I then have to subsequently refresh my page in the browser before the CSS changes show up
• The style_sheet! macro doesn't accept relative paths but instead is relative to the root of the project. This means I can't just do ./component.css alongside the Leptos component and colocate scoped styles beside the component. Doing it the way stylers does it would defeat the purpose of having reusable isolated components.

Here's the repo that I'm currently on trying to make this work. It has a working stylers setup thanks to your help from above 🙂