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