computed style v-bind fails to parse block in SSR

[danielroe]

Vue version

v3.4.38 / v3.5.0-rc.1

Link to minimal reproduction

https://play.vuejs.org/#__SSR__eNqNUsFKAzEQ/ZUhJ0WtShVkrYKKoB5qUcFLQLab6TZtNglJdttS+u9OsrWtIMVLSObNy7x5M0t2Z22nqZFlrBewsioPeMs1QE/IJl0AHFpnRF0EaXSCTlusd7rDoKcvnLQBPIbagsp1ecNZ8JwRKnAkNQ6csf5gGf8ocic+pQjjDNIbICwsZtCvqyG64zZErLxWIYPu2VkKrdIZuU8oyzEh/yBf7pBXh9dRd6t0rTosFIIvjEURlcqm/XRonECXwbmdgzdKChiqvJgSH2C8rt6cDKUWB1tBcASc2TlnsQ7ArO1wJy31/CtrlQRFEVSdHZNjhdEjWXYm3mgaSxLDWWEqKxW6VxvHQK5ueucsV8rMXlIsuBrXBhBnjMX0j/jEU+2MLgOHHl2DnG2wkLsSQws/vvdxTvcNWNEaKMreA74hmVWnVUlp97UWJHsnL6l9rqxxQerywz/OA2r/01QUuh01Z7SbD3ta38rtdi4SjxwlF78adPFPMpCATveKrb4Bq+z1Pg==

Steps to reproduce

Turn on SSR with the following component:

<template>
  <div>
    reproduction
  </div>
</template>

<script setup lang="ts">
defineProps({
  cardWidth: {
    type: Number,
    default: 300,
  },
  cardHeight: {
    type: Number,
    default: 500,
  },
});
</script>

<style scoped>
div {
  border: 1px solid black;
  height: v-bind(cardHeight + "px");
  width: v-bind(cardWidth + "px");
}
</style>

What is expected?

I expect the same behaviour as client-side rendering, which renders computed CSS vars:

_useCssVars(_ctx => ({
  "7ba5bd90-cardHeight\ \+\ \"px\"": (__props.cardHeight + "px"),
  "7ba5bd90-cardWidth\ \+\ \"px\"": (__props.cardWidth + "px")
}))

What is actually happening?

A SSR compile error:

SSR compile error: SyntaxError: Error parsing JavaScript expression: Expecting Unicode escape sequence \uXXXX. (2:39)

System Info

No response

Any additional comments?

No response

[edison1105]

a workaround:

v-bind(cardHeight + 'px') // Use single quotes