Cannot use variables within `css!`

[augustebaum]

Hi,

I'm trying to use stylist to manipulate CSS dynamically in my yew Component.

In the view method I'd like something like this:

let background_css = "background-color: #aaaaaa;";  
html! {
    <div id="background" class={ css!(background_css) }>
}

which gives me the following error:

error: unexpected end of input, ScopeQualifier: unexpected end of input
   --> src/main.rs:151:42
    |
151 |             <div id="background" class={ css!(background_css) }>
    |                                          ^^^^^^^^^^^^^^^^^^^^
    |
    = note: this error originates in the macro `css` (in Nightly builds, run with -Z macro-backtrace for more info)

But replacing the variable by its definition works just fine:

html! {
    <div id="background" class={ css!("background-color: #aaaaaa;") }>
}

Can anyone explain what is going on here?

[WorldSEnder]

The css! macro implements a DSL for css, and so it does not expect arbitrary expressions in the place of the string literal (the latter can be parsed at compile time, which is what is happening, the former can't). For more on the supported syntax, read the macros module docs.