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
    • Emoji support included as of the spec
  • 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!

• abishekatp/stylers
• eboody/styled

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