Unescaped character in CSS variable name when using css v-bind() during SSR dev

[loicpennequin]

Vue version

3.2.47

Link to minimal reproduction

https://stackblitz.com/edit/nuxt-starter-kqlpac?file=app.vue

Steps to reproduce

Load the application.

What is expected?

The paragraph is always red

What is actually happening?

The paragraph is unstyled (no background color) and becomes red when hydration occurs.

System Info

No response

Any additional comments?

The problem comes from the fact that the v-bind expression contains a . character which is not being escaped during SSR.
the CSS variable names is --938b83b0-style.color and becomes --938b83b0-style\.color during hydration

[edison1105]

This only happens in SSR development mode, and the root cause is:

When \ appears in the key of an object, it will be lost. Therefore, it needs to be escaped again.
The complete fix requires merging #6979 and #7861.