leptos_styling 0.3.1

A powerful styling solution for Leptos applications that enables seamless integration of CSS and SCSS stylesheets with type-safe class names and zero runtime overhead.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

use crate::StyleSheet;
use leptos::logging::log;
use leptos::prelude::*;
use leptos_meta::Stylesheet as StyleSheetComponent;

/// A component that renders stylesheet links for all registered stylesheets.
///
/// # Properties
/// * `base_url` - The base URL path for stylesheet references (defaults to "pkg")
///
/// # Returns
/// Returns a view containing stylesheet link elements for all registered stylesheets.
#[cfg(not(feature = "csr"))]
#[component]
pub fn StyleSheets(#[prop(default = "pkg")] base_url: &'static str) -> impl IntoView {
    use std::collections::HashSet;

    let mut seen = HashSet::new();
    let stylesheets: SharedValue<Vec<String>> = SharedValue::new(move || {
        #[cfg(any(feature = "ssr", feature = "csr"))]
        {
            inventory::iter::<StyleSheet>
                .into_iter()
                .map(|style_sheet| {
                    if style_sheet.name.ends_with(".css") {
                        style_sheet.name.to_string()
                    } else {
                        format!("{}.css", style_sheet.name)
                    }
                })
                .collect::<Vec<_>>()
        }
        #[cfg(not(any(feature = "ssr", feature = "csr")))]
        Vec::new()
    });
    let links: Vec<String> = stylesheets
        .into_inner()
        .into_iter()
        .filter(|name| seen.insert(name.clone()))
        .collect();
    view! {
        {links.into_iter().map(|link| view! { <StyleSheetComponent href={format!("{}/{link}",base_url.trim_end_matches("/"))} /> }).collect::<Vec<_>>()}
    }
}
#[cfg(feature = "csr")]
#[component]
pub fn StyleSheets(#[prop(default = "pkg")] base_url: &'static str) -> impl IntoView {
    use std::collections::HashMap;
    let mut grouped: HashMap<&str, String> = HashMap::new();
    for style_sheet in inventory::iter::<StyleSheet>() {
        grouped
            .entry(style_sheet.name)
            .or_default()
            .push_str(style_sheet.content.unwrap_or_default());
    }
    let style_sheet_content: String = grouped.values().cloned().collect();
    view! {
        <style>{style_sheet_content}</style>
    }
}