Skip to content

compilerOptions.plugins of tsconfig.json ignored?  #1826

Closed as not planned
Closed as not planned
@aradalvand

Description

@aradalvand

Describe the bug

I'm using SvelteKit and trying to use Vite's CSS Module feature, and it works pretty well; the only thing that's lacking that would make it ideal is type-safety.

For that, I tried to use "typescript-plugin-css-modules", which requires you to add a compilerOptions.plugins to your tsconfig.json file. Here's what mine looks like (it's the default tsconfig.json file in SvelteKit templates + a plugins array pointing to "typescript-plugin-css-modules"):

{
    "extends": "./.svelte-kit/tsconfig.json",
    "compilerOptions": {
        "allowJs": true,
        "checkJs": true,
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "resolveJsonModule": true,
        "skipLibCheck": true,
        "sourceMap": true,
        "plugins": [{ "name": "typescript-plugin-css-modules" }]
    }
}

Now, this seems to work perfectly in .ts files, and I get the right typing:

image

In .svelte files, however, it doesn't — it seems to be ignoring tsconfig.json's plugins, and just falling back to the types declared by Vite.

image

Another possible explanation is that the Svelte language server is using VS Code's TypeScript version, as opposed to the workspace's TypeScript version — which is what "typescript-plugin-css-modules" needs (see this). The extension could provide an option to change that, like Volar does.
But I'm not familiar with the inner workings of the codebase to be able to tell. So, I'd appreciate some help. Thanks.

System Info

  • OS: Ubuntu 22.04
  • IDE: VSCode

Which package is the issue about?

svelte-language-server

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions