How to add Bonsai CSS style tags

[markusgritsch]

Bonsai CSS uses style tags of the form style="--col: 2". However, if I try to set such a style with Lona, it does not appear in the rendered page. Trying to set style='color: black' gets included, but the Bonsai CSS style does not work.

[fscherf]

Hi @markusgritsch!

Interesting. Can you provide a snippet of example code? Bonsai CSS is new to me, and to be honest: i've never seen this weird css notation before

[markusgritsch]

The -- notation is used for custom properties and can be accessed as CSS variables.

[markusgritsch]

The attached Lona script renders like this:

But when I manually add the missing style tag in the developer tools, the desired output is this:

bonsai-test.zip

[fscherf]

@markusgritsch: Took me a while to understand how Bonsai.css works, and why it won't work in Lona, but it is actually a pretty simple fix.
Lona uses object assignments to set styles (element.style[key] = value), which leads to an encoding problem, since some helpers of Bonsai.css start with two dashes. When the code is changed to use element.style.setProperty, all styles seem to work.

I pushed a patch to #374. Could you verify whether this fixes your problem?

[markusgritsch]

Yes, this works. Great!

[fscherf]

Great! Thanks for reporting, and testing :) I will make a proper fix for both clients and add a test. I also will promote this discussion to a issue, flagged as bug.

[markusgritsch]

-> Issue #375