More powerful CSS reactivity syntax

[Houski]

Change the current syntax:

<p class="text-center mb-2 mt-2 font-bold color-red-700 dark:color-white"
   class:hidden=move || count() > 2
>

To something like (psuedo-code):

<p class="text-center mb-2 mt-2 font-bold color-red-700 dark:color-white"
   class:(remove: hidden add: color-blue mt-4)=move || count() > 2
>

[gbj]

To something like (psuedo-code):

<p class="text-center mb-2 mt-2 font-bold color-red-700 dark:color-white"
   class:(remove: hidden add: color-blue mt-4)=move || count() > 2
>

Yeah so we definitely won't make the breaking change of removing the current syntax. We can add something. I had trouble figuring out how to read your example at first, but I think our macro parser could support something like

<p class="text-center mb-2 mt-2 font-bold color-red-700 dark:color-white"
    class:hidden=move || count() <= 2
    class=(["color-blue", "mt-4"], move || count() > 2)
>

with the new syntax being that last class=(["color-blue", "mt-4"]...)

I'm pretty cautious about adding new syntax in the view macro itself to do things that can be done another way. For example, this particular case is pretty easily written using normal Rust conditional logic in a derived signal as

let class = move || {
  format!(
    "text-center mb-2 mt-2 font-bold color-red-700 dark:color-white {}",
    if count() > 2 {
      "color-blue mt-4"
    } else {
      "hidden"
    }
  )
};
view! { cx, 
  <p class=class></p>
}

[Houski]

I'm just throwing these up here for discussion - these are some other proposed syntax structure ideas that people put forward on the Leptos Discord to handle multiple class concatenation with signals:

<div class=("first-class", show_first_class) class=("last-class", show_last_class) />

<p class=[("dark", is_dark), "text-4xl other classes"] />

<p class:[one two three]=is_number>