Copy CSS as JavaScript (Chrome Canary 98)

[MaxZieb (Loves Hype)]

There is a really neat feature coming our way, given you want to style elements in JS using Hype. It is backed into the upcoming Chrome (and Edge). It allows copying CSS declarations as a JavaScript notation and use them in Hype Functions. Just take a look:

Watch the full announcement here.

[MaxZieb (Loves Hype)]

This news update by the Chrome Dev Team inspired the following:

HypeDataStyle (add inline CSS styles on the fly using a decorator)

[CleanShot 2021-11-14 at 11.45.58@2x] Screenshot of assigning an CSS variable: [CleanShot 2021-11-14 at 10.22.42@2x] 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…