Skip to content

Manganis CSS Modules Support#3578

Merged
jkelleyrtp merged 21 commits intoDioxusLabs:mainfrom
DogeDark:manganis-styles-macro
Apr 15, 2025
Merged

Manganis CSS Modules Support#3578
jkelleyrtp merged 21 commits intoDioxusLabs:mainfrom
DogeDark:manganis-styles-macro

Conversation

@DogeDark
Copy link
Contributor

@DogeDark DogeDark commented Jan 16, 2025

Adds a css_module!() macro that generates a struct for type-safe, globally unique, classes and ids. This reuses the asset macro with a new AssetOption variant for CSS modules.

css_module!(Styles = "/mycss.module.css");
// css_module!(pub Styles = "/mycss.module.css");
// css_module!(pub Styles = "/mycss.module.css", CssModuleAssetOptions::new().minify(false));

#[component]
fn App() -> Element {
    rsx! {
        div {
            id: Styles::header,
            class: Styles::hello_class,
            p { "This div's id is {Styles::goodbye}" }
            p { "This div's class is {Styles::hello_class}" }
        }
    }
}
/* mycss.module.css */

#hello { ... }

.hello { ... }

#header { ... }

The macro's docs explain more about how it works & features w/examples.

Breaking

This is breaking as it alters the asset options enum creating a version requirement in the CLI.

@DogeDark DogeDark added enhancement New feature or request cli Related to the dioxus-cli program manganis Related to the manganis crate labels Jan 16, 2025
@DogeDark DogeDark added this to the 0.7.0 milestone Jan 16, 2025
@DogeDark
Copy link
Contributor Author

This is still more or less an experiment, but I created this PR to track it, as I believe it could be viable for 0.7 if desired.

@DogeDark DogeDark added the experimental May or may not be merged label Jan 31, 2025
@DogeDark DogeDark marked this pull request as ready for review March 8, 2025 00:12
@DogeDark DogeDark requested a review from a team as a code owner March 8, 2025 00:12
@DogeDark DogeDark added breaking This is a breaking change and removed experimental May or may not be merged labels Mar 8, 2025
@jkelleyrtp
Copy link
Member

Is it possible to support a syntax for declaring modules that uses a static or a struct as the source item?

static MyModule: CSSModule = css_module!("/blah.css");

or

#[derive(CssModule(file = "/blah.css")]
struct MyModule;

I know this might be challenging to achieve but it would be more "idiomatic" rust and likely more discoverable. We'd really want to provide good intellisense and I think providing inline items like this help with rust analyzer. That, and it's usually more transparent to the users of the macro what exactly is being generated.

I'll see if I can tinker with getting #1 working but using #2 might be an easier migration for this PR.

@DogeDark
Copy link
Contributor Author

@jkelleyrtp I wouldn't know where to begin for 1. but 2. is likely something I can do.

@DogeDark DogeDark mentioned this pull request Mar 10, 2025
@jkelleyrtp
Copy link
Member

jkelleyrtp commented Mar 10, 2025

We could try something with extension traits to get #1 working. This would have the benefit that DCE should knock out unused class names, though is slightly worse since you can't really import the module.

struct CssModule {}

static MY_MODULE: CssModule = css_module!("");

// generated by the macro
trait LocalExt {
    fn id(&self) -> &'static str {
        "mymodule"
    }
}

impl LocalExt for CssModule {}

fn it_works() {
    MY_MODULE.id();
}

still brainstorming...

If we end up use the struct Module; route then the impl wouldn't necessarily need to modify the struct itself, just attach helper methods

struct MyCssModule;

impl MyCssModule {
    fn name(&self) -> &'static str {
        "Hello, world!"
    }
}

fn it_works() {
    let p = MyCssModule.name();
}

@DogeDark DogeDark marked this pull request as draft March 11, 2025 03:35
@DogeDark DogeDark marked this pull request as ready for review March 12, 2025 04:25
@jkelleyrtp jkelleyrtp merged commit e96550c into DioxusLabs:main Apr 15, 2025
16 of 17 checks passed
@DogeDark DogeDark deleted the manganis-styles-macro branch April 17, 2025 00:15
AnteDeliria pushed a commit to AnteDeliria/dioxus that referenced this pull request Jun 2, 2025
* feat: type safe css selectors

* feat: css modules support

---------

Co-authored-by: Jonathan Kelley <[email protected]>
AnteDeliria pushed a commit to AnteDeliria/dioxus that referenced this pull request Jul 23, 2025
* feat: type safe css selectors

* feat: css modules support

---------

Co-authored-by: Jonathan Kelley <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

breaking This is a breaking change cli Related to the dioxus-cli program enhancement New feature or request manganis Related to the manganis crate

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants