Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/futursolo/stylist-rs
A CSS-in-Rust styling solution for WebAssembly Applications
https://github.com/futursolo/stylist-rs
css rust wasm yew
Last synced: 9 days ago
JSON representation
A CSS-in-Rust styling solution for WebAssembly Applications
- Host: GitHub
- URL: https://github.com/futursolo/stylist-rs
- Owner: futursolo
- License: mit
- Created: 2021-08-01T14:01:49.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-08-14T05:37:12.000Z (3 months ago)
- Last Synced: 2024-10-12T23:43:43.988Z (27 days ago)
- Topics: css, rust, wasm, yew
- Language: Rust
- Homepage: https://crates.io/crates/stylist
- Size: 887 KB
- Stars: 374
- Watchers: 8
- Forks: 22
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-yew - stylist-rs - A CSS-in-Rust styling solution for WebAssembly Applications. (Crates / Utils)
README
# Stylist
[![Run Tests & Publishing](https://github.com/futursolo/stylist-rs/actions/workflows/everything.yml/badge.svg)](https://github.com/futursolo/stylist-rs/actions/workflows/everything.yml)
[![crates.io](https://img.shields.io/crates/v/stylist)](https://crates.io/crates/stylist)
[![download](https://img.shields.io/crates/d/stylist)](https://crates.io/crates/stylist)
[![docs.rs](https://docs.rs/stylist/badge.svg)](https://docs.rs/stylist/)Stylist is a CSS-in-Rust styling solution for WebAssembly Applications.
This is a fork of [css-in-rust](https://github.com/lukidoescode/css-in-rust).
## Install
Add the following to your `Cargo.toml`:
```toml
stylist = "0.13"
```## Usage
For detailed usage, please see
[documentation](https://docs.rs/stylist/).### Yew Integration
To style your component, you can use `styled_component` attribute with `css!`
macro.```rust
use yew::prelude::*;
use stylist::yew::styled_component;#[styled_component]
fn MyStyledComponent() -> Html {
html! {{"Hello World!"}}
}
```### Standalone
To create a stylesheet, you can use `style!`:
```rust
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`:
```rust
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](https://github.com/futursolo/stylist-rs/tree/master/examples/yew-theme-context).