Template support for scroll usage (`g!...;`)

[kandrelczyk]

Hi,

Maybe it's already possible but I can't find a way to do it. I'm trying to do something like this in Leptos:

    let mut class = "footer-item.to_owned();
    if marked {
        class.push_str("footer-item-marked;");
    }

    view! {
        <div class=class>

since "footer-item" and "footer-item-marked" are not used in "class" they are not parsed and added to output.css. Is there a way to force add scroll even if it's not detected as used? Something like:

    {
      "name": "footer-item-marked",
      "force": true,
      "spells": []
    }

or some notation like g!<spell>; that works with scrolls?

[dmtrshat]

Hi @kandrelczyk ,

Thanks for the suggestion! This is a great idea and will definitely be added to Grimoire CSS soon

[dmtrshat]

@kandrelczyk sorry for the confusion -- I didn’t fully get your point at first.

In this case, you can already use template spells like g!<spell>; — they are always compiled even when used outside of class / className. However, scrolls can’t be used with templates yet, so the only idiomatic solution for now is to add template support for scrolls.

We also can’t explicitly mark a scroll for compilation, because we don’t know the output file -- and we shouldn’t.

[dmtrshat]

@kandrelczyk, this functionality is already implemented in the latest release (v1.7.0)

Summary:

• Enabled using scrolls inside g!…;, e.g. g!complex-card=120px_red_100px;.
• Flattened scroll expansion into real property spells so CSS is generated under the outer templated selector.
• Preserved prefix semantics (md__, {...} focus, hover: effects) by applying them to each expanded spell.
• Reduced clone pressure in the template-flattening path.