wasm-css 0.2.0

Ergonomic WASM CSS Framework
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121

// Authors: Robert Lopez

pub mod components;
pub mod delete;
pub mod error;
pub mod extend_from_css;
pub mod extend_from_style;
pub mod macros;
pub mod remove_keys;

mod generate_random_identity;
mod render;

#[cfg(test)]
mod tests;

use crate::error::WasmCssError;
use components::Components;
use error::format_error;
use generate_random_identity::generate_random_identity;

/// Represents a `<style>` child in the `<head>` element containing CSS.
///
/// `css`: formatted css String.
#[derive(Debug, Clone, PartialEq)]
pub struct Style {
    pub css: String,
    css_name: String,
    components: Components,
}

impl Style {
    /// Create a `Style` from `css`, rendering it to the DOM as a `<style>` in `<head>`.
    /// The `css` is formatted, minfied, and small errors like invalid semi-colons can be
    /// corrected, however invalid CSS itself is not handled by the parser.
    ///
    /// Effects remain there order as defined, but their inner fields, as well as the Style's
    /// fields will be ordered in a deterministic fashion to avoid duplication.
    ///
    /// *Note*: Trailing semi-colons are required.
    ///
    /// Returns error if missing access to: `Head`, `Crypto`(If generating a random ID),
    /// `Window`, `Document`.
    ///
    /// Provide `css_name` to define a class, ID, or to target a global identifier,
    /// E.G.: `div`, `#id`, `.class`.
    ///
    /// ---
    /// Example Usage:
    /// ```
    ///
    /// let style = Style::new(
    ///     "
    ///         display: flex;
    ///
    ///         &:hover {
    ///             background-color: rgba(111, 111, 111, 0.1);
    ///         }
    ///
    ///         @media (max-width: 800px) {
    ///             flex-direction: column;
    ///         }
    ///     ",
    ///     Some(".my_class"),
    /// )?;
    /// ```
    pub fn new(css: &str, css_name: Option<&str>) -> Result<Self, WasmCssError> {
        if css_name.is_some_and(|i| i.is_empty()) {
            return Err(format_error!(
                "A Styles css_name cannot be empty. Use: `body`, `.class`, `#id`, ect."
            ));
        }

        let css_name = css_name
            .map(|id| id.to_string())
            .unwrap_or(format!(".{}", generate_random_identity()?));
        let components = Components::from_css(css);

        let _self = Self {
            css: components.to_css(&css_name),
            css_name,
            components,
        };
        _self.render()?;

        Ok(_self)
    }

    /// Returns the `identity` of the definition inside the `<style>` element.
    ///
    /// Example Usage:
    /// ```
    ///
    /// let style = named_style!(".myStyle", "font-size: 5rem;")?;
    ///
    /// // "myStyle"
    /// let identity = style.identity();
    /// ```
    ///
    /// ```
    ///
    /// let style = named_style!("#myStyle", "font-size: 5rem;")?;
    ///
    /// // "myStyle"
    /// let identity = style.identity();
    /// ```
    ///
    /// ```
    ///
    /// let style = named_style!("body", "font-size: 5rem;")?;
    ///
    /// // "body"
    /// let identity = style.identity();
    pub fn identity(&self) -> &str {
        if self.css_name.starts_with('#') || self.css_name.starts_with('.') {
            self.css_name.split_at(1).1
        } else {
            &self.css_name
        }
    }
}