format! boilerplate reduction for interpolated values

[kirillsemyonkin]

As an obvious use-case, whenever CSS units are involved, you have to concatenate a value and a unit:

// format from outside
let width = 10;
let width_in_px = format!("{}px", width);
let style = use_style! {
    width: ${width_in_px};
};

// alternatively, format directly inside
let width = 10;
let style = use_style! { // or `use_style!(...)`, I'm never consistent with it for some reason
    width: ${ format!("{}px", width) };
};

The alternative part of the code above is more interesting, because it is what this discussion is about: what if the formatting was a part of the stylist (inline) syntax? Here is an example of the idea:

let width = 10;
let style = use_style! { // or `use_style!(...)`, I'm never consistent with it for some reason
    width: ${"{}px", width};
};

The reason this would work is because all CSS that stylist takes in seems to be a bunch of concatenated strings. This is the reason why writing ${"..."} appears to work in 100% of all places (not sure about closing blocks using interpolation, ... { ... ${"}"}).

• Is comma syntax at the root level of interpolators used currently in any way? A quick check seems to give unexpected token.
• Would there be any performance penalties for using format! always? Maybe an optimization for single values is necessary (although, I heard format! already has a short-circuit for single argument)? Actually, I think writing a single value should be parsed as if that value was passed in directly, because otherwise something simple like ${width_in_px} from the first example would break.

[futursolo]

We can only pick one between ${expr} or ${"fmt_literal", expr, expr, ...}.

The primary reason being that ${fmt_literal} cannot be interpreted consistently.

Rust actually explained this with their own panic! macro and had to make a breaking change to fix it.

See: https://doc.rust-lang.org/edition-guide/rust-2021/panic-macro-consistency.html

However, for this specific case, you can write it as:

let style = use_style! {
    width: ${width}px;
};

[kirillsemyonkin]

I tried it, and it seems to glue the parts. This is great, because I can now type a more usable ${3}em instead of the cumbersome ${"3em"}.

But, I have a more complex use-case: ${ format!("calc(100% - {}em)", (*selected + 1) * 3) }. When I try to write it as calc(100% - ${ (*selected + 1) * 3 }em), it gets turned into something like calc(100%-3em), which the browser (Chrome) does not accept due to missing spaces. I'd imagine it would be fixable with Span updates, but for the time being, I guess I will have to tough it out, unless you have a better solution.

[futursolo]

I think you can write width: calc(100%${" - "}${(*selected + 1) * 3}em).

To improve readability, you can move the calculation out of the macro:

let padding = (*selected + 1) * 3;

use_style!(
    width: calc(100%${" - "}${padding}em);
);

[kirillsemyonkin]

Readability doesn't really bother me, but the ${" - "} kinda does bother me now. In fact, your previous solution you showed me made me realize that going without format! and double quotes is possible, and here they are being introduced again, in a kind of awkward way as well (format! seems to be even more pleasant to look at than ${" - "}). I'm just going to wait for whitespace to be added to macros I guess. I will close the discussion then.