Merge pull request #3 from luoxiaozero/feat/stable

feat: remove stylers

Cargo.toml

@@ -14,7 +14,6 @@ license = "MIT"
 
 [dependencies]
 leptos = { version = "0.5.0", features = ["csr"] }
-stylers = "0.3.2"
 web-sys = { version = "0.3.62", features = ["DomRect"] }
 leptos_dom = { version = "0.5.0" }
 wasm-bindgen = "0.2.85"

gh-pages/src/components/demo.rs

@@ -10,7 +10,7 @@ pub struct DemoCode {
 
 #[component]
 pub fn Demo(demo_code: DemoCode, children: Children) -> impl IntoView {
-    mount_style("demo", || ("", prisms::prism_css!()));
+    mount_style("demo", prisms::prism_css!());
     view! {
        <div style="background-image: url(/melt-ui/grid_dot.svg); background-repeat: repeat; background-size: 1.5rem; margin-top: 1rem; padding: 1rem; border: 1px solid #e5e8eb; border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem;">
             { children() }

src/button/mod.rs

@@ -1,7 +1,7 @@
 mod theme;
+
 use crate::{components::*, icon::*, theme::*, utils::mount_style::mount_style};
 use leptos::*;
-use stylers::style_sheet_str;
 pub use theme::ButtonTheme;
 
 #[derive(Default, PartialEq, Clone, Copy)]
@@ -84,7 +84,7 @@ pub fn Button(
 
         css_vars
     });
-    let class_name = mount_style("button", || style_sheet_str!("./src/button/button.css"));
+    mount_style("button", include_str!("./button.css"));
 
     let icon_style = if children.is_some() {
         "margin-right: 6px"
@@ -110,7 +110,7 @@ pub fn Button(
         callback.call(event);
     };
 
-    view! {class=class_name,
+    view! {
         <button
             class:melt-button=true
             class=("melt-button--text", move || type_.get() == ButtonType::TEXT)

src/card/mod.rs

@@ -1,8 +1,6 @@
-use std::rc::Rc;
-
 use crate::{components::*, utils::mount_style::mount_style};
 use leptos::*;
-use stylers::style_sheet_str;
+use std::rc::Rc;
 
 #[slot]
 pub struct CardHeader {
@@ -29,7 +27,7 @@ pub fn Card(
     children: Children,
     #[prop(optional)] card_footer: Option<CardFooter>,
 ) -> impl IntoView {
-    let class_name = mount_style("card", || style_sheet_str!("./src/card/card.css"));
+    mount_style("card", include_str!("./card.css"));
 
     let is_header = card_header.is_some();
     let header = card_header.map_or(None, |v| Some(Rc::new(v)));
@@ -37,7 +35,6 @@ pub fn Card(
     // let footer = card_footer.map_or(None, |v| Some(Rc::new(v)));
 
     view! {
-         class=class_name,
         <div class="melt-card">
                 <If cond=MaybeSignal::derive( move || is_header || !title.get().is_empty())  >
                     <Then slot>

src/checkbox/mod.rs

@@ -12,7 +12,6 @@ pub use checkbox_group::CheckboxGroup;
 pub use checkbox_item::CheckboxItem;
 use icondata::AiIcon;
 use leptos::*;
-use stylers::style_sheet_str;
 
 #[component]
 pub fn Checkbox(
@@ -20,9 +19,7 @@ pub fn Checkbox(
     children: Children,
 ) -> impl IntoView {
     let theme = use_theme(Theme::light);
-    let class_name = mount_style("checkbox", || {
-        style_sheet_str!("./src/checkbox/checkbox.css")
-    });
+    mount_style("checkbox", include_str!("./checkbox.css"));
 
     let css_vars = create_memo(move |_| {
         let mut css_vars = String::new();
@@ -32,7 +29,7 @@ pub fn Checkbox(
         css_vars
     });
 
-    view! {class=class_name,
+    view! {
         <div class:melt-checkbox=true class=("melt-checkbox--checked", move || checked.get()) style=move || css_vars.get()
             on:click=move |_| checked.set(!checked.get_untracked())>
             <input class="melt-checkbox__input" type="checkbox" />

src/input/mod.rs

@@ -1,10 +1,10 @@
 mod theme;
+
 use crate::{
     theme::{use_theme, Theme},
     utils::mount_style::mount_style,
 };
 use leptos::*;
-use stylers::style_sheet_str;
 pub use theme::InputTheme;
 
 #[derive(Default, Clone)]
@@ -29,7 +29,7 @@ pub fn Input(
     #[prop(optional, into)] type_: MaybeSignal<InputType>,
 ) -> impl IntoView {
     let theme = use_theme(Theme::light);
-    let class_name = mount_style("input", || style_sheet_str!("./src/input/input.css"));
+    mount_style("input", include_str!("./input.css"));
 
     let input_ref = create_node_ref::<html::Input>();
     input_ref.on_load(move |input| {
@@ -48,7 +48,6 @@ pub fn Input(
         css_vars
     });
     view! {
-         class=class_name,
         <div class:melt-input=true style=move || css_vars.get()>
             <input type=move || type_.get().as_str() prop:value=move || value.get() ref=input_ref class="melt-input__input-el"/>
         </div>

src/layout/layout_sider.rs

@@ -1,16 +1,13 @@
 use crate::utils::mount_style::mount_style;
 use leptos::*;
-use stylers::style_sheet_str;
 
 #[component]
 pub fn LayoutSider(
     #[prop(optional, into)] style: MaybeSignal<String>,
     children: Children,
 ) -> impl IntoView {
-    let class_name = mount_style("layout-sider", || {
-        style_sheet_str!("./src/layout/layout-sider.css")
-    });
-    view! {class=class_name,
+    mount_style("layout-sider", include_str!("./layout-sider.css"));
+    view! {
         <div class="melt-layout-sider" style=move || style.get()>
             { children() }
         </div>

src/layout/mod.rs

@@ -5,7 +5,6 @@ use crate::utils::mount_style::mount_style;
 pub use layout_header::*;
 pub use layout_sider::*;
 use leptos::*;
-use stylers::style_sheet_str;
 
 #[derive(Default, PartialEq)]
 pub enum LayoutPosition {
@@ -30,7 +29,7 @@ pub fn Layout(
     #[prop(optional, into)] has_sider: MaybeSignal<bool>,
     children: Children,
 ) -> impl IntoView {
-    let class_name = mount_style("layout", || style_sheet_str!("./src/layout/layout.css"));
+    mount_style("layout", include_str!("./layout.css"));
 
     let style = create_memo(move |_| {
         let mut style = style.get();
@@ -39,7 +38,7 @@ pub fn Layout(
         }
         style
     });
-    view! {  class=class_name,
+    view! {
         <div class="melt-layout" class=("melt-layout--absolute-positioned", position == LayoutPosition::ABSOLUTE) style=move || style.get()>
             { children() }
         </div>

src/menu/menu_group.rs

@@ -1,12 +1,9 @@
 use crate::{theme::use_theme, utils::mount_style::mount_style, Theme};
 use leptos::*;
-use stylers::style_sheet_str;
 
 #[component]
 pub fn MenuGroup(label: &'static str, children: Children) -> impl IntoView {
-    let class_name = mount_style("menu-group", || {
-        style_sheet_str!("./src/menu/menu-group.css")
-    });
+    mount_style("menu-group", include_str!("./menu-group.css"));
     let theme = use_theme(Theme::light);
     let css_vars = create_memo(move |_| {
         let mut css_vars = String::new();
@@ -15,7 +12,7 @@ pub fn MenuGroup(label: &'static str, children: Children) -> impl IntoView {
         });
         css_vars
     });
-    view! {class=class_name,
+    view! {
         <div class="melt-menu-group" style=move || css_vars.get()>
             { label }
         </div>

src/menu/menu_item.rs

@@ -1,14 +1,13 @@
 use super::{use_menu, MenuInjectionKey};
 use crate::{theme::use_theme, utils::mount_style::mount_style, Theme};
 use leptos::*;
-use stylers::style_sheet_str;
 
 #[component]
 pub fn MenuItem(
     #[prop(into)] key: MaybeSignal<&'static str>,
     #[prop(into)] label: MaybeSignal<String>,
 ) -> impl IntoView {
-    let class_name = mount_style("menu-item", || style_sheet_str!("./src/menu/menu-item.css"));
+    mount_style("menu-item", include_str!("./menu-item.css"));
     let theme = use_theme(Theme::light);
     let menu = use_menu();
     let onclick_select = move |_| {
@@ -28,7 +27,7 @@ pub fn MenuItem(
         ));
         css_vars
     });
-    view! { class=class_name,
+    view! {
         <div class="melt-menu-item">
             <div class="melt-menu-item__content" class=("melt-menu-item__content--selected", move || menu.get().value == key.get()) on:click=onclick_select style=move || css_vars.get()>
                 { move || label.get() }

src/mobile/nav_bar/mod.rs

@@ -1,6 +1,5 @@
 use crate::{components::*, icon::*, utils::mount_style::mount_style};
 use leptos::*;
-use stylers::style_sheet_str;
 use web_sys::MouseEvent;
 
 #[component]
@@ -12,9 +11,7 @@ pub fn NavBar(
     #[prop(optional, into)] right_text: MaybeSignal<&'static str>,
     #[prop(optional, into)] click_right: Option<SignalSetter<MouseEvent>>,
 ) -> impl IntoView {
-    let class_name = mount_style("nav-bar", || {
-        style_sheet_str!("./src/mobile/nav_bar/nav-bar.css")
-    });
+    mount_style("nav-bar", include_str!("./nav-bar.css"));
 
     let onclick_left = move |ev| {
         if let Some(click_left) = click_left {
@@ -27,7 +24,7 @@ pub fn NavBar(
         }
     };
 
-    view! {  class=class_name,
+    view! {
         <div class="melt-nav-bar">
             <If cond=MaybeSignal::derive( move || left_arrow.get() || !left_text.get().is_empty())>
                 <Then slot>

src/mobile/tabbar/mod.rs

@@ -2,14 +2,12 @@ mod tabbar_item;
 
 use crate::utils::mount_style::mount_style;
 use leptos::*;
-use stylers::style_sheet_str;
+
 pub use tabbar_item::*;
 
 #[component]
 pub fn Tabbar(#[prop(into)] selected: RwSignal<String>, children: Children) -> impl IntoView {
-    let class_name = mount_style("tabbar", || {
-        style_sheet_str!("./src/mobile/tabbar/tabbar.css")
-    });
+    mount_style("tabbar", include_str!("./tabbar.css"));
 
     let tabbar_injection_key = create_rw_signal(TabbarInjectionKey::new(selected.get()));
     create_effect(move |_| {
@@ -28,7 +26,7 @@ pub fn Tabbar(#[prop(into)] selected: RwSignal<String>, children: Children) -> i
         }
     });
     provide_context(tabbar_injection_key);
-    view! { class=class_name,
+    view! {
         <div class="melt-tabbar">
             { children() }
         </div>

src/mobile/tabbar/tabbar_item.rs

@@ -2,7 +2,6 @@ use super::{use_tabbar, TabbarInjectionKey};
 use crate::components::*;
 use crate::{icon::*, theme::use_theme, utils::mount_style::mount_style, Theme};
 use leptos::*;
-use stylers::style_sheet_str;
 
 #[component]
 pub fn TabbarItem(
@@ -10,9 +9,7 @@ pub fn TabbarItem(
     #[prop(optional, into)] icon: Option<Icon>,
     children: Children,
 ) -> impl IntoView {
-    let class_name = mount_style("tabbar-item", || {
-        style_sheet_str!("./src/mobile/tabbar/tabbar-item.css")
-    });
+    mount_style("tabbar-item", include_str!("./tabbar-item.css"));
     let theme = use_theme(Theme::light);
     let tabbar = use_tabbar();
     let onclick_select = move |_| {
@@ -27,7 +24,7 @@ pub fn TabbarItem(
         css_vars
     });
 
-    view! { class=class_name,
+    view! {
         <div class="melt-tabbar-item" class=("melt-tabbar-item--selected", move || tabbar.get().value == name.get()) on:click=onclick_select style=move || css_vars.get()>
             <OptionComp value=icon let:icon>
                 <Icon icon=icon width="22px" height="22px" class="melt-tabbar-item__icon"/>

src/mobile/toast/mod.rs

@@ -1,7 +1,6 @@
 use crate::utils::mount_style::mount_style;
 use leptos::*;
 use std::time::Duration;
-use stylers::style_sheet_str;
 use web_sys::Element;
 
 pub struct ToastOptions {
@@ -10,10 +9,10 @@ pub struct ToastOptions {
 }
 
 pub fn show_toast(options: ToastOptions) {
-    let class_name = mount_style("toast", || style_sheet_str!("./src/mobile/toast/toast.css"));
+    mount_style("toast", include_str!("./toast.css"));
 
     let parent = Element::from(document().body().expect("body element not to exist"));
-    let children = view! { class=class_name,
+    let children = view! {
         <div class="melt-toast">
             { options.message }
         </div>

src/modal/mod.rs

@@ -4,7 +4,6 @@ use crate::icon::*;
 use crate::teleport::*;
 use crate::utils::mount_style::mount_style;
 use leptos::*;
-use stylers::style_sheet_str;
 
 #[slot]
 pub struct ModalFooter {
@@ -18,10 +17,9 @@ pub fn Modal(
     children: Children,
     #[prop(optional)] modal_footer: Option<ModalFooter>,
 ) -> impl IntoView {
-    let class_name = mount_style("modal", || style_sheet_str!("./src/modal/modal.css"));
+    mount_style("modal", include_str!("./modal.css"));
 
     view! {
-         class=class_name,
         <Teleport>
             <div class="melt-modal-container" style=move || if show.get() { "" } else { "display: none" }>
                 <div class="melt-modal-mask"></div>

src/progress/mod.rs

@@ -1,6 +1,5 @@
 use crate::{components::*, utils::mount_style::mount_style};
 use leptos::*;
-use stylers::style_sheet_str;
 
 #[component]
 pub fn Progress(
@@ -8,12 +7,9 @@ pub fn Progress(
     #[prop(optional, into)] right_tip: MaybeSignal<&'static str>,
     percentage: ReadSignal<f64>,
 ) -> impl IntoView {
-    let class_name = mount_style("progress", || {
-        style_sheet_str!("./src/progress/progress.css")
-    });
+    mount_style("progress", include_str!("./progress.css"));
     let style = move || format!("width: {}%", percentage.get());
     view! {
-         class=class_name,
         <div class="melt-progress">
             <span class="melt-progress__tip-left">
                 <If cond=MaybeSignal::derive( move || !left_tip.get().is_empty())>

src/select/mod.rs

@@ -1,7 +1,6 @@
 use crate::{teleport::Teleport, theme::use_theme, utils::mount_style::mount_style, Theme};
 use leptos::*;
 use std::hash::Hash;
-use stylers::style_sheet_str;
 use wasm_bindgen::__rt::IntoJsResult;
 
 #[derive(Clone, PartialEq, Eq, Hash)]
@@ -18,7 +17,7 @@ pub fn Select<T>(
 where
     T: Eq + Hash + Clone + 'static,
 {
-    let class_name = mount_style("select", || style_sheet_str!("./src/select/select.css"));
+    mount_style("select", include_str!("./select.css"));
 
     let theme = use_theme(Theme::light);
     let css_vars = create_memo(move |_| {
@@ -79,7 +78,7 @@ where
             .map_or(String::new(), |v| v.label.clone()),
         None => String::new(),
     });
-    view! {  class=class_name,
+    view! {
         <div class="melt-select" ref=trigger_ref on:click=show_popover style=move || css_vars.get()>
             {
                 move || select_option_label.get()
@@ -97,7 +96,7 @@ where
                             value.set(Some(item_value));
                             is_show_popover.set(false);
                         };
-                        view! {  class=class_name,
+                        view! {
                             <div class="melt-select-menu__item" class=("melt-select-menu__item-selected", move || value.get() == Some(item.get_value().value) ) on:click=onclick>
                                 { item.get_value().label }
                             </div>

src/slider/mod.rs

@@ -1,6 +1,5 @@
 use crate::{theme::use_theme, utils::mount_style::mount_style, Theme};
 use leptos::*;
-use stylers::style_sheet_str;
 use wasm_bindgen::JsCast;
 
 #[component]
@@ -27,7 +26,7 @@ pub fn Slider(
             value.get() / max.get() * 100.0
         }
     });
-    let class_name = mount_style("slider", || style_sheet_str!("./src/slider/slider.css"));
+    mount_style("slider", include_str!("./slider.css"));
 
     let do_update_value = move |val| {
         value.set(val);
@@ -66,7 +65,7 @@ pub fn Slider(
     });
     on_cleanup(move || on_mouse_move.remove());
 
-    view! { class=class_name,
+    view! {
         <div class="melt-slider" style=move || css_vars.get()>
             <div class="melt-slider-rail" ref=rail_ref>
                 <div class="melt-slider-rail__fill" style=move || format!("width: {}%", percentage.get())></div>

src/space/mod.rs

@@ -1,6 +1,5 @@
 use crate::utils::mount_style::mount_style;
 use leptos::*;
-use stylers::style_sheet_str;
 
 #[derive(Default)]
 pub enum SpaceGap {
@@ -18,7 +17,7 @@ pub fn Space(
     #[prop(optional)] vertical: bool,
     children: Children,
 ) -> impl IntoView {
-    let class_name = mount_style("space", || style_sheet_str!("./src/space/space.css"));
+    mount_style("space", include_str!("./space.css"));
     let gap = match gap {
         SpaceGap::SMALL => "4px 8px".into(),
         SpaceGap::MEDIUM => "8px 12px".into(),
@@ -28,12 +27,10 @@ pub fn Space(
     };
 
     view! {
-         class=class_name,
         <div class="melt-space" style:gap={gap} style:flex-direction=if vertical { "column" } else { "row" }>
             {
                 children().nodes.into_iter().map(|node| {
                     view! {
-                         class=class_name,
                         <div class="melt-space__item">
                             {node}
                         </div>

src/table/mod.rs

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

src/tabs/mod.rs

@@ -1,12 +1,12 @@
 mod tab;
 use crate::{theme::use_theme, utils::mount_style::mount_style, Theme};
 use leptos::*;
-use stylers::style_sheet_str;
+
 pub use tab::*;
 
 #[component]
 pub fn Tabs(active_key: RwSignal<&'static str>, children: Children) -> impl IntoView {
-    let class_name = mount_style("tabs", || style_sheet_str!("./src/tabs/tabs.css"));
+    mount_style("tabs", include_str!("./tabs.css"));
     let tab_options_vec = create_rw_signal(vec![]);
     provide_context(TabsInjectionKey {
         active_key: active_key.clone(),
@@ -33,7 +33,7 @@ pub fn Tabs(active_key: RwSignal<&'static str>, children: Children) -> impl Into
     });
     let label_list_ref = create_node_ref::<html::Div>();
 
-    view! {class=class_name,
+    view! {
         <div class="melt-tabs" style=move || css_vars.get()>
             <div class="melt-tabs__label-list" ref=label_list_ref>
                 <For each=move || tab_options_vec.get() key=move |v| v.key children=move | options| {
@@ -56,7 +56,7 @@ pub fn Tabs(active_key: RwSignal<&'static str>, children: Children) -> impl Into
                             });
                         }
                     });
-                    view! { class=class_name,
+                    view! {
                         <span class="melt-tabs__label" class=("melt-tabs__label--active", move || options.key == active_key.get())
                             on:click=move |_| active_key.set(options.key)
                             ref=label_ref

src/tabs/tab.rs

@@ -1,7 +1,6 @@
 use super::use_tabs;
 use crate::utils::mount_style::mount_style;
 use leptos::*;
-use stylers::style_sheet_str;
 
 #[derive(Clone)]
 pub(crate) struct TabOptions {
@@ -11,10 +10,10 @@ pub(crate) struct TabOptions {
 
 #[component]
 pub fn Tab(key: &'static str, label: &'static str, children: Children) -> impl IntoView {
-    let class_name = mount_style("tab", || style_sheet_str!("./src/tabs/tab.css"));
+    mount_style("tab", include_str!("./tab.css"));
     let tabs = use_tabs();
     tabs.push_tab_options(TabOptions { key, label });
-    view! {  class=class_name,
+    view! {
         <div class="melt-tab" class=("melt-tab--hidden", move || key != tabs.get_key()) >
             { children() }
         </div>

src/utils/mount_style.rs

@@ -1,17 +1,13 @@
 use leptos::document;
 
-pub fn mount_style<'a, F>(id: &'a str, f: F) -> &str
-where
-    F: FnOnce() -> (&'a str, &'a str),
-{
+pub fn mount_style(id: &str, content: &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;
+        return;
     }
 
     let style = document()
@@ -21,6 +17,4 @@ where
     style.set_text_content(Some(content));
 
     _ = head.append_child(&style);
-
-    class_name
 }

src/wave/mod.rs

@@ -1,10 +1,9 @@
 use crate::utils::mount_style::mount_style;
 use leptos::*;
-use stylers::style_sheet_str;
 
 #[component]
 pub fn Wave(children: Children) -> impl IntoView {
-    let class_name = mount_style("wave", || style_sheet_str!("./src/wave/wave.css"));
+    mount_style("wave", include_str!("./wave.css"));
     let (css_vars, set_css_vars) = create_signal(String::new());
     let wave_ref = create_node_ref::<html::Div>();
     wave_ref.on_load(move |wave| {
@@ -22,7 +21,6 @@ pub fn Wave(children: Children) -> impl IntoView {
         });
     });
     view! {
-         class=class_name,
         <div class="melt-wave" ref=wave_ref style=move || css_vars.get()>
             { children() }
         </div>