Adding CSS is rather straightforward using regular classes (Class Name), but I thought it would be fun to implement a dynamic approach that applies style through a dataset variable called data-style. Just add a CSS string to the value to apply it.
Additionally, there is a second decorator that implements an expression-based route, allowing to apply CSS declarations from a JS object called data-style-exp. The expression needs to point to a JavaScript object or function expression returning such an object.
Both versions are in the example. Hope they help somebody or make sense in some context. It is more of a fun experiment to me at this point, but it allows changing or updating styles just by assigning a dataset attribute either in the IDE or by code. That might be of value to somebody. BTW, it is reactive as it is based on Hype Data Decorator. Meaning, it "watches" the mentioned data-attributes and (re)runs the decorator if they change or get reassigned.
This is cool! I've often wanted to add an arbitrary CSS box in the Identity Inspector (though there of course could be several conflict issues). This looks very easy to apply .
Yes, although given that these are inline styles removing the data-style attribute in the IDE doesn’t reset/restore the original styles again. You can always refresh the IDE by reloading Hype and as you say defining styles that are managed by Hype while animating will be overwritten by Hype. One solution would be to have a special hidden style sheet that adds definitions by applying a class (maybe unique through Hype Element ID and class name). That approach allows easy removal in the IDE or reactive updates, but pushes the “inline” styles one level up the cascade. Meaning local style will still dominate. But maybe that would be a good compromise as one still could use !important to override the inline styles. This would also allow a hassle free CSS field in the IDE realizing your dream. Maybe I’ll write a decorator to test the idea.
.
.