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>

examples/03-assets-styling/css_modules.rs

@@ -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)" }
+        }
+    }
+}

examples/assets/css_module1.css

@@ -0,0 +1,11 @@
+.container {
+    background-color: lightblue;
+    padding: 20px;
+    border-radius: 8px;
+}
+
+/* The `:global` selector can be used to define global styles that are not scoped */
+:global(.global-class) {
+    color: red;
+    font-weight: bold;
+}

examples/assets/css_module2.css

@@ -0,0 +1,9 @@
+.test {
+    font-size: 24px;
+    color: darkblue;
+}
+
+.highlight {
+    background-color: yellow;
+    padding: 5px;
+}