futursolo / stylist-rs

A CSS-in-Rust styling solution for WebAssembly Applications
https://crates.io/crates/stylist
MIT License
366 stars 22 forks source link

Proposal: Allow prefixes #61

Closed Madoshakalaka closed 2 years ago

Madoshakalaka commented 2 years ago

It's a routine to adjust CSS rules in the browser's developer tools and edit them back in code.

I find it hard to locate where the code is with all the same looking stylist-hash class names.

image

I used to work with a @WorldSEnder branch a lot, where you can specify prefixes for the class names. I would prefix every class name with the component name and I enjoyed doing it so much:

image

Can we have the option for stylist to prefix the names? That's would be so helpful for tweaking in development.

futursolo commented 2 years ago

Having a different class name means a style tag needs to be inserted. The performance impact can be big (can be 1000x slower than cached tags) so we cannot have this in release mode.

It might be handy to have this in dev mode (at the moment).

To my understanding, this issue might be more related to how to find out which element belongs to which Component than which style class is applied to it. This might be better solved with Yew Developer Tools (eventually).

WorldSEnder commented 2 years ago

Note that it is possible to provide a prefix on an per-app basis by using a ManagerProvider. Do not insert them all over your application, performance will degrade heavily.

<stylist::yew::ManagerProvider manager={..your configured manager with prefix}>
    <App />
</stylist::yew::ManagerProvider>

To my understanding you want to tweak this on a per-component-basis? Here indeed, the performance trade-off is to be able to reuse the same style sheet, the prefix shouldn't matter. Note the "naive" middle ground of giving the prefix as a hint but only using it when such a style doesn't already exist would be even worse, because the prefix you see in the html would then be misleading.

@futursolo perhaps we can make the Into<Classes>: Style impl emit multiple classes, one binding the style sheet (as right now) and one that identifies the place where the Style was instantiated?