Problem

If I have a CSS module like so:

.sidebar { 
    background: red;
    padding: 20px;
}
.sidebarButton {
    background: blue;
}

then the Classes::sidebar_button class doesn't actually work. The reason is that because it has the same sidebar prefix as an already mangled class, it mangles the prefix on accident instead of the entire class.

.sidebarfb811ee670c8c644 {
    background: red;
    padding: 20px
}

.sidebarfb811ee670c8c644Button {
    background: #00f
}

in the DOM it's correct, but due to the mismatch can't find the class:

<div class="sidebarfb811ee670c8c644">
    <button class="sidebarButtonfb811ee670c8c644">Hi</button>
</div>

Steps To Reproduce

Steps to reproduce the behavior:

css_module!(Classes = "/assets/sidebar.css");

#[component]
pub fn Sidebar() -> Element {
    rsx! {
        div { class: "{Classes::sidebar}",
            button { class: "{Classes::sidebar_button}", "Hi" }
        }
    }
}

Expected behavior

The button should be blue.

Screenshots

Environment:

• Dioxus version: 1001d78
• Rust version: 1.86
• OS info: Windows 11
• App platform: desktop

Questionnaire

I'm interested in fixing this myself, if no one else fixes it.