feat: add stylesheet component to dioxus document (#3138)

* feat: add stylesheet component to dioxus document

* fix asset path

* add cache key to playwright

.github/workflows/main.yml

@@ -254,6 +254,7 @@ jobs:
         with:
           cache-all-crates: "true"
           cache-on-failure: "true"
+          key: "playwright-tests"
 
       - name: Playwright
         working-directory: ./packages/playwright-tests
@@ -346,7 +347,7 @@ jobs:
 
       - uses: Swatinem/rust-cache@v2
         with:
-          key: "${{ matrix.platform.target }}"
+          key: "matrix-${{ matrix.platform.target }}"
           cache-all-crates: "true"
           cache-on-failure: "true"
 

packages/document/src/elements/mod.rs

@@ -7,6 +7,8 @@ use dioxus_core_macro::*;
 
 mod link;
 pub use link::*;
+mod stylesheet;
+pub use stylesheet::*;
 mod meta;
 pub use meta::*;
 mod script;

packages/document/src/elements/stylesheet.rs

@@ -0,0 +1,32 @@
+use super::*;
+
+/// Render a [`link`](crate::elements::link) tag into the head of the page with the stylesheet rel.
+/// This is equivalent to the [`Link`](crate::Link) component with a slightly more ergonomic API.
+///
+///
+/// # Example
+/// ```rust, no_run
+/// # use dioxus::prelude::*;
+/// fn RedBackground() -> Element {
+///     rsx! {
+///         document::Stylesheet {
+///             src: asset!("/assets/style.css")
+///         }
+///     }
+/// }
+/// ```
+///
+/// <div class="warning">
+///
+/// Any updates to the props after the first render will not be reflected in the head.
+///
+/// </div>
+#[component]
+pub fn Stylesheet(props: LinkProps, src: Option<String>) -> Element {
+    super::Link(LinkProps {
+        href: src.or_else(|| props.href.clone()),
+        rel: Some("stylesheet".into()),
+        r#type: Some("text/css".into()),
+        ..props
+    })
+}