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
2,376 downloads per month
Used in 17 crates
(15 directly)
155KB
3.5K
SLoC
Stylist
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