# wasm-css

Ergonomic WASM-CSS framework

## Description

Provides a simple API through `Style` and the `style!`, `named_style!`, `add_effects!` and `global_style!` macros to implement dynamic CSS styling in WASM environments.

## Requirements

- [`Rust`](https://www.rust-lang.org/tools/install)

- WASM Pack for testing: `cargo install wasm-pack`

## Installation

`cargo add wasm-css`

## Usage

You can create a `Style` via `style!`, `named_style!` and `global_style!` macros; as well as `Style::new`. Each style, unless given a class name or a global style target; will generate a UUID using the [`Crypto`](https://developer.mozilla.org/en-US/docs/Web/API/Crypto) module, and use that as the `<style>` tags class name and id.

When a `Style` is created, or mutated; it will update the DOMs `<style>` node corresponding to its uuid. You can get the class name (which is also set as the `style` tags ID) through the `Style::class` method to apply it to elements. So, when applying mass changes, it is more efficient to use the `*_many` or `append` methods.

You can add `effect`s or media queries, hover effects, key frames and so on through the `add_effects!` macro or the `Style::insert_effect` and `Style::insert_effect_many` methods.

Please see [Full crate documentation can be found here at docs.rs](https://docs.rs/wasm-css) for all available functionality.

### Invalid CSS

In its current state, the parser will only detect and skip invalid CSS key names or ill-formatted CSS. Events are internally parsed for CSS formatting, but do not include any level of validation.

### Errors

Errors can happen constructing and updating `Style` if:

- No `Head` Object

- No `Window` Object

- No `Document` Object

- No `Crypto` Object when trying to generate class names automatically

### Example

```
use wasm_css::{add_effects, error::WasmCssError, global_style, named_style, style};

fn example() -> Result<(), WasmCssError> {
    let font_size = 20;

    // Constructing Styles
    let mut style = style!("font-size: {font_size}rem;")?;

    let global_style = global_style!(
        "html",
        "
            color: blue;
            background-color: blue;
        "
    )
    .unwrap();

    let named_style = named_style!(
        "my_class_name",
        "
            border: 1px solid black;
            border-radius: 10px;
        "
    )?;

    // Combining Styles
    style.append(&named_style)?;

    // Inserting CSS Lines
    style.insert("font-weight", "bold")?;

    // Removing CSS Lines
    style.remove_many(vec!["border-color", "background-color"])?;

    // Manipulating Effects
    add_effects!(
        &mut style,
        (
            "@media (max-width: {}px) {{ font-size: {}px; background-color: red; }}",
            400,
            12
        ),
        ("&:hover {{ font-size: 20rem; }}",)
    )?;

    style.remove_effect("@media (max-width: 400px)")?;

    // Obtain the styles ClassName/ClassID
    let class = style.class();

    Ok(())
}
```

## Roadmap

Potential Improvements:

- More validation (Currently only validates standard CSS key name)

- More CSS Parsing/Generation optimization

- Parse effects body content "prettily" like standard CSS

## Contributing

Open to contributions, please just create a PR/issue or reach out to me to discuss what you would like to add/change.

Testing can be done by:

- `wasm-pack test --chrome`

- Go to the listed URI to run the test suite

## License

MIT License

Copyright (c) 2024 Robert Lopez

See `LICENSE.md`