stylist 0.8.0

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

Usage

There're two APIs that you can use to style your components.

Style API

To create a stylesheet, 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

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

use std::borrow::Cow;
use stylist::YieldStyle;

pub struct Component;

impl YieldStyle for Component {
fn style_str(&self) -> Cow<'static, str> {
"color: red;".into()
}
}

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

Yew Integration

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

Then create a style and use it with yew like this:

use std::borrow::Cow;

use yew::prelude::*;
use stylist::YieldStyle;

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=self.style()>{"Hello World!"}</div>}
}
}

impl YieldStyle for MyStyledComponent {
fn style_str(&self) -> Cow<'static, str> {
"color: red;".into()
}
}

Theming

There're theming examples using Yewdux and yewtil::store.

Features Flags

• 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.