`vue-tsc` shows error with css modules + `noPropertyAccessFromIndexSignature`

After vue-tsc v0.33.3, the case below shows error when noPropertyAccessFromIndexSignature is true in tsconfig.

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

<style module>
.foo {
  color: red;
}
</style>

vue-tsc below v0.33.3 shows no error and also volar does not show any error with any version.

Reproduction

https://stackblitz.com/edit/vitejs-vite-g65tbc

Run npm run check (which will run vue-tsc --noEmit)

❯ npm run check
$ vue-tsc --noEmit
App.vue:2:23 - error TS4111: Property 'foo' comes from an index signature, so it must be accessed with ['foo'].

2   <div :class="$style.foo">foo</div>
                        ~~~


Found 1 error in App.vue:2

[johnsoncodehk]

@sapphi-red Thank you for your explanation! But since the work are a bit much, I’ll look at it later. I just change $style type to any for now.

[sapphi-red]

I digged down this a bit.

• css module class names can get from the result of compileStyleAsync. Note that compileStyle cannot be used. But currently getCssClasses requires sync functions it is not possible to use.
• getCssClasses is used to get class names not only for css modules. But compileStyleAsync can only get css module class names.

May be it needs to split getCssClasses into getCssModuleClasses and getCssRawClasses (not sure whether this is a proper name)? and then change getCssModuleClasses to accept async functions.