No intellisense when `@use`ing Sass modules

[MilesWellsSVT]

Describe the bug

@useing a Sass module doesn't provide intellisense in Svelte for VS Code.

Reproduction

1. Create a skeleton app with SvelteKit, cd into it, and install dependencies: yarn create svelte sass-intellisense-reproduction && cd sass-intellisense-reproduction && yarn
2. Add Sass as a devDependency: yarn add -D sass
3. Create a Sass partial to import as a module:

// src/styles/_variables.scss

$font-size-base: 80px;

4. Add styles to src/routes/index.svelte:

<!-- src/routes/index.svelte -->
<h1>Welcome to SvelteKit</h1>
<p>
	Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation
</p>

<style lang="scss">
	@use '../styles/variables' as vars;

	:root {
		font-size: vars. // activate intellisense here
	}
</style>

5. Active your VSCode intellisense at the end of the partially written line font-size: vars. to get the behavior seen in the "Describe the Bug" image

Note that the correct usage of Sass modules is still detected and errors are shown. E.g. if you take the above reproduction and comment out the variable in src/styles/_variables.scss, effectively making it an empty module, you'll properly get an error:

And the correct usage (after uncommenting the variable) doesn't throw an error, as expected:

Expected behaviour

I expect to get intellisense of each of the @useed Sass module's members.

System Info

• OS: macOS 12.4
• IDE: VSCode 1.68.1
• Extension: svelte.svelte-vscode v105.17.0

Which package is the issue about?

Svelte for VS Code extension

Additional Information, eg. Screenshots

I may be misunderstanding the "Autocompletions" feature listed, but I assumed that would cover intellisense.

[dummdidumm]

CSS completions are not implemented yet. If it works in regular SCSS files that's likely because of the corresponding vs code extension that makes this work inside SCSS files.

[MilesWellsSVT]

Are there any known workarounds with other extensions? It's not recommended, but I'm curious if anyone has figured it out. I'll tinker a bit with Sass extensions and report back if I find something that behaves.

[MilesWellsSVT]

The vscode-scss extension appears to be unmaintained (author lives in Russia ☹️). There is a PR to add Svelte support. I forked this fork to also fix the double $ problem.

With that, here's my workaround:

1. clone https://github.com/MilesWellsSVT/vscode-scss
2. use vsce to build it locally
3. install the extension manually using the resulting .vsix file.

[ivanhofer]

I just have installed the SomewhatStationery.some-sass extension and it looks promising

[TheFireBlast]

I just have installed the SomewhatStationery.some-sass extension and it looks promising

It seems to work fine unless you @use from scss.prependData, though it looks like if you just add it to one component you can get intellisense everywhere.