CSS values and units #81

simbleau · 2022-07-13T22:10:20Z

simbleau
Jul 13, 2022

I think there's a lot of ergonomics that could be gained through support of units and values.

The goals of stylist aren't entirely explained, so I'm not sure if you would be opposed to ergonomic values and unit types in stylist, such that someone could do more intricate styling.

Example of a unit:

use std::{fmt::Display, ops::Mul};

pub enum FontSize {
    Em(f32),
}

impl Mul for FontSize {
    type Output = Self;

    fn mul(self, rhs: Self) -> Self {
        match self {
            FontSize::Em(lhs) => match rhs {
                FontSize::Em(rhs) => FontSize::Em(lhs * rhs),
            },
        }
    }
}

impl Mul<i32> for FontSize {
    type Output = Self;

    fn mul(self, rhs: i32) -> Self {
        match self {
            FontSize::Em(lhs) => FontSize::Em(lhs * rhs as f32),
        }
    }
}

... (Div/Mul/Add/Sub) x (f32, i32, u32, etc..)

impl Display for FontSize {
    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
        write!(
            f,
            "{}",
            match self {
                FontSize::Em(val) => format!("{}em", val),
            },
        )
    }
}

This would allow someone to, with stylist, do the following:

#[derive(Properties, PartialEq)]
pub struct Props {
    pub scale: u32, 
}

#[function_component(SizedButton)]
pub fn sized_button(props: &Props) -> Html {
    let style = css!(
        r#"
            & {
                text-size: ${fs}
            }
        "#,
        fs = Em(1.0) * &props.scale
    );

    html! {
        <button class={style}>{ "CLICK ME!" }</button>
    }
}

The benefits of having support for rgb, rgba, em, etc.. built in would be a massive gain in ergonomics for dynamic sizing, especially media queries.

What are your thoughts?

This is meant to be an open discussion, and I would take over the implementation. I can either make this another crate or we can put this in stylist.

simbleau · 2022-07-19T00:29:53Z

simbleau
Jul 19, 2022
Author

Building on this a little more... I think it's more complex than my first glance. I'd also want to support CSS Functions which interoperate with the types and units.

This is my vision, for such an addition:

let font_size: CssUnit = Em(1.04);
let icon_aspect_ratio: CssUnit = Scalar(1.15);
let icon_style = css!(
        r#"
        & {
            height: ${icon_height};
            width: ${icon_width};
        }
        "#,
        icon_height = max!(Px(24), calc!(font_size * 2)),
        icon_width = max!(Px(24), calc!(font_size * 2.0 * icon_aspect_ratio)),
);

Where icon_height would expand to max(24px, calc(1.04em * 2))
and icon_width would expand to max(24px, calc(1.04em * 2.0 * 1.15))
and where max! and calc! take a variadic amount of Into<CssUnit> parameters (Which would make 2.0 a CssUnit::Scalar(f32)).

Alternatively,
Em(1.04) * 2.0 could result in a Calc<CssUnit> and Display as calc(1.04em * 2.0). I'm really not sure what the better API is.

This is opposed to calc!(Em(1.04) * 2.0), where calc! is essentially a DSL (harder macro to write) and outputs a String, calc(1.04em * 2.0)

0 replies

futursolo · 2022-07-19T11:07:45Z

futursolo
Jul 19, 2022
Maintainer

calc(1.04em * 2.0)

em and rem are already relative to a font size of a parent element or the root element.
If you specify the font size in <html /> with font-size: 15px, and an element with font size of 1.5rem, the font size of the element will be 15px * 1.5 = 22.5px. If one wants to set a scale, they can simply change 1.5rem to something else (e.g.: 1.4rem).

I am not sure why one would specify font size like calc(1.5rem * ${scale}) instead of ${scale}rem.

However, it does make sense to implement this syntax for things like calc(100vh - 20px).

To create such a syntax, we have to have a type that implements all units and calculations:

// Yew requires PartialEq for a type to be passed in a Properties type,
// however, I am not sure how to implement PartialEq for `f64` here.
// Decimal seems unnecessarily heavy for this purpose.
#[derive(Debug, Clone, PartialEq, Eq, Hash)]
enum Size {
    Px(f64),
    Em(f64),
    Rem(f64),
    // I think Size should contain Calc.
    // so something that accepts a Size type can accept both calc(15px * 2) and 30px.
    Calc(Calculation),
    // ...
    // what to do with `--var-font-size`?
}

#[derive(Debug, Clone, PartialEq, Eq, Hash)]
enum Calculation {
    Add {
        left: Box<Size>,
        right: Box<Size>,
    }
    // ...
}

It may also make sense to have functions to create Size types than using enum variants directly, so px(1.0) and px(1) can both be accepted over a generic.

Alternatively,
Em(1.04) * 2.0 could result in a Calc and Display as calc(1.04em * 2.0). I'm really not sure what the better API is.

This is opposed to calc!(Em(1.04) * 2.0), where calc! is essentially a DSL (harder macro to write) and outputs a String, calc(1.04em * 2.0)

I am in favour of this syntax than calc! as we don't have to deal with macro edge cases and diagnostics.

In addition,

// Instead of
let size = max!(Vh(30), Px(15), Percent(20));

// We can have
let size = Vh(30)
    .max(Px(15))
    .max(Percent(20));

This does mean that we will be providing many implementations of Add/Sub/Mul/Div traits over most number types and Size. There may be a negative impact on bundle size but as long as dead code elimination are effective in removing them, I am fine with this.

0 replies

simbleau · 2022-07-19T11:13:13Z

simbleau
Jul 19, 2022
Author

Thanks, I like this feedback and it drives a clearer vision.

I'll start working on an external crate and we can talk about integration when the time comes.

P.S. Yes, em was a bad example. Should've gone with a discrete measurement like px or vh.

0 replies

simbleau · 2022-09-10T15:22:02Z

simbleau
Sep 10, 2022
Author

Update: I've began working on this crate: https://github.com/simbleau/cssugar

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CSS values and units #81

{{title}}

Replies: 4 comments

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

CSS values and units #81

simbleau Jul 13, 2022

Replies: 4 comments

simbleau Jul 19, 2022 Author

futursolo Jul 19, 2022 Maintainer

simbleau Jul 19, 2022 Author

simbleau Sep 10, 2022 Author

simbleau
Jul 13, 2022

simbleau
Jul 19, 2022
Author

futursolo
Jul 19, 2022
Maintainer

simbleau
Jul 19, 2022
Author

simbleau
Sep 10, 2022
Author