Inline styles renders empty

[danielo515]

Hey, Thanks for this libray, it is cool to have alternatives to the big frameworks. I found some weird behaviours with the inlise styles though. This never worked (despite it looks very similar to what you show on the docs that works)

hyperHTML.wire()`<div style=${`top:${pos.top}; left:${pos.left};`}>x</div>`;
<div style>​x​</div>​

The style property was being rendered empty:

However, as a workaround this worked perfectly:

 <div class='face-square' style=${ { top:pos.top, left:pos.left } } >x</div>

so it may be recommended on the docs? It is way up on the docs page compared to the partial attributes section.

[WebReflection]

it should be unambiguous, meaning I can check if it's string or not ... not sure why I haven't cough this before, so it looks like a valid bug.

That being said, if pos has only left and top properties, you can as well write:

<div class='face-square' style=${pos}>x</div>

and call it a day, yet I'd like to investigate more about this issue 👍

[WebReflection]

I'm afraid hyperhtml-style already differentiate between objects and strings, so something else might be off in here ...

[WebReflection]

I've just tested this on code pen: https://codepen.io/WebReflection/pen/KKMJNRL?editors=0010

all good, closing until further tests to validate the bug are provided, as I think this isn't actually right.

[WebReflection]

P.S. one thing I can imagine happening in here, is that while passing an object would threat numbers as pixels, if you pass along a number CSS would ignore it.

Have you tried doing this instead?

hyperHTML.wire()`<div style=${`top:${pos.top}px; left:${pos.left}px;`}>x</div>`;

Please note the px suffix, as I think that's your issue.

[danielo515]

Yes, it was the lack of px what made CSS ignore the number. I thought it was hyperHTML processing the number in the wrong way, loosing the ref or whatever. Thanks.