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

stylist

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

9 releases (breaking)

0.12.0 Jan 20, 2023
0.11.0 Nov 26, 2022
0.10.1 Jun 12, 2022
0.10.0 Dec 12, 2021
0.6.0 Aug 2, 2021

#58 in WebAssembly

Download history 556/week @ 2022-11-30 721/week @ 2022-12-07 634/week @ 2022-12-14 706/week @ 2022-12-21 522/week @ 2022-12-28 1439/week @ 2023-01-04 557/week @ 2023-01-11 705/week @ 2023-01-18 702/week @ 2023-01-25 850/week @ 2023-02-01 585/week @ 2023-02-08 813/week @ 2023-02-15 575/week @ 2023-02-22 839/week @ 2023-03-01 646/week @ 2023-03-08 830/week @ 2023-03-15

3,085 downloads per month
Used in 6 crates

MIT license

150KB
3.5K SLoC

Stylist

Run Tests & Publishing crates.io download 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.11"

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]
fn MyStyledComponent() -> 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

~7–14MB
~250K SLoC