wasm-css 0.1.3

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
122
123
124
125
126
127
128
129
130
131
132
133
134

# wasm-css

Ergonomic WASM-CSS framework

## Description

Provides a simple API through `Style` and the `style!` and `style_checked!` macros to implement dynamic CSS styling in WASM environments.

- [Full crate documentation can be found here at docs.rs](https://docs.rs/wasm-css)

## Requirements

- [`Rust`](https://www.rust-lang.org/tools/install)

- WASM Pack for testing: `cargo install wasm-pack`

## Installation

`cargo add wasm-css`

## Usage

It's recommend to use the `style!` or `style_checked!` macro to instantiate new `Style`s as this is the most ergonomic way, but you can also create styles directly through `Style::new_checked` and `Style::new_unchecked`. Checked will error if encountering invalid CSS Keys, and unchecked will filter any invalid keys out from its `Style`.

When a `Style` is created, or mutated; it will update the DOMs `<style>` node corresponding to its uuid. You can get the class name (which is also set as the `style` tags ID) through the `Style::class` method to apply it to elements. So, when applying mass changes, it is more efficient to use `insert_many`/`remove_many`/`append` to avoid multiple DOM updates.

### Errors

Errors can happen constructing and updating `Style` if:

- No `Head` Object

- No `Window` Object

- No `Document` Object

- No `Crypto` Object when trying to generate class names automatically

- Invalid CSS Keys when using `_checked` methods

Example in Yew:

```
use wasm_css::style;
use yew::prelude::*;

#[derive(Properties, PartialEq)]
pub struct LabelProps {
    pub text: String,
    pub font_size: i32,
}

#[function_component]
fn Label(props: &LabelProps) -> Html {
    let style = style!("font-size: {}rem;", props.font_size).unwrap();

    html! {
        <label class={style.class()}>
            { props.text.clone() }
        </label>
    }
}

#[function_component]
fn App() -> Html {
    let font_size = use_state(|| 1);

    let increment_font_size = {
        let font_size = font_size.clone();

        move |_| {
            let new_size: i32 = *font_size + 1;
            font_size.set(new_size);
        }
    };

    html! {
        <div
            class={style!(
            "
                gap: 1rem;
                width: 100%;
                display: flex;
                flex-direction: column;
                background-color: cyan;
            ")
            .unwrap()
            .class()}
            onclick={increment_font_size}
        >
            <Label
                text="wasm-css"
                font_size={*font_size}
            />
            <Label
                text={format!("Font Size: {}", *font_size)}
                font_size={*font_size}
            />
        </div>
    }
}

fn main() {
    yew::Renderer::<App>::new().render();
}
```

## Roadmap

Potential Improvements:

- Validation to keys

- CSS Parsing/Generation optimization

- Animation/KeyFrames built in support

## Contributing

Open to contributions, please just create a PR/issue or reach out to me to discuss what you would like to add/change.

Testing can be done by:

- `wasm-pack test --chrome`

- Go to the listed URI to run the test suite

## License

MIT License

Copyright (c) 2024 Robert Lopez

See `LICENSE.md`