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

stylist

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

11 releases (7 breaking)

0.13.0 Oct 6, 2023
0.12.1 Jun 25, 2023
0.12.0 Jan 20, 2023
0.11.0 Nov 26, 2022
0.9.2 Sep 15, 2021

#279 in WebAssembly

Download history 297/week @ 2024-07-02 455/week @ 2024-07-09 589/week @ 2024-07-16 667/week @ 2024-07-23 548/week @ 2024-07-30 640/week @ 2024-08-06 708/week @ 2024-08-13 645/week @ 2024-08-20 761/week @ 2024-08-27 509/week @ 2024-09-03 643/week @ 2024-09-10 585/week @ 2024-09-17 828/week @ 2024-09-24 600/week @ 2024-10-01 301/week @ 2024-10-08 558/week @ 2024-10-15

2,376 downloads per month
Used in 17 crates (15 directly)

MIT license

155KB
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.13"

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–16MB
~220K SLoC