stylist 0.9.2

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 std::borrow::Cow;

use yew::prelude::*;
use stylist::css;

struct MyStyledComponent {}

impl Component for MyStyledComponent {
type Message = ();
type Properties = ();

fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {
Self {}
}

fn change(&mut self, _: Self::Properties) -> ShouldRender {
false
}

fn update(&mut self, _: Self::Message) -> ShouldRender {
false
}

fn view(&self) -> 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're theming examples using Yewdux and yewtil::store.

Features Flags

• macros: Enabled by default, this flag enables procedural macro support.
• random: Enabled by default, this flag uses rand 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.