stylist 0.10.0

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

Usage

Yew Integration

To enable yew integration. Enable feature yew_integration in Cargo.toml.

You can create a style and use it with yew like this:

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>}
}

Procedural Macros

To create a stylesheet, you can use [style!]:

use stylist::style;

let style = style!(
r#"
background-color: red;

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

Style API

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

use stylist::Style;

let style = Style::new(
r#"
background-color: red;

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

YieldStyle API

Any struct that implements [YieldStyle] trait can call self.style() to get a [Style] instance.

use std::borrow::Cow;
use stylist::{css, StyleSource, YieldStyle};

pub struct Component;

impl YieldStyle for Component {
fn style_from(&self) -> StyleSource<'static> {
css!("color: red;")
}
}

impl Component {
fn print_style(&self) {
println!("{}", self.style().get_class_name());
}
}

Everything that is not in a conditioned block will be applied to the Component the class of this style is applied to.

You may also use Current Selector (&) in CSS selectors to denote the container element:

&:hover {
background-color: #d0d0d9;
}

You can also use other CSS rules(such as: keyframes, supports and media):

@keyframes mymove {
from {
top: 0px;
}
to {
top: 200px;
}
}

@media only screen and (max-width: 600px) {
background-color: #303040;

.nested {
background-color: lightblue;
}

&:hover {
background-color: #606072;
}
}

@supports (backdrop-filter: blur(5px)) {
backdrop-filter: blur(5px);
}

Theming

There's theming example using Yew Context API.

Features Flags

• macros: Enabled by default, this flag enables procedural macro support.
• random: Enabled by default, this flag uses fastrand crate to generate a random class name. Disabling this flag will opt for a class name that is counter-based.
• yew_integration: This flag enables yew integration, which implements Classes for [Style] and provides a Global component for applying global styles.