✨ feat: mount style

src/button/mod.rs

@@ -1,13 +1,16 @@
+use crate::utils::mount_style::mount_style;
 use leptos::*;
-use stylers::style_sheet;
+use stylers::style_sheet_str;
 
 #[component]
 pub fn Button(cx: Scope, #[prop(default = false)] text: bool, children: Children) -> impl IntoView {
-    let class_name = style_sheet!("./src/button/button.css");
+    let class_name = mount_style("button", || style_sheet_str!("./src/button/button.css"));
-    let class = move || if text {
+    let class = move || {
+        if text {
             "melt-button melt-button--text"
         } else {
             "melt-button"
+        }
     };
     view! {cx, class=class_name,
         <button class=class>

src/card/mod.rs

@@ -1,5 +1,6 @@
+use crate::utils::mount_style::mount_style;
 use leptos::*;
-use stylers::style_sheet;
+use stylers::style_sheet_str;
 
 #[component]
 pub fn Card(
@@ -10,7 +11,7 @@ pub fn Card(
     children: Children,
     #[prop(default = None)] footer: Option<Children>,
 ) -> impl IntoView {
-    let class_name = style_sheet!("./src/card/card.css");
+    let class_name = mount_style("card", || style_sheet_str!("./src/card/card.css"));
     view! {
         cx, class=class_name,
         <div class="melt-card">

src/lib.rs

@@ -3,6 +3,7 @@ mod card;
 mod modal;
 mod table;
 mod teleport;
+mod utils;
 
 pub use button::*;
 pub use modal::*;

src/modal/mod.rs

@@ -1,7 +1,8 @@
 use crate::card::*;
 use crate::teleport::*;
+use crate::utils::mount_style::mount_style;
 use leptos::*;
-use stylers::style_sheet;
+use stylers::style_sheet_str;
 
 #[component]
 pub fn Modal(
@@ -12,7 +13,7 @@ pub fn Modal(
     open: ReadSignal<bool>,
     #[prop(default = None)] on_cancel: Option<Box<dyn Fn() + 'static>>,
 ) -> impl IntoView {
-    let class_name = style_sheet!("./src/modal/modal.css");
+    let class_name = mount_style("modal", || style_sheet_str!("./src/modal/modal.css"));
     let header = move |cx| {
         view! {
             cx, class=class_name,

src/table/mod.rs

@@ -1,9 +1,10 @@
+use crate::utils::mount_style::mount_style;
 use leptos::*;
-use stylers::style_sheet;
+use stylers::style_sheet_str;
 
 #[component]
 pub fn Table(cx: Scope, children: Children) -> impl IntoView {
-    let class_name = style_sheet!("./src/table/table.css");
+    let class_name = mount_style("table", || style_sheet_str!("./src/table/table.css"));
     view! {cx, class=class_name,
         <table class="melt-table">
             {children(cx)}

src/utils/mod.rs

@@ -0,0 +1 @@
+pub(crate) mod mount_style;

src/utils/mount_style.rs

@@ -0,0 +1,26 @@
+use leptos::document;
+
+pub fn mount_style<'a, F>(id: &'a str, f: F) -> &str
+where
+    F: FnOnce() -> (&'a str, &'a str),
+{
+    let head = document().head().expect("head no exist");
+    let style = head
+        .query_selector(&format!("style[csr-id=\"melt-{id}\"]"))
+        .expect("query style element error");
+
+    let (class_name, content) = f();
+    if style.is_some() {
+        return class_name;
+    }
+
+    let style = document()
+        .create_element("style")
+        .expect("create style element error");
+    _ = style.set_attribute("csr-id", &format!("melt-{id}"));
+    style.set_text_content(Some(content));
+
+    _ = head.append_child(&style);
+
+    class_name
+}