From 42f6b91390c139041c2f627784e75d6cac264927 Mon Sep 17 00:00:00 2001
From: Jonathan Kelley <jkelleyrtp@gmail.com>
Date: Mon, 28 Oct 2024 17:52:28 -0700
Subject: [PATCH] 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                   |  3 +-
 packages/document/src/elements/mod.rs        |  2 ++
 packages/document/src/elements/stylesheet.rs | 32 ++++++++++++++++++++
 3 files changed, 36 insertions(+), 1 deletion(-)
 create mode 100644 packages/document/src/elements/stylesheet.rs

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 908258063..720a167d6 100644
--- a/.github/workflows/main.yml
+++ b/.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"
 
diff --git a/packages/document/src/elements/mod.rs b/packages/document/src/elements/mod.rs
index 9f0d61422..e9fbbc4a4 100644
--- a/packages/document/src/elements/mod.rs
+++ b/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;
diff --git a/packages/document/src/elements/stylesheet.rs b/packages/document/src/elements/stylesheet.rs
new file mode 100644
index 000000000..c4f5bb065
--- /dev/null
+++ b/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
+    })
+}