CSS property setting syntax does not permit the use of a colon (:) in the assigned value.

[dbolack-ab]

Renderer

v3

Browser

Chrome

Operating System

Windows

What happened?

In writing a how-to I discovered I was unable to assign a string value to a CSS property if it contained a : via the {{}} style setting syntax.

Code

{{footer,--chapterName:"'1:How-to'"}}

Generates

<span class="inline-block footer" style="--chapterName:;">“‘1:How-to’”</span>

Instead of

<span class="inline-block footer" style="--chapterName:‘1:How-to’;”></span>

[dbolack-ab]

The semi-colon is also superfluous.

[5e-Cleric]

Right, we need to encode as a CSS string: https://developer.mozilla.org/en-US/docs/Web/CSS/string

[5e-Cleric]

This also applies to html attributes.

[dbolack-ab]

Right, we need to encode as a CSS string: https://developer.mozilla.org/en-US/docs/Web/CSS/string

I am unable to discern how my examples fail here?

[ericscheid]

(The semicolon being inserted here is expected as a separator of multiple style rules.)

The bug here is in our parsing rules .. the colon is confusing our regex. Similar things happen with an equals =.