Support multiple class declarations in a single component

[chanceeakin]

Lukas,

Love the work you've done thus far with porting CSS in JS to CSS in Rust!

Noticed that there's a limitation of one class to one component (specifically with Yew). It'd be great if this lib could support multiple classes per file. Ideally, allowing css_in_rust::Style::create Vec<String> or the like in addition to only strings.

Would love to connect and help build out this library!

[vskh]

Hi chanceeakin,

I am also user of this lib and was just passing by when saw your issue. I wonder if there is specific usecase that you have in mind for this?

Right now it is possible to add substyles right in definition of Style, they all will be wrapped into an autoprefixed root style (thus scoped) and can be handy to tweak inner parts of the component.

Here is how I use it:

let style = Style::create(
            "Component",
            r#"
                width: 100%;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;

                .main {
                    /* ... */
                }

                .side {
                    /* ... */
                }
            "#)
            .unwrap();

The view can look like this:

html! {
        <div class=self.style.clone()>
            <div class="side">{"left"}</div>
            <div class="main">{"center"}</div>
            <div class="side">{"right"}</div>
        </div>
    }

Resulting stylesheet would have classes like this:

.Component-4594200420215021072 {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.Component-4594200420215021072 .main  {
                    /* ... */
}
.Component-4594200420215021072 .side  {
                    /* ... */
}

Let me know if that would help in your case?

[chanceeakin]

That would totally help. For some reason, I missed that in the documentation. Thank you, @vskh!

My suggestion would be a breaking change, but I wonder if allowing multiple components would allow logic similar to nested selectors: https://cssinjs.org/jss-plugin-nested?v=v10.5.1.

I can move this out of issues or close, as y'all or the maintainers would prefer. :)