Opaque error message for weird CSS input

[CorvusPrudens]

I'm working with tailwind in a project. In a moment of weakness, I wrote the following silly code (simplified for clarity):

#[component]
pub fn Display() -> impl Intoview {
    let class = format!("w-[{}] h-[{}]", 10, 10);

    view! {
        <div class=class />
    }
}

Now, this will not produce the desired effect, but that's somewhat beside the point. The produced CSS that I direct cargo-leptos to looks like:

.h-\[\{\}\] {
  height: {};
}

.w-\[\{\}\] {
  width: {};
}

This seems to trip cargo-leptos up, and cargo-leptos watch fails at the end of the WASM step with the message:

Error: Unexpected token CurlyBracketBlock at :<line>:11

Now, I don't know whether this is actually directly related to what cargo-leptos is doing or if it's some dependency or other tool, but the error is pretty opaque and can be quite confusing. It's not even clear what file produces this error!

I'm also not sure if this is even valid CSS, so this might all be much ado about nothing.

[DanielJoyce]

So cargo leptos generates that CSS, or did you write that CSS and expect it to work?

It's not exactly clear from your explanation.

[DanielJoyce]

So first off, format is going to produce a class string of w-[10] h-[10] as the {} get replaced with the values

Your css rule will not work

However, this does:

.w-\[10\].h-\[10\] {
    border: 2px solid black;
}

{} is not a valid value for width, and format!() won't subst the values in css anyways.

[CorvusPrudens]

The output I provided is produced by Tailwind after analyzing the provided Rust code. I'm aware the CSS won't actually do anything, but as I mentioned, that's not really relevant here. The problem is that this series of characters in a CSS file causes cargo-leptos to fail and produce a hard to track down error message. In other words, the project will not build at all.

As long as Tailwind itself doesn't fail, it's my opinion that cargo-leptos should handle it without crashing (or at least produce a better error message).