unstyled

Crates.iounstyled
lib.rsunstyled
version0.1.3
sourcesrc
created_at2023-08-29 00:02:12.273175
updated_at2023-09-05 15:35:19.937294
descriptionUnstyled is just another library which allows to write scoped CSS styles in Rust
homepage
repositoryhttps://github.com/YannikSc/unstyled
max_upload_size
id957459
size4,179
(YannikSc)

documentation

README

Build Status crates.io

Unstyled

Another library that provide scoped CSS styling in Rust.

This library is made with leptos primarily in mind, but there should be no reason why it would not work with other frameworks like yew.

Features

  • Scoped css styling
    • Supporting all (that I could think of) css selector types
  • Basic linting of css
    • Unterminated quotes
    • Missing value for property
    • Invalid characters in property name
    • Missing semicolon;

Installation

$ cargo add unstyled

Usage with leptos

use leptos::*;

#[component]
pub fn MyUnstyledComponent(cx: Scope) -> impl IntoView {
    let class_name = unstyled::style! {"
        @keyframes rainbow-text {
            0% {
                color: hsl(0deg 100% 50%);
            }
        
            33% {
                color: hsl(120deg 100% 50%);
            }
        
            66% {
                color: hsl(240deg 100% 50%);
            }
        
            100% {
                color: hsl(360deg 100% 50%);
            }
        }

        .title {
            animation: rainbow-text infinite 1s;
        }
    "};

    view! {cx, class = class_name,
        <h1 class="title">"Style the, cruel, Unstyled world!"</h1>
    }
}

How it works

The "random"/scoped class is generated by hashing the CSS style. It works, because, although same styles would get the same class, well, they are the same style anyway, so it's fine. It also shrinks down the total CSS size for duplicate styles as those styles will not be emitted twice.

Also, this makes it perfectly viable to get scoped classes for ssr & csr rendered CSS/Components as the scope names are deterministic.

Thanks to

These projects have inspired me to get my hands on this topic, also when this library does not suit your use case, you might want to check them out!

Known issues / TODOs

  • So far selectors inside pseudo-selectors (like :not()) are not scoped!
  • There is no way of defining unscoped styles
  • Storing/Writing the merged css is suuper dirty right now
Commit count: 18

cargo fmt