LP Editor lower-cases camel-cased CSS variable properties inline

Dave_Roberts
Level 10

LP Editor lower-cases camel-cased CSS variable properties inline

I ran into an issue recently with the LP editor that I was able to fix by changing the property of my inline CSS variables but wanted to ask about to see if anyone else has run into this or if this might be a bug w/ the editor that's fixable?

 

In my example I had some HTML that looked something like this:

<head>
 <style> --fooBar {red;}</style>
</head>
<body>
 <div style="background-color: --fooBar"> some text in a red box</div>
</body>

 

Once I clicked the "SAVE" button to add this HTML to the editable area it gets translated to:

<head>
 <style> --fooBar {red;}</style>
</head>
<body>
 <div style="background-color: --foobar"> some text in a red box</div>
</body>

^^ see: --foobar is lower-cased rather than camel-cased in the <div>

 

To work around this, I just changed the CSS in the head to use "foobar" instead of "fooBar".  The only place I noticed this issue was when I was adding the CSS variables inline (to the style="" attribute) and also within an editable area (so maybe something with the TinyMCE piece?). The other variables (not in an editable area) seemed to work just fine and not translate into the lower-cased versions of themselves.

 

It makes sense that "Background-color: red" would be changed to "background-color: red" b/c properties for CSS elements are always lower cased, but this creates at least one issue when you're using camel-cased CSS variables inline within an editable area. 

 

Anyone got any ideas for what might be causing this? Is this just something to "deal with" and code differently because of? Would it be a heavy lift (or too much to ask) for support to address something like this within the system? I'd appreciate any ideas/thoughts you've got on this topic.

 

Thanks,
Dave