Vue version

3.2.47

Link to minimal reproduction

https://sfc.vuejs.org/#eNqNUNFqwzAM/BXhMdJCE3evWVrYfxiGm6iJu8Q2lpMySv59clO2ssHok+XT6U66i3jzvphGFKWoqA7GRyCMo4de23anRCQl9mbwLkS4QMAjaIL39M5wDG6AjIezV2WVrZ2lCAddf7TBjbaB3ZW4ygI22VrZSi4Gey4jDr7XEbkGqBozQd1romSIFNkyPZXkRmLLO3pF8bNPxZP2Hi5p/mya2JXwst0+8yIAHZq2i9/ArGyR5B4iw90BJUz5wdhm9QOtFz0+5baF2IglnXzQvjiRs5zk1UjdGhxguVgnjNNKfyW6GD2VUtKxTvmfqHChlVwVYbTRDFggDfkhuDNhYGElNncaksEJQx7QNhgw/Kf5i/pHN8nyTbOYvwC8erQ4

Steps to reproduce

<template>
  <div class="test">test</div>
</template>
<script setup>
let background = $ref('red')
</script>
<style>
#app {
  width: 100%;
  height: 100%;
}
.test {
  width: 100%;
  height: 100%;
  background: v-bind(background);
}
</style>

What is expected?

useCssVars work well

What is actually happening?

useCssVars not effective

System Info

No response

Any additional comments?

No response

This may be a compiler bug