Using useCssModule return value in <style module>

[seahindeniz]

Hi, I'm trying to use CSS modules with CSS Grid but I'm stuck with the generated classnames. Using it from a css module inside of itself creates a problem.
Here's an example, it might be more clearer to understand

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

const modules = useCssModule();
</script>

<template>
    <div :class="$style.grid">
        <div :class="$style.item"></div>
    </div>
</template>

<style module lang="scss">
.grid {
    display: grid;
}

.item {
    grid-area: v-bind(modules.item);
    // or
    // grid-area: v-bind($style.item);
}
</style>

Is there any solution?

[seahindeniz]

Thanks to @skirtles-code and their answers on Discord, I have found the solution

There was a slightly different syntax that I've missed on docs. we need to wrap property path with quotes as mentioned in here https://vuejs.org/api/sfc-css-features.html#v-bind-in-css

.item {
    grid-area: v-bind('modules.item');
    // or
    // grid-area: v-bind('$style.item'); // works as the same
}

And the final version is

<template>
    <div :class="$style.grid">
        <div :class="$style.item"></div>
    </div>
</template>

<style module lang="scss">
.grid {
    display: grid;
}

.item {
   grid-area: v-bind('$style.item');
}
</style>