Binding to CSS wrong variable name in SSR

[cydrickn]

Environment

• Operating System: Windows_NT
• Node Version: v16.13.1
• Nuxt Version: 3.0.0-27420403.16e2a54
• Package Manager: npm@8.1.2
• Bundler: Vite
• User Config: privateRuntimeConfig, css, buildModules, tailwindcss, components, serverMiddleware, modules
• Runtime Modules: -
• Build Modules: @nuxtjs/tailwindcss@5.0.0-4

Reproduction

create a page with css binding

<script setup>
const banner = `url('/images/company-bg.jpg')`;
</script>

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

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

Describe the bug

The issue for this is when its loaded from the first load (ssr)

it will rendered as

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

It should be

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

But after a few seconds the style will be updated to the correct one but that will be on client side.

Additional context

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.

Logs

No response

[danielroe]

Would you raise this at https://github.com/vuejs/core ? 🙏

[cydrickn]

Already raise to vuejs/core

vuejs/core#5491

will track this then

[danielroe]

This is now resolved: vuejs/core#5443