Scoped css (#5087)

* Create new css module parser * Use css module processing * Make hot reloading work for css_module macro * Change css_module macro shape and rename to styles * Add css_module example * Update styles macro documentation * Remove hidden from styles macro * Remove unneeded param * Remove unneeded visibility * Improve `styles!` macro documentation * Clippy * Remove unneeded method * Clippy * Clippy * Replace panic with anyhow * Update css_module macro to attribute macro * Update macro docs * chore: Cargo.lock * Clippy * respect semver by deprecating old func * update to latest winnow --------- Co-authored-by: Jonathan Kelley <jkelleyrtp@gmail.com>
2025-12-29 22:41:36 -05:00
1 parent 34554766db
commit 9965220947
@@ -0,0 +1,31 @@
+//! This example shows how to use css modules with the `css_module` macro. Css modules convert css
+//! class names to unique names to avoid class name collisions.
+
+use dioxus::prelude::*;
+
+fn main() {
+    dioxus::launch(app);
+}
+
+fn app() -> Element {
+    // Each `css_module` macro will expand the annotated struct in the current scope
+    #[css_module("/examples/assets/css_module1.css")]
+    struct Styles;
+
+    #[css_module(
+        "/examples/assets/css_module2.css",
+        // `css_module` can take `AssetOptions` as well
+        AssetOptions::css_module()
+            .with_minify(true)
+            .with_preload(false)
+    )]
+    struct OtherStyles;
+
+    rsx! {
+        div { class: Styles::container,
+            div { class: OtherStyles::test, "Hello, world!" }
+            div { class: OtherStyles::highlight, "This is highlighted" }
+            div { class: Styles::global_class, "This uses a global class (no hash)" }
+        }
+    }
+}