Stylist is a CSS-in-Rust styling solution for WebAssembly Applications.

Related tags

WebAssembly css rust wasm yew
Overview

Stylist

Run Tests & Publishing crates.io docs.rs

Stylist is a CSS-in-Rust styling solution for WebAssembly Applications.

This is a fork of css-in-rust.

Install

Add the following to your Cargo.toml:

stylist = "0.9"

Usage

For detailed usage, please see documentation.

Yew Integration

To style your component, you can use styled_component attribute with css! macro.

{"Hello World!"}
} } "> 
use yew::prelude::*;
use stylist::yew::styled_component;

#[styled_component(MyStyledComponent)]
fn my_styled_component() -> Html {
    html! {<div class={css!("color: red;")}>{"Hello World!"}</div>}
}

Standalone

To create a stylesheet, you can use style!:

use stylist::style;

let style = style!(
   // A CSS string literal
   r#"
       background-color: red;

       .nested {
           background-color: blue;
           width: 100px
       }
   "#
).expect("Failed to mount style");

// stylist-uSu9NZZu
println!("{}", style.get_class_name());

Runtime Style

If you want to parse a string into a style at runtime, you can use Style::new:

use stylist::Style;

let style_str = r#"
    background-color: red;

    .nested {
        background-color: blue;
        width: 100px
    }
"#;

let style = Style::new(style_str).expect("Failed to create style");

// stylist-uSu9NZZu
println!("{}", style.get_class_name());

Theming

There's theming example using Yew Context API.

Comments