css-in-rust icon indicating copy to clipboard operation
css-in-rust copied to clipboard

Check CSS syntax at compile time

Open lukidoescode opened this issue 4 years ago • 3 comments

It would be a neat feature to be informed of Syntax errors in the CSS at compile time.

lukidoescode avatar Mar 18 '20 21:03 lukidoescode

Yea, I think compile time verification is the feature which would get me on board with using this project. Great work so far. Stoked to see this project is still making headway.

thedodd avatar Jul 13 '20 15:07 thedodd

Howdy, here's some strawman syntax inspired by my own brain and rsx

use css_in_rust::{Px, Color, css};

let color: Color = Color::Keyword::Red.into();
let width: Px = 100.into();

let style = css! {
    // interpolate variables in rule assignment
    background-color: {color};

    .nested {
        background-color: blue;
        // not necessary, but slightly more ergonomic
        // shorthand for when variable + rule names the same
        {width}
    }
};
original (expand)
let style = match css_in_rust::Style::create(
    "Component", // The class prefix
    // The actual css
    r#"
    background-color: red;

    .nested {
        background-color: blue;
        width: 100px
    }"#,
) {
    Ok(style) => style,
    Err(error) => {
        panic!("An error occured while creating the style: {}", error);
    }
};

cakekindel avatar Aug 06 '20 17:08 cakekindel

I'm probably available to help implement this as well!

cakekindel avatar Aug 06 '20 17:08 cakekindel