SSR hydration errors when combining inline styles with v-bind() in CSS

adamdehaven commented 2 days ago

Vue version

3.5.13

Link to minimal reproduction

Reproduction playground

Steps to reproduce

PageBlock.vue

Ensure SSR is enabled in the reproduction
In PageBlock.vue we initialize two props, color and backgroundColor
The color prop is bound to the element via inline :style
Use v-bind in the style block to set the background-color property, set to the value of the backgroundColor prop

Notice the hydration error in the console shown below.

- rendered on server: style="color:#000;"
- expected on client: style="color:#000;"

Also notice that the generated CSS Custom Property for the backgroundColor value is not exposed in the hydration error (meaning I would expect to see --a4f2eed6-backgroundColor: lightgray; in the hydration error as well)

What is expected?

No hydration errors should be present when utilizing both inline style bindings and v-bind in CSS.

The inline style properties should be resolved before render to prevent hydration errors to produce the final HTML, with both the inline color style as well as the generated CSS custom property binding:

<div class="block" style="color: rgb(0, 0, 0); --a4f2eed6-backgroundColor: lightgray;" data-v-7ba5bd90=""
  data-v-a4f2eed6="">
  <div data-v-7ba5bd90="">Block One</div>
  <div class="block" style="color:#000;" data-v-a4f2eed6="">
    <div data-v-7ba5bd90="">Block Two</div>
  </div>
</div>

What is actually happening?

The inline style binding that is produced in the HTML appears to differ between server and client when the inline styles are merged with the v-bind in CSS rules.

System Info

No response

Any additional comments?

The interesting piece is not only is the hydration error occurring, but comparing the output diff between server and client appears to show the actual rendered content is identical in this particular case.

- rendered on server: style="color:#000;"
- expected on client: style="color:#000;"

In addition, the CSS custom property binding is not shown here in the client render, meaning I would expect to see --a4f2eed6-backgroundColor: lightgray; on the client line above.

In more complex examples, the output appears to actually be different depending on how the inline styles are computed.

(This issue is similar to, but different, from https://github.com/vuejs/core/issues/12434)

th1m0 commented 2 days ago

I was able to reproduce this issue in just the App.vue with the following code:

<template>
  <p class="block" :style="{ color: '#000' }">
    test
  </p>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const backGroundColor = ref(null)
</script>

<style scoped>
.block {
  background-color: v-bind('backgroundColor');
}
</style>

Removing the style block fixes the hydration mismatch or removing the inline :style fixes the hydration mismatch. Hope this helps for anyone that will be fixing this.

adamdehaven commented 2 days ago

Thanks @th1m0 - here's a reproduction utilizing the simplified code:

Simplified reproduction

vuejs / core