Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

vue-tsc shows error with css modules + noPropertyAccessFromIndexSignature #1089

Closed
sapphi-red opened this issue Mar 21, 2022 · 5 comments
Closed
Labels
bug Something isn't working

Comments

@sapphi-red
Copy link
Contributor

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 johnsoncodehk added the bug Something isn't working label Mar 21, 2022
@johnsoncodehk
Copy link
Member

To reduce depends for vue-tsc, we don't provide css class parser in vue-tsc, so $style type is Record<string, string>.

https://github.com/johnsoncodehk/volar/blob/b32be70880e5ca5765d23d9085896f7af7b29598/packages/vue-tsc/src/proxy.ts#L42-L43

For vue-language-service, it's resolve by vscode-css-languageservice, and $style type is Record<string, string> & { foo?: string }.

https://github.com/johnsoncodehk/volar/blob/b32be70880e5ca5765d23d9085896f7af7b29598/packages/vue-language-service/src/languageService.ts#L102-L103

This is the reason lead to different behavior.

I will change $style type to any on vue-tsc to avoid all type error, because it's just for intellisense.

@sapphi-red
Copy link
Contributor Author

I see. Thank you for explanation.

I was using this behavior to find wrong class names.

<template>
  <div :class="$style.fooo">foo</div> <!-- typo -->
</template>

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

Would you have plan to collect $style type using @vue/compiler-sfc?
I think this will not increase dependencies since every projects using vue-tsc will have @vue/compiler-sfc in dependency.

Since it is possible to check it using volar, I am ok with changing the type to any for vue-tsc though.

@johnsoncodehk
Copy link
Member

@sapphi-red @volar/vue-typescript already depend on @vue/compiler-sfc.

https://github.com/johnsoncodehk/volar/blob/b32be70880e5ca5765d23d9085896f7af7b29598/packages/vue-typescript/package.json#L23

Could you point out which API for resolve css module class names from @vue/compiler-sfc? Or if you want to send a PR we also welcome.

@sapphi-red
Copy link
Contributor Author

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.

@johnsoncodehk
Copy link
Member

johnsoncodehk commented Mar 21, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants