Binding to CSS wrong variable name in SSR

[cydrickn]

Version

3.2.31

Reproduction link

sfc.vuejs.org/

Steps to reproduce

create a page with css binding

<script setup>
const banner = `url('https://img.freepik.com/free-photo/hand-painted-watercolor-background-with-sky-clouds-shape_24972-1095.jpg?w=1380')`;
</script>

<template>
    <div class="bannered">
      Test
    </div>
</template>

<style scoped>
.bannered {
  background-image: v-bind(banner);
  height: 100px;
}
</style>

What is expected?

The variable must have --

<div class="bannered" style="--3206028a-banner:url(&#39;/images/company-bg.jpg&#39;);" data-v-3206028a></div><!--]--></div>

What is actually happening?

What happen here is the variable name has no --

<div class="bannered" style="3206028a-banner:url(&#39;/images/company-bg.jpg&#39;);" data-v-3206028a></div><!--]--></div>

---

So far this issue is not a blocker since in few, milliseconds or seconds once it rendered it will automatically updated to correct name.

But still we should consider to correct it on server side rendering.
Because it will delay the style to be corrected, example the background image, it will delay a few seconds to be display even the image was already cached.

[ygj6]

duplicate of #5443