vue-server-renderer: CSS variables get lost in dynamic style attributes

[fieteboerner]

Version

2.6.14

Reproduction link

github.com

Steps to reproduce

1. git clone https://github.com/fieteboerner/broken-vue-server-renderer-demo
2. cd broken-vue-server-renderer-demo
3. npm install
4. node index.js

What is expected?

The SSR node index.js command should print the exact same output as the vue renderer in the browser

<div data-server-rendered="true" style="--works-as-expected-but-not-in-my-convention:1px; --notWorkinAtAll:2; --getsKebapCased:2; --getsKabapCasedToo:1px;">Hello World</div>

What is actually happening?

<div data-server-rendered="true" style="--works-as-expected-but-not-in-my-convention:1px;--gets-kebap-cased:2;--gets-kabap-cased-too:1px;">Hello World</div>

The Variable with the integer value is missing, and the lowerCamelCase Variables are converted to kebap-cased variables.

This breaks the UX of our application because the content is jumping since the missing/malformed Variables are not matching the ones in the actual CSS. After rehydration in the Browser, the correct style-Attributes get rendered, and our Styles take effect.

---

Sidenote

in version 2.5.0 the variable with the numeric value does not get lost. This is the output from version 2.5.0:

<div server-rendered="true" style="--works-as-expected-but-not-in-my-convention:1px;--not-workin-at-all:2;--gets-kebap-cased:2;--gets-kabap-cased-too:1px;">Hello World</div>