![Build Status](https://github.com/YannikSc/unstyled/actions/workflows/rust.yml/badge.svg) [![crates.io](https://img.shields.io/crates/v/unstyled)](https://crates.io/crates/unstyled)

# Unstyled

Another library that provide scoped CSS styling in Rust.

This library is made with [leptos](https://github.com/leptos-rs/leptos) primarily in mind, but there should be no reason
why it would not work with other
frameworks like [yew](https://github.com/yewstack/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](https://www.w3.org/TR/CSS22/syndata.html#value-def-identifier)
  - Missing semicolon;

## Installation

```
$ cargo add unstyled
```

## Usage with leptos

```rust
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](https://github.com/abishekatp/stylers)
- [eboody/styled](https://github.com/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