#css #web #css-in-rust #yew

stylist

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

7 releases (4 breaking)

0.10.1 Jun 12, 2022
0.10.0 Dec 12, 2021
0.9.2 Sep 15, 2021
0.8.0 Aug 20, 2021
0.6.0 Aug 2, 2021

#90 in WebAssembly

Download history 88/week @ 2022-03-10 133/week @ 2022-03-17 76/week @ 2022-03-24 136/week @ 2022-03-31 147/week @ 2022-04-07 136/week @ 2022-04-14 119/week @ 2022-04-21 192/week @ 2022-04-28 153/week @ 2022-05-05 181/week @ 2022-05-12 144/week @ 2022-05-19 174/week @ 2022-05-26 145/week @ 2022-06-02 170/week @ 2022-06-09 158/week @ 2022-06-16 220/week @ 2022-06-23

717 downloads per month
Used in yew_styles

MIT license

135KB
3K SLoC

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.10"

Usage

For detailed usage, please see documentation.

Yew Integration

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

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.

Dependencies

~6.5–9MB
~171K SLoC