Proposal: Find alternative to appending units to CSS values

[MartinKavik]

Problem
Automatic appending px to int values are very error prone:

• When I change number type (e.g. i32 => f64) of the variable that represent some CSS value (e.g. "left"), Seed won't add px and CSS will fail silently in runtime.
• It's implicit - I have to know that rule and think about it while I'm writing styles.
• It adds px where it doesn't make sense - e.g. z-index.
• Some CSS properties allows to set both versions (integer with px and integer alone) - e.g. line-height => which version should be used?

Solution

• Remove automatic appending.
• Design a more explicit way to append units. Some quick ideas for inspiration:
  • A helper function: "width" => px(car.width); (implemented in PR 126).
  • A macro/function: "width" => unit!(car.width, "px"); (unit should be typed and we can call it also with enum: "width" => unit!(car.width, Unit::Pixel);.
  • Update original style! macro (if possible): "width" => car.width "px";.

I'll implement it if we agree on something.

[David-OConnor]

Need to think on this. This automatic adding of px is controversial in React for the reason you mention. I think in the majority of cases, the current behavior simplifies code, so perhaps we could address the edge cases individually. Eg don't apply for z-index, line-height etc. Alternatively, maybe getting rid of this behavior as you propose is good to keep things consistent and predictable.

[David-OConnor]

Related

[MartinKavik]

Yeah, I was studying it in the afternoon, I think that only jQuery and React append px.
Nice quote from that issue:

yeah I think the auto px append is a bit of a relic, it probably was inspired by jQuery (tho we'd have check with the old timers on that one..

And there is jQuery issue:

• Deprecate auto-appending px in 3.4.0? jquery/jquery#4009

---

perhaps we could address the edge cases individually. Eg don't apply for z-index, line-height etc.

There is the React's list from its docs.

[David-OConnor]

I think your suggestion of the helper fn px is my fav approach (fine as-is in your PR), along with making a breaking change where implicit px is no longer implicity added.

[David-OConnor]

/// [MDN web docs](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units)
pub enum Unit {
    Cm,
    Em,
    Ex,
    In,
    MM,
    Pc,
    Pt,
    Px,
    Q,
}

impl ToString for Unit {
    fn to_string(&self) -> String {
        match self {
            Unit::Cm => "cm".into(),
            Unit::Em => "em".into(),
            Unit::Ex => "ex".into(),
            Unit::In => "in".into(),
            Unit::MM => "mm".into(),
            Unit::Pc => "pc".into(),
            Unit::Pt => "pt".into(),
            Unit::Px => "px".into(),
            Unit::Q => "q".into(),
        }
    }
}

/// Convert a number to a string with px appended. For use with inline styles.
pub fn unit(number: impl ToString + Copy, unit: Unit) -> String {
    let mut value = number.to_string();
    value.push_str(&unit.to_string());
    value
}

/// Special case of `unit` for the common case of `px`.
pub fn px(number: impl ToString + Copy) -> String {
    unit(number, Unit::Px)
}

[MartinKavik]

I'll try to implement it so we see how it looks in practice.