[SSR] Hydration error using v-bind in scoepd styles

[TheAlexLichter]

Vue version

3.4.15

Link to minimal reproduction

https://stackblitz.com/edit/vue-issues-10259

Steps to reproduce

<script setup lang="ts">
const test = 100;
const test2 = 'red';
</script>

<template>
  <div class="darn-it" style="padding: 100px" />
</template>

<style scoped>
.darn-it {
  width: calc(v-bind(test) * 1px);
  height: calc(v-bind(test) * 1px);
  background-color: v-bind(test2);
}
</style>

What is expected?

No hydration error

What is actually happening?

 [Vue warn]: Hydration style mismatch on 
<div class="darn-it" style="padding:100px;--7a7a37b1…0;--7a7a37b1-test2:red;" data-v-7a7a37b1=""> 
  - rendered on server: style="padding:100px;--7a7a37b1-test:100;--7a7a37b1-test2:red;"
  - expected on client: style="padding:100px;"
  Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.
  You should fix the source of the mismatch. 
  at <App>

System Info

StackBlitz env

Any additional comments?

From nuxt/nuxt#25588

[yangxiuxiu1115]

Looks like a duplicate of #10215.

[TheAlexLichter]

Good point! Closing here in favor of #10215