Using `css` macro in `yew` component

[augustebaum]

Hi,

Thanks so much for the hard work on this project!

In one of my projects (https://github.com/augustebaum/romodoro) I implement the Component trait from yew, and I'd like to be able to manipulate some CSS attributes dynamically, hence stylist seems like the right way to go. Here is what it looks like:

impl Component for MyComponent {
    type Message = Msg;
    type Properties = ();

    // create and update methods

    fn view(&self, ctx: &Context<Self>) -> Html {
        html! {
            <>
            <div id="background" class={css!("background-color: #dd6000;")}>
            // other divs and stuff
            </>
        }
    }

    // changed, rendered, destroy methods
}

This does not compile, with the following error being displayed:

error[E0277]: the trait bound `Classes: From<StyleSource<'_>>` is not satisfied
   --> src/main.rs:139:9
    |
139 | /         html! {
140 | |             <>
141 | |             <div id="background" class={css!("background-color: #dd6000;")}>
...   |
154 | |             </>
155 | |         }
    | |_________^ the trait `From<StyleSource<'_>>` is not implemented for `Classes`
    |
    = help: the following implementations were found:
              <Classes as From<&'static str>>
              <Classes as From<&Option<T>>>
              <Classes as From<&String>>
              <Classes as From<&[T]>>
            and 4 others
    = note: required because of the requirements on the impl of `Into<Classes>` for `StyleSource<'_>`
    = note: this error originates in the macro `html` (in Nightly builds, run with -Z macro-backtrace for more info)

I cannot make sense of this error: even though I understand what it means that some trait is not implemented, I don't know which method I should implement. How should I go about solving this?

Furthermore, it seems that stylist is designed to work well with yew, e.g. the very first item in the documentation focuses on yew function components. However, I could not find any documentation on how to use it with yew in any other way. Is this intentional?

I'm a beginner in Rust so forgive me if I overlooked some obvious detail. Thanks for your attention.

[augustebaum]

It seems this is a duplicate of https://github.com/futursolo/stylist-rs/issues/86. The solution I found was to use yew in its 0.19.3 version instead of master and I could then use css! after importing it:

use stylist::css;

Can we confirm this is the right way to go?

[WorldSEnder]

You are correct, there is currently no up-to-date version for yew's master branch. IF it existed, it will get updated in this PR: #69 though, but I currently don't have the time to do so. I will try updating that next week or the following.