stylist 0.15.1

Stylist is a CSS-in-Rust styling solution for WebAssembly Applications.
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
61
62
63
64
65
66
67
68
69
70
71
72

use yew::prelude::*;

use crate::manager::StyleManager;

/// The properties for [`ManagerProvider`] Component, please see its documentation for usage.
#[derive(Properties, Clone, Debug, PartialEq)]
pub struct ManagerProviderProps {
    pub manager: StyleManager,
    #[prop_or_default]
    pub children: Children,
}

/// A Context Provider to provide a custom [`StyleManager`] to child components.
///
/// # Example:
///
/// ```
/// use stylist::manager::StyleManager;
/// use stylist::yew::ManagerProvider;
/// use yew::prelude::*;
///
/// #[function_component(App)]
/// fn app() -> Html {
///     let mgr = use_state(|| {
///         StyleManager::builder()
///             .prefix("my-styles".into())
///             .build()
///             .unwrap()
///     });
///
///     let children = Html::default();
///     html! {
///         <ManagerProvider manager={(*mgr).clone()}>
///             {children}
///         </ManagerProvider>
///     }
/// }
/// ```
#[component(ManagerProvider)]
pub fn manager_provider(props: &ManagerProviderProps) -> HtmlResult {
    let ManagerProviderProps { manager, children } = props.clone();

    #[cfg(any(feature = "ssr", feature = "hydration"))]
    {
        use crate::manager::StyleData;

        let _manager = manager.clone();
        let _style_data = use_transitive_state!((), move |_| -> StyleData {
            _manager
                .style_data()
                .map(|m| m.clone())
                .unwrap_or_else(StyleData::new)
        })?;

        #[cfg(feature = "hydration")]
        {
            // We must load the styles immediately before child components are rendered.
            let manager = manager.clone();
            use_memo(manager, move |manager| {
                if let Some(m) = _style_data {
                    manager.load_style_data(m.as_ref());
                }
            });
        }
    }

    Ok(html! {
        <ContextProvider<StyleManager> context={manager}>
            {children}
        </ContextProvider<StyleManager>>
    })
}