Skip to content

Conversation

@mcmah309
Copy link
Contributor

@mcmah309 mcmah309 commented Dec 12, 2025

Closes #1096

Implements scoped css.

Revives and fixes the broken css_module! macro. Implementing a css recursive descent parser and a cleaner macro interface.

e.g.

use dioxus::prelude::*;
fn app() -> Element {
    styles!("/assets/styles.css");
    
    rsx! {
        div { class: Styles::container,
            button { class: Styles::button, "Click me" }
            span { class: Styles::global_class, "This uses global class" }
        }
    }
}

/assets/styles.css

.container {
    background-color: lightblue;
    padding: 20px;
    border-radius: 8px;
}

:global(.global-class) {
    color: red;
    font-weight: bold;
}

.button {
  color: blue;
}

Used css

.container-e1e1ad32 {
    background-color: lightblue;
    padding: 20px;
    border-radius: 8px;
}

.global-class {
    color: red;
    font-weight: bold;
}

.button-e1e1ad32 {
  color: blue;
}

@mcmah309 mcmah309 requested a review from a team as a code owner December 12, 2025 06:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Scoped CSS Modules

1 participant