No intellisense for content of namespace when using `@use`

[tbusser-io]

In which editor is this a problem?

Visual Studio Code

Describe the bug

I'm using the following code and extension:

• VSCode v1.93.1 (OSX)
• Somesass v4.0.1

Steps to reproduce: I have a monorepo with PNPM to manage the packages. In this monorepo I have a single app (@app/demo) which is the default Vue3 scaffolded app. I also have a package where I want to keep some SCSS mixins and functions (@packages/shared-styles) so I can share these between apps.

In VSCode I have a workspace file so I can easily work with my colleagues and we can share the same settings. For the workspace I have disabled the builtin VSCode CSS Language Features extension. In the workspace settings file I have the following settings for somesass:

{
    "settings": {
        "somesass.scss.completion.suggestFromUseOnly": true,
        "somesass.workspace.loadPaths": [
            "./code/@packages/shared-styles/**/*"
        ]
    }
}

This monorepo is in the reproducible example.

In the @package/shared-styles package I have a single mixin: tools/mixins/_truncate.scss. I want to use this mixin in my demo/src/components/HelloWorld.vue component. In the stylesheet I do @use 'tools/mixins and in the style for the h3 element I want to include @include mixins.truncate. This is where I run into problems, I don't get any intellisense on the mixins namespace. There are no suggestions.

Any help on getting this up and running would be much appreciated. I'm pretty new to the extension and I am not sure if this is a bug or if I'm doing something wrong with the configuration.

What's the expected result?

I would expect intellisense to provide a suggestion for the truncate mixin based on the configuration settings I've set.

Link to minimal reproducible example

https://github.com/tbusser-io/somesass-intellisense-bug

Participation

• [X] I am willing to submit a pull request for this issue.

[wkillerud]

Hi @tbusser-io, thank you for sharing a repo

A few things:

• There's a bug in _index.scss, this line needs to be @forward 'truncate';, otherwise truncate is only available inside of _index.scss.
• If you turn off the built in language extension you probably want to add all of these settings to the workspace as well.
• I think loadPaths doesn't work across two different workspace folders.

You have a few options here. I use fremtind/jokul as a testbed (I used to work there), and it's also a pnpm monorepo.

The way it's set up there each package is accessed through node_modules instead of with loadPaths. Your @use could look something like @use "@workspace/shared-styles/tools/mixins"; and you wouldn't have to configure loadPaths at all.

You can use loadPaths if you'd like, but you'll have to use only one workspace folder. The reason is that language server extensions are scoped per workspace folder. So in your example you're actually running two instances of Some Sass – one for the app and one for the packages folders. The two can't share information.

{
  "folders": [
    {
      "path": "./code/"
    }
  ],
  "settings": {
    "somesass.scss.completion.suggestFromUseOnly": true,
    "somesass.workspace.loadPaths": ["./@packages/shared-styles/"],

    "somesass.css.codeAction.enabled": true,
    "somesass.css.colors.enabled": true,
    "somesass.css.completion.enabled": true,
    "somesass.css.definition.enabled": true,
    "somesass.css.diagnostics.enabled": true,
    "somesass.css.foldingRanges.enabled": true,
    "somesass.css.highlights.enabled": true,
    "somesass.css.hover.enabled": true,
    "somesass.css.links.enabled": true,
    "somesass.css.references.enabled": true,
    "somesass.css.rename.enabled": true,
    "somesass.css.selectionRanges.enabled": true,
    "somesass.css.signatureHelp.enabled": true,
    "somesass.css.workspaceSymbol.enabled": true,

    "somesass.scss.codeAction.enabled": true,
    "somesass.scss.colors.enabled": true,
    "somesass.scss.colors.includeFromCurrentDocument": true,
    "somesass.scss.completion.enabled": true,
    "somesass.scss.completion.css": true,
    "somesass.scss.completion.includeFromCurrentDocument": true,
    "somesass.scss.definition.enabled": true,
    "somesass.scss.diagnostics.enabled": true,
    "somesass.scss.diagnostics.lint.enabled": true,
    "somesass.scss.foldingRanges.enabled": true,
    "somesass.scss.highlights.enabled": true,
    "somesass.scss.hover.enabled": true,
    "somesass.scss.hover.documentation": true,
    "somesass.scss.links.enabled": true,
    "somesass.scss.references.enabled": true,
    "somesass.scss.rename.enabled": true,
    "somesass.scss.selectionRanges.enabled": true,
    "somesass.scss.signatureHelp.enabled": true,
    "somesass.scss.workspaceSymbol.enabled": true
  }
}