can not use useCssVars

[max512060925]

Describe the bug

when I use @vue-macros/reactivity-transform
useCssVars not effective

<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>

console warn useCssVars is called without current active component instance

import { defineConfig } from 'vite'
import ReactivityTransform from '@vue-macros/reactivity-transform/vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/

export default defineConfig({
  plugins: [ReactivityTransform(), vue()],
  server: {
    host: '0.0.0.0',
    port: 9900,
    open: true,
    hmr: true,
  },
})

Reproduction

0.2.2

System Info

Mac OS 13.2.1 Chrome 109.0.5414.119

Used Package Manager

yarn

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

[sxzz]

It's the bug from Vue core.

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

[max512060925]

vuejs/core#7759

[sxzz]

Let's track the vue-core issue instead.