Variable usage checking for css variable injection

[caxerx]

The variable used as css variable inject (vuejs/rfcs#231) will not considered as an used variable and produce a 'declared but its value is never read' error.

Example:

<script setup lang="ts">
const containerHeight = "500px";
</script>

<style scoped>
.container {
  height: v-bind(containerHeight);
}
</style>

The variable containerHeight will cause a error since it only used in the style tag.

[glen-84]

@johnsoncodehk,

Is this supposed to handle string paths?

[johnsoncodehk]

@glen-84 No, I keep string paths as a way to escape diagnosis.

[glen-84]

But then how can I get the variable to show as used?

[johnsoncodehk]

Use v-bind(xxx) instead of v-bind("xxx").

[glen-84]

https://v3.vuejs.org/api/sfc-style.html#state-driven-dynamic-css

The syntax works with <script setup>, and supports JavaScript expressions (must be wrapped in quotes)

[johnsoncodehk]

@glen-84 Thanks to point this out! Will follow up this problem.