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

Requirements

Rust
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 Styles 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

See LICENSE.md

wasm-css 0.1.3