wkillerud / some-sass Goto Github PK

• VS Code version: current
• Extension version: current
• Operating system: win 11

Reproducible Case:

When the "Some Sass" extension is installed, ctrl-clicking on a mixin call (or other symbol definition, not just scss) always opens the peek pop-up, even when editor.definitionLinkOpensInPeek is unset.

Steps to Reproduce:

1. Enable "Some Sass"
2. Disable editor.definitionLinkOpensInPeek
3. Ctrl-click any symbol that can be opened in definition (e.g. by selecting the "go to definition" command).
4. Expected: go to symbol definition. Actual: symbol peek pop-up

When you disable the extension, ctrl-click will go directly to the symbol definition.

• VS Code version: 1.87.1
• Extension version: 3.1.6
• no other extensions enabled
• settings: "somesass.suggestFromUseOnly": true

When using a file that has private variables (prefixed with - or _), it will also suggests those. It only should suggest public variables however, as using private variables will cause compile errors. See official docs on private variables.

About VS Code
Version: 1.91.1 (Universal)
Commit: f1e16e1e6214d7c44d078b1f0607b2388f29d729
Date: 2024-07-09T22:07:54.982Z
Electron: 29.4.0
ElectronBuildId: 9728852
Chromium: 122.0.6261.156
Node.js: 20.9.0
V8: 12.2.281.27-electron.0
OS: Darwin arm64 23.5.0

• Extension version: 3.1.11
• Operating system: macOS

Reproducible Case: MenSeb/some-sass-bug@48d7175

Steps to Reproduce:

1. Open index.scss
2. On line 6 ($test: "#{test.hello()}") the interpolation should show code completions once you finish typing "#{.

Investigating in #186, it seems like VS Code does not send onCompletion requests even if we last responded with isIncomplete = true set on the result.

Hi,

Thanks a lot for this extension, I find it very useful when working with SASS files!

I found 2 issues/PRs that seem to have fixed the problem, it might be an error on my side...

• VS Code version: 1.91.1
• Extension version: 3.1.8
• Operating system: Windows

Reproducible Case:

https://github.com/MenSeb/some-sass-bug

Requirements:

Install and activate the Some Sass extension.

run:

npm install

Steps to Reproduce:

1. Open the Some Sass output in VSCode
2. Open the index.scss file in the repo
3. Look at the output error
4. You can also trigger the error by commenting and uncommenting the line:

@use 'pkg:sass-true' as *;

The error:

[Error - 7:29:00 PM] Request textDocument/documentLink failed.
  Message: Request textDocument/documentLink failed with message: Cannot read properties of undefined (reading 'sass')
  Code: -32603

Nothing works after that, for example, I am no longer able to see the autocomplete suggestion from my other imported module test.scss using @use and I can't see any information on hover.

// src/index.scss

@use 'pkg:sass-true' as *;
@use './test' as test;

$message: test.hello();

@debug $message;

// src/test.scss

@function hello($name: 'World') {
    @return 'Hello #{$name}!';
}

When creating this minimal repo example, I saw that typing on a line with @debug or @error would not show autocomplete suggestions, is this normal?

// src/index.scss

@use './test' as test;

$message: test. // it will show both suggestions here

@debug test. // it won't show anything here
@error test. // it won't show anything here

• VS Code version: 1.85.2 (Universal)
• Extension version: v2.14.6
• Operating system: macOS 14.2.1

When selecting variables from autocomplete suggestions after pressing '$' in <style lang="scss"> tag of Svelte components, extension removes the '$' sign before variable name

Steps to Reproduce:

1. Open .svelte file
2. Open <style lang="scss"> tag
3. Press $
4. Select a variable from dropdown

• VS Code Version: 1.78.1
• SCSS IntelliSense Version: latest published by 29.4.2023 (idk version number, this is what shows in vscode ext readme)
• Operating System: win10

the issue:

• autocomplete for reference selectors only occurs after manually triggering it with ctrl+space. ie,
• if you start typing %chat and a placeholder selector %chatSearch is referenced
  • you do not get autocomplete
  • even after manually triggering the autocomplete with ctrl + space, it has no suggestions

• only way to get autocomplete is typing %, then hitting ctrl + space,

related issue 2:

in this autocomplete (that was manually triggered), each selector is listed twice:

(show more does not do anything).
i thought this might be caused by some other sass extension, but i could not find any other sass/scss extension that supported placeholder selectors (nor did this work before your placeholderSelector update)

repro repo:

https://github.com/KraXen72/rosebox/tree/discord-rewrite-v, open the discord folder in vs code

Hello,

I am not sure if this is related to a specific package but I was able to reproduce the bug with sass-true since it exists in the repository.

There seems to have suggestions of the exports from sass-true even if it was not exported with the @use statement.

• VS Code version: 1.92.1
• Extension version: 3.5.0
• Operating system: Windows

Reproducible Case:

https://github.com/MenSeb/some-sass-bug/tree/main/src/bug-sass-true

Steps to Reproduce:

// _modules.scss
@forward "sass:color" as color-*;
@forward "sass:string" as string-*;

// index.scss
@use './modules' as *;

// It seems that the 'sass-true' package gets exposed.
// The packages color and string are correctly shown 
// under their prefix color- and string- from the @use.

// This works correctly and is shown in suggestions
@debug color-blue(#fff);
@debug string-unique-id();

// This is undefined and should not be shown in suggestions
@debug $catch-errors;

• VS Code version: -
• Extension version: -
• Operating system: WSL2 NixOS

Reproducible Case:
The LSP does not produce any intellisense, completions or hovering documentations when installed via Mason in Neovim

Steps to Reproduce:

1. Install somesass_ls via Mason
2. Restart Neovim
3. Create a test.scss file
4. Type @, no suggestions shown. (expected a list of At-Rules shown)

• VS Code version: 1.92.2
• Extension version: 3.6.3
• Operating system: Windows

Reproducible Case:

https://github.com/MenSeb/some-sass-bug/tree/main/src/some-sass-hover

Steps to Reproduce:

// index.scss

@use 'sass:math';
@use '../modules' as *;
@use '../utils' as *;

/// Dummy function
/// @param {Any} $value - the value to test
/// @return {Any} - the `$value`
@function dummy($value) {
    @return $value;
}

// This shows the information on hover
@debug math.compatible(1, 2);

// This shows the information on hover
@debug test(10);

// This shows the information on hover
@debug dummy(10);

// This does not show the information on hover
@debug comparable($number1: 1, $number2: 2);

// This does not show the information on hover
@debug color-blue(#fff);

// This shows the information on hover
@debug color.blue(#fff);

There seems to be some inconsistency in displaying information on hover.

It does not work for SASS global aliases and anything that was forwarded with prefix.

Hey, thanks for this language server, very much needed!

I will be maintaining the aur package for arch, and thinking about contributing to helix editor in terms of documenting on the wiki, and seeing about having it as one of the default lsp's for scss.

I have been unable to get the settings to work with Helix, I am using the aur package (npm 1.5.2). I know the lsp is working, as I have disabled vscode-css-language-server, and I'm able to get completion for modules (finally!!).

In particular I cannot get the following settings to work:

• somesass.suggestFromUseOnly
• somesass.loadPaths

I have tried various methods to configure, last syntax (not too familiar with toml) is this:

[language-server.some-sass-lsp]
command="some-sass-language-server"
args = ["--stdio"]

[language-server.some-sass-lsp.config]
somesass = { suggestFromUseOnly = true, loadPaths = ["test/"]}

I also tried variations such as:

[language-server.some-sass-lsp.config.somesass]
suggestFromUseOnly = true
loadPaths = ["test/"]

and

[[language-server.some-sass-lsp.config.somesass]]
suggestFromUseOnly = true
loadPaths = ["test/"]

For reference here are all the language server configs that come with Helix out-of-the-box: https://github.com/helix-editor/helix/blob/master/languages.toml

I have several language servers configured, and only efm-language-server with config settings -- and all works well. From my understanding the suggestFromUseOnly would avoid me getting map-get as a suggestion, if I start typing map (unless I have added it with a @use.

Lastly, and a little unrelated:

• In your documentation, why do you mention this is meant to work with vscode-css-lsp?

Thanks much in advance!

• when typing %, you have to hit Ctrl + Space to manually bring up autocompletion, whereas typing . (for class) already pops up the autocompletion. not sure if this is something you can control from the extension or it's user settings based
  • however, typing anything after the % gives completions, so it's pretty good
• only defined placeholders get autocompleted - a pretty common use for placeholders (atleast in discord css theming) is to assign a bunch of non-existent placeholders to discord's classes, like this:

.app-3xd6d0 {
  @extend %app !optional;
}
.app-2CXKsg {
  @extend %shakeable !optional;
}
.bg-1QIAus {
  @extend %bg !optional;
}
.layers-OrUESM {
  @extend %layers !optional;
}
.layer-86YKbF {
  @extend %layer !optional;
}
.animating-1rIrGV {
  @extend %layerAnimating !optional;
}

• once you define a placeholder, for example %shakeable in your project somewhere, the class gets it applied properly, due to this mapping file all of the other classes only optionally extend selectors, so they won't get included in the final theme, making the css only as big as it needs to be.
• this is because discord often changes the class names, and this way they only need to be updated in one place in the theme.
  i would like an option in the extension, to also autocomplete referenced & undefined placeholders, like these.

Now that there are two assets being released, the Releases section can be a bit tricky to navigate. It might be nice to have changelogs available in the packages' folders.

Should be possible with https://github.com/semantic-release/release-notes-generator

See #108 for context.

• Update this check to account for the new import string format.
• Update the resolution to follow the same rules as the Sass importer (see the resolution implementation you made for vscode-css-languageservice)

NeoVim 0.10.0
Lazy.nvim

Hi! I really like your lsp, however it doesn't seem to work on my machine. I am pretty sure the problem is with the way I configured my neovim, because on astronvim it worked. I want to make my own config, but it is impossible (for me) without having autocomplete for scss files.

Could you help me please?

Here is my config:

lua/plugins/lsp.lua

return {
  { "williamboman/mason.nvim", config = function() require("mason").setup() end },
  {
    "williamboman/mason-lspconfig.nvim",
    config = function()
      require("mason-lspconfig").setup {
        ensure_installed = {
          "lua_ls",
          "tsserver",
          "jsonls",
          "tailwindcss",
          "rust_analyzer",
          "pyright",
          "cssls",
          "cssmodules_ls",
          "somesass_ls"
        },
      }
    end,
  },
  {
    "neovim/nvim-lspconfig",
    config = function()
      local lspconfig = require "lspconfig"
      local capabilities = vim.lsp.protocol.make_client_capabilities()
      capabilities.textDocument.completion.completionItem.snippetSupport = true

      lspconfig.emmet_ls.setup {
        capabilities = capabilities,
        filetypes = {
          "css",
          "eruby",
          "html",
          "less",
          "sass",
          "scss",
          "svelte",
          "pug",
          "vue",
        },
        init_options = {
          html = {
            options = {
              ["bem.enabled"] = true,
            },
          },
        },
      }
      lspconfig.lua_ls.setup {}
      lspconfig.tsserver.setup {}
      lspconfig.jsonls.setup {}
      lspconfig.tailwindcss.setup {}
      lspconfig.rust_analyzer.setup {}
      lspconfig.pyright.setup {}
      lspconfig.cssls.setup {}
      lspconfig.cssmodules_ls.setup {}
      lspconfig.somesass_ls.setup {}

      vim.keymap.set("n", "<leader>q", vim.lsp.buf.hover, {})
      vim.keymap.set("n", "gd", vim.lsp.buf.definition, {})
      vim.keymap.set({ "n" }, "<leader>ca", vim.lsp.buf.code_action, {})
    end,
  },
}

lua/plugins/cmp.lua

return {
  "hrsh7th/nvim-cmp",
  event = { "InsertEnter", "CmdlineEnter" },
  dependencies = {
    "hrsh7th/cmp-buffer",
    "hrsh7th/cmp-path",
    "L3MON4D3/LuaSnip",
    "saadparwaizl/cmp_luasnip",
    "rafamadriz/friendly-snippets",
    "onsails/lspkind.nvim",
  },

  config = function()
    local ls = require "luasnip"
    local s = ls.snippet
    local t = ls.text_node
    local i = ls.insert_node

    ls.add_snippets("typescriptreact", {
      s("class", {
        t 'className="',
        i(1, ""),
        t '"',
      }),
    })
    local cmp = require "cmp"
    local luasnip = require "luasnip"
    local lspkind = require "lspkind"

    require("luasnip.loaders.from_vscode").lazy_load()

    cmp.setup({
      completion = {
        completeopt = "menu,menuone,preview,noselect"
      },
      snippet = {
        expand = function(args)
          luasnip.lsp_expand(args.body)
        end
      },
      mapping = cmp.mapping.preset.insert({
        ["<C-b>"] = cmp.mapping.scroll_docs(-4),
        ["<C-f>"] = cmp.mapping.scroll_docs(4),
        ["<C-Space>"] = cmp.mapping.complete(),
        ["<C-e>"] = cmp.mapping.abort(),
        ["<CR>"] = cmp.mapping.confirm({ select = true }),

        ["<Tab>"] = cmp.mapping(function(fallback)
          if cmp.visible() then
            cmp.select_next_item()
          elseif luasnip.locally_jumpable(1) then
            luasnip.jump(1)
          else
            fallback()
          end
        end, { "i", "s" }),

        ["<S-Tab>"] = cmp.mapping(function(fallback)
          if cmp.visible() then
            cmp.select_prev_item()
          elseif luasnip.locally_jumpable(-1) then
            luasnip.jump(-1)
          else
            fallback()
          end
        end, { "i", "s" }),
      }),
      sources = {
        { name = "nvim_lsp" },
        { name = "luasnip" },
        { name = "buffer" },
        { name = "path" }
      },
      formatting = {
        format = require("tailwindcss-colorizer-cmp").formatter,
      },
    })
  end
}

• VS Code version: 1.85.0
• Extension version: v2.14.5
• Operating system: macOS Sonoma 14.0

Reproducible Case:

Steps to Reproduce:

1. Entry file _ds.scss

@forward '../core/colors/colors';

3. Colors file _colors.scss

@function myColor($color) {

}

4. In my component file

@use '../../design-system/ds' as ds;

.my-component {
     color: ds.myColor()
}

In our app we have a bunch of other files that have legacy styles. We created a new folder that's pretty bare bones that just has the new colors as shown in the setup above.
However doing ds. doesn't trigger the intellisense.

Upon inspection, I'm seeing a lot of errors in the Some Sass Ouput tab that seems to be related to all the old/existing legacy styles:

You can't have more than one poster comment.
Annotation `parameter` is not allowed on comment from type `css`.
Annotation `parameter` is not allowed on comment from type `css`.
Parser for annotation `breaking` not found.
Parser for annotation `breaking` not found.
Annotation `return` is not allowed on comment from type `mixin`.
Parser for annotation `deprecation` not found.
@return must at least have a type. Location: undefined:84:87
@return must at least have a type. Location: undefined:105:110
@return must at least have a type. Location: undefined:115:120
@return must at least have a type. Location: undefined:141:144
@return must at least have a type. Location: undefined:149:156
@return must at least have a type. Location: undefined:166:174
Item `declaration` refers to `css.declaration` from type `mixin` but this item doesn't exist.
Item `declaration` refers to `configuration` from type `mixin` but this item doesn't exist.
Item `validate-theme` refers to `validate-theme-styles to validate only theme keys.` from type `function` but this item doesn't exist.
Item `validate-theme-styles` refers to `validate-theme to validate both theme keys and theme values.` from type `function` but this item doesn't exist.
Item `_validate-theme-values` refers to `Use `validate-theme()` to validate both theme keys and theme values.` from type `function` but this item doesn't exist.
Item `add-link` refers to ``add-link()`` from type `mixin` but this item doesn't exist.
@return must at least have a type. Location: undefined:89:98
@return must at least have a type. Location: undefined:327:339
Parser for annotation `examples` not found.
@return must at least have a type. Location: undefined:273:333
Parser for annotation `breaking` not found.
Parser for annotation `breaking` not found.
Parser for annotation `breaking` not found.
Parser for annotation `breaking` not found.
Parser for annotation `breaking` not found.
Parser for annotation `breaking` not found.
Parser for annotation `breaking` not found.
Parser for annotation `breaking` not found.
Parser for annotation `breaking` not found.
Parser for annotation `breaking` not found.
Parser for annotation `breaking` not found.
Parser for annotation `breaking` not found.
Parser for annotation `breaking` not found.
Parser for annotation `breaking` not found.

Hello, I'd like to ask about intellisense using @use and package from node_modules. Do I have set some settings in extension's config? Tried to remove node_modules from somesass scanner @wkillerud

• Operating system: Windows 11
• VS Code version: 1.92.2
• Extension version: 3.6.2

Cannot add minimal repo, as it is a private repo.

Once disabled the extension, it works again.

With enabled extension

With disabled extension

• VS Code version: 1.92.2
• Extension version: 3.6.3
• Operating system: Windows

Reproducible Case:

https://github.com/MenSeb/some-sass-bug/tree/main/src/some-sass-suggestions

Steps to Reproduce:

// index.scss

@use '../modules' as *;

// This works correctly and is shown in suggestions
@debug color-blue(#fff);
@debug string-unique-id();

// Typing "co" will trigger the color-* prefixed suggestions.
// The "comparable" global function of the "sass:math" package is also shown.
@debug comparable($number1: 1, $number2: 2);

The built-in SASS modules global aliases are shown in suggestions even if the package itself was not called with @use.

From https://sass-lang.com/documentation/modules/

Before the Sass module system was introduced, all Sass functions were globally available at all times. Many functions still have global aliases (these are listed in their documentation). The Sass team discourages their use and will eventually deprecate them, but for now they remain available for compatibility with older Sass versions and with LibSass (which doesn’t support the module system yet).

I don't think this is a bug, but there could be a "nice to have" feature to prevent this.

Maybe as an option similar to suggestFromUseOnly, with something like hideGlobalAliases or showGlobalAliases, depending on whether the default behavior would be to hide or show them.

Is it possible to get Intellisense for css variables? Without me defining scss variable to hold css variable inside @wkillerud

I dont want to install extra extension such as https://marketplace.visualstudio.com/items?itemName=vunguyentuan.vscode-css-variables just to get some intellisense

See Adopting Multi Root Workspaces for Language Client / Language Server for context.

At the moment Some Sass runs one language server process per workspace root using the deprecated rootUri prop in InitializeParams.

It would be nice to run one process for multiple workspaces seeing as rootUri is deprecated. We should probably keep backwards compatibility if possible.

From #184

I saw that typing on a line with @debug or @error would not show autocomplete suggestions

@use './test' as test;

$message: test. // it will show both suggestions here

@debug test. // it won't show anything here
@error test. // it won't show anything here

It's likely the do-complete feature gets confused by the at-rule statements. See if the completion context can be extended to support code completions in these two scenarios (@debug and @error).

Issue

When we @use a stylesheet that @use another stylesheet, all the public variables (and functions and mixins) of this second stylesheet are also included in the autocomplete of the first one (not sure if that's clear but here comes the example).

Example

_core.scss

$red: #f00;

_semantic.scss

@use './core' as core;

$primary: core.$red;

globals.scss

Here, $red shouldn't be included in the dropdown.

If I select it, I get this error:

SassError: Undefined variable.
  ╷
5 │     background-color: semantic.$red;
  │                       ^^^^^^^^^^^^^
  ╵
  app/globals.scss 5:20  root stylesheet

Whereas when I select $primary, it works as expected.

Versions

• VS Code Version: 1.81.1
• SCSS IntelliSense Version: 2.14.0
• Operating System: MacOS M1

Intellisense works in .scss files, but not in scss style blocks.

app.scss Intellisense works fine.

@use 'some_package_in_node_modules/mixins';

mixins.dostuff(); 

file.svelte Intellisense doesn't work.

<style lang="scss">
    @use 'some_package_in_node_modules/mixins';

    mixins.dostuff(); 
</style>

Am I missing a setting or something? Is this use case not supported? Thanks in advance.

• VS Code version: 1.88.1
• Extension version: 3.1.1
• Operating system: Macos 14.4.1

The plugin just stopped working today. I thought it was due to installing another plugin, but I could not make some sass work again even after uninstalling the other plugin.

So I rolled back the version to 3.1.0, still no success. Then 3.0.1, and it worked.

The extension won't activate. The vscode output panel under Extension Host dropdown option, displays this error:

ExtensionService#_doActivateExtension SomewhatStationery.some-sass, startup: false, activationEvent: 'onLanguage:scss'
2023-04-10 05:09:33.259 [error] Activating extension SomewhatStationery.some-sass failed due to an error:
2023-04-10 05:09:33.259 [error] Error: Cannot find module 'c:\Users\username\.vscode\extensions\somewhatstationery.some-sass-2.10.0\dist\node-client.js'
Require stack:
- c:\Users\username\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\loader.js
- c:\Users\username\AppData\Local\Programs\Microsoft VS Code\resources\app\out\bootstrap-amd.js
- c:\Users\username\AppData\Local\Programs\Microsoft VS Code\resources\app\out\bootstrap-fork.js
-
  at Module._resolveFilename (node:internal/modules/cjs/loader:987:15)
  at i._resolveFilename (node:electron/js2c/utility_init:17:840)
  at Module._load (node:internal/modules/cjs/loader:832:27)
  at c._load (node:electron/js2c/asar_bundle:5:13343)
  at m._load (c:\Users\username\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:124:14199)
	at h._load (c:\Users\username\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:119:11871)
	at I._load (c:\Users\username\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:119:11264)
	at Module.require (node:internal/modules/cjs/loader:1059:19)
	at require (node:internal/modules/cjs/helpers:102:18)
	at Function.i [as __$__nodeRequire] (c:\Users\username\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\loader.js:5:98)
	at E.rb (c:\Users\username\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:119:13135)
	at async Promise.all (index 0)

I hope you can help rectify this issue. I would love to gain the feature of sassdoc on-hover details.

• VS Code Version: 1.77.1
• SCSS IntelliSense Some Sass Version: 2.10.0
• Operating System: Windows 10

Reproducible Case: N/A

I've had success with multi-semantic-release and internal dependencies before, but for some reason the extension wasn't updated when v1.0.2 of the server was released. Look into why.

Hover intellisense and navigations fails with the following message:

[Error - 10:15:41 AM] Request textDocument/hover failed.
  Message: Request textDocument/hover failed with message: ENOENT: no such file or directory, realpath 'c:/my-work-dir/path/image.svg'
  Code: -32603 

The css is a simple background image:

div {
  background-image: url(/path/image.svg);
}

I'm using Angular so the path is absolute to the final server path and cannot be combined directly with the working directory.

• VS Code version: v1.91.1
• Extension version: v3.1.7
• Operating system: Windows

Reproducible Case:

Steps to Reproduce:

1. Add an invalid background-image: url(/does-not-exit); to the scss
2. Hover over a mixin imported from a scss file (using @use).

Observe: No tooltip or navigation.
Expected: Tooltip shown (even if images are invalid and cannot be loaded).

🚨 The automated release from the main branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the main branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

No publisher found in package.json.

Unfortunately this error doesn't have any additional information. Feel free to kindly ask the author of the Inline plugin plugin to add more helpful information.

Good luck with your project ✨

Your semantic-release bot 📦🚀

• VS Code version: 1.92.2
• Extension version: 3.6.3
• Operating system: Windows

Reproducible Case:

https://github.com/MenSeb/some-sass-bug/tree/main/src/some-sass-completion

Steps to Reproduce:

// index.scss

@use 'sass:math';
@use '../modules' as *;
@use '../utils' as *;

/// Dummy function
/// @param {Any} $value - the value to test
/// @return {Any} - the `$value`
@function dummy($value) {
    @return $value;
}

// Typing dum and pressing tab completes like this
// @debug dummy()

// Typing tes and pressing tab completes like this
// @debug test(value)

// Typing math.compa and pressing tab completes like this
// @debug math.compatible(number1, number2)

// Typing compa and pressing tab completes like this
// @debug comparable($number1: , $number2: )

// Typing color-bl and pressing tab completes like this
// @debug color-blue

I think there may be some inconsistencies when using the autocomplete feature.

From the test file index.scss, when something comes from :

• the same file, i.e. dummy, it will autocomplete without the $value param.
• another file, i.e. test, it will autocomplete with the value param.
• a SASS packpage, i.e. math.compatible, it will autocomplete with number1 and number2 params.
• a global alias, i.e. comparable, it will autocomplete with $number1: and $number2: params.
• a prefixed forward, i.e. color-blue, it will autocomplete without the parentheses and params.

The cursor behavior:

It can be place over the param name, e.g. value and ready to replace it.
It can be place after the param name, e.g. $number1: and ready to add something.

What could be done?

Depending on user preferences, possible options could be, for example:

• with named params, it would autocomplete with comparable($number1: , $number2: ) and pressing tab would move through each param to add a value.
• without named params, it would autocomplete with `comparable($number1, $number2) and pressing tab would move over each param to replace it with a value.

1. Both options could be shown together in the suggestions, but this could lead to a long list of suggestions.
2. It could be related to an option like useNamedParams from the configuration.

Other observations:

Could the autocomplete on a param include the $ dollar sign by default? So $value instead of value.
Could the autocomplete automatically insert the ; semicolon at the end of the line?

I am not sure if this is all related to the extension itself, please let me know if it is.

Right now the published module is pretty chonky. It contains four builds including source maps.

• Node
• Browser
• Node development build
• Browser development build

We can probably do without the source maps. Each map is about 3MB each, so we can save a good chunk there.

Hey, it's me again, sorry! haha

There seems to be more logic to update regarding the forward rule.

This time it includes logic using it with prefix, i.e. @forward './test' as test-*;

There are multiple test files to showcase different missing or wrong suggestions.

I left comments in each one of them for clarification, if it needs more details, please let me know.

The example repo, https://github.com/MenSeb/some-sass-bug, is up to date!

Previous issue: #190

• VS Code version: 1.92.0
• Extension version: 3.4.0
• Operating system: Windows

P.S. Let me know if you prefer code examples directly here for future reference.

🚨 The automated release from the main branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the main branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

Invalid vsce personal access token. Additional information:

Error: Command failed with exit code 1: vsce verify-pat
::error::Can not read the publisher's name. Either supply it as an argument or run vsce from the extension folder. Additional information:%0A%0AError: @types/vscode 1.87.0 greater than engines.vscode ^1.86.0. Either upgrade engines.vscode or use an older @types/vscode version

Unfortunately this error doesn't have any additional information. Feel free to kindly ask the author of the Inline plugin plugin to add more helpful information.

Good luck with your project ✨

Your semantic-release bot 📦🚀

• VS Code Version: 1.84.0
• SCSS IntelliSense Version: 2.14.2
• Operating System: macOS 13.5

Reproducible Case:

Steps to Reproduce:

1. Entry file _entry.scss

@forward './_chunk';

2. Chunk file _chunk.scss

@mixin colors() {

}

3. In the consuming file:

@use './entry' as foo;

With this setup the plugin will correctly give colors as an intellisense option:

color: foo.

But if the show keyword is used in the entry file to hide other methods like this:

@forward './chunk' show colors;

It will not give the intellisense prompt after

color: foo.

It will still compile correctly though since show with @forward is valid Sass module syntax.

mrmlnc/vscode-scss#41 (comment)

Is is possible to have intellisense for defined node_modules path? I am using a 3rd party library, but I can't seem to make it work. @wkillerud

Great extension! The @use intellisense and the SassDoc @params enums are my two favorite features.

Yet it is not clear in the README what SassDoc annotations are supported.

For instance, @name is not implemented, @group neither.

So far, I've only seen @author, @type and @params to be implemented.

There's also no documentation on how to implement enums in params, so I leave it here for anyone struggling to find it:

/// @param {"option1" | "option2" | "option3"} $option -
@mixin foobar($option) {
  ...
}

The double quotes are important or else the intelissense won't be triggered.

PS: I'm sorry that is not an issue but there's no "Discussion" type for this kind of question.

Hi,

• VS Code Version: 1.77.3
• SCSS IntelliSense Version: v2.11.1
• Operating System: Ubuntu 22.04.2 LTS

Reproducible Case:

basic file structure:

project/
project/somesass.code-workspace
project/foldera/testA.scss
project/folderb/testB.scss

Files contain nothing except the somesass.code-workspace, which contains:

{
    "folders": [
       {
            "name": "root",
            "path": "./"
        },
        {
            "name": "Folder A",
            "path": "./foldera"
        },
        {
            "name": "Folder B",
            "path": "./folderb"
        }
    ]
}

If I open this workspace and edit a scss file within one of the folders the extension and what it does works fine.
But once I open a file in any other folder (regardless of filetype) I get the following error message:

Client initialization failed. Error: command '_somesass.applyExtractCodeAction' already exists at m.registerCommand (/usr/share/code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:98:124270) at Object.registerCommand (/usr/share/code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:114:22984) at /home/user/.vscode/extensions/somewhatstationery.some-sass-2.11.1/dist/node-client.js:2:588644 at /home/user/.vscode/extensions/somewhatstationery.some-sass-2.11.1/dist/node-client.js:2:589585

I also get the notification [Folder B] Starting Some Sass server which seems to be stuck in loading and I have to restart vscode to get it working again.
Note the folder name prefixed to the notification? Only saw that just now while writing.

Not sure if it's a incompatability with another extension . Haven't gotten around to testing any further yet. End of the day now for me.

Cheers!

PS: Thanks for a great extension. Works wonderfully so far (well, except this I guess :o) )! 👍

The extension causes code navigation and refactoring among other features to become perpetually stuck on loading and no amount of waiting ever resolves this. Disabling the extension restores functionality; the built-in support seems to have no trouble with large files.

• VS Code version: 1.89.1
• Extension version: 3.1.4
• Operating system: Windows 11

Reproducible Case: https://github.com/telerik/kendo-themes

Steps to Reproduce:

1. Open @progress/kendo-theme-default/dist/all.scss
2. Try navigating to a variable

• VS Code version: 1.87.1
• Extension version: 3.1.6
• no other extensions enabled
• settings: "somesass.suggestFromUseOnly": true

When importing multiple files with @use, the suggestions are not limited to the one file you're trying to reference.
In the screenshot below, when typing font. I would expect to only see suggestions from the _font.scss file. Instead, it's also showing suggestions from the _border.scss file

In Sass you can also import files without needing to specify the index file.

https://sass-lang.com/documentation/at-rules/use#index-files

Currently this extension does not support imports using this and requires you specify the full path.
It would be awesome if this also added 😉

Works	Does not

First off; great work on picking up the pieces and continuing where SCSS Intellisense left off.
This revised extension actually works well with @use where basically everything else, well ... bombs.

There's still one rather annoying bug with it though:
When you @use a function that collides with one of the built-in modules, the documentation for the built-in module is used.

E.g. if I make a custom module that exports a get function.
And I @use both that module and the built-in one...

That's obviously incorrect.
Is the extension maybe not checking from which namespace the token in question is being taken?

[EDIT]
Commenting out the @use for sass:map in this example doesn't fix it.
Maybe the documentation to show for built-in modules is a bit too eager then; and is not checking that something actually came from the built-in module?

• VS Code version: 1.87.1
• Extension version: 3.1.5
• Operating system: happens on both macOS and windows
• no other extensions enabled

Settings:
"somesass.suggestFromUseOnly": true

In the screenshot below it should suggest me border.$color, border.$radius, border.$size, ... Instead it suggests everything, including private variables, from the color file that is used by the border file.

It works properly when importing a file that's not using anything else:

See Sass announcement of the feature

No longer will you have to manually add node_modules to your loadPaths option and worry about whether nested packages will work at all. No longer will you need to add ~s to your URLs and give up all portability. Now you can just pass importers: [new NodePackageImporter()] and write @use 'pkg:library' and it’ll work just how you want out of the box.

TODO

• Set up a test project in fixtures/ (branch: pkg-import)
• See how the new syntax affects the parser and how it handles links
• See how the new syntax affects import completions
• See if it makes sense to use the official importer via the JS API

The VS Code extension generator now has an option to use esbuild. There are samples and docs that explain the setup.

The webpack build is fairly slow, so I'd be interested to see if it can be replaced with esbuild to speed things up a bit.

• esbuild-sample
• Web extensions: esbuild
• Extensions: esbuild

Webpack is used both in the language server and the extension modules:

• https://github.com/wkillerud/some-sass/tree/main/packages/language-server
• https://github.com/wkillerud/some-sass/tree/main/vscode-extension

i have a mappings definitions that extends classes by placeholders, see:

.lookFilled-1H2Jvj {
	@extend %buttonFilled !optional;
}
.lookOutlined-3RTC7c {
	@extend %buttonOutlined !optional;
}
.lookInverted-2GrLaB {
	@extend %buttonInverted !optional;
}
.colorRed-2VFhM4 {
	@extend %buttonColorRed !optional;
}
.colorGreen-jIPCAS {
	@extend %buttonColorGreen !optional;
}
.buttonColor-3bP3fX {
	@extend %panelActionButtonColor !optional;
}

now, in a different file in the same workspace, i would like to get autocompletion when starting to type for example %buttonF

Using SCSS from node_modules is well supported, but if the project relies on other custom includePaths (see #36), things don't work that well.

• The link parser likely assumes things are in node_modules when they're not.
• Since the parser is confused, most functionality is likely either not working or working with incomplete information.

More research is needed. I think we'll at least need:

• A new setting to allow configuring custom includePaths (list of paths).
• A (local) patch of vscode-css-languageservice, or some other way to have findDocumentLinks understand includePaths.
• Once the parser understands includePaths, test all features with source code from includePaths.
• A documentLinkProvider capability for the server, to fix Ctrl/Cmd + click on @use/@forward/@import in includePaths.

🚨 The automated release from the main branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the main branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

No npm token specified.

An npm token must be created and set in the NPM_TOKEN environment variable on your CI environment.

Please make sure to create an npm token and to set it in the NPM_TOKEN environment variable on your CI environment. The token must allow to publish to the registry https://registry.npmjs.org/.

Good luck with your project ✨

Your semantic-release bot 📦🚀

In the readme file from vscode-extension folder:

// Recommended if you don't rely on @import
	"somesass.suggestOnlyFromUse": true,

When it should be:

// Recommended if you don't rely on @import
	"somesass.suggestFromUseOnly": true,

I have a branch ready with the fix.

I looked at the contributing docs but I'm not sure about how you want me to push the branch.

Whenever there's a version change in the language server, the release of the VS Code extension fails. It does not get updated to the newly released language server version automatically like I expect.

Might be it's designed to only look in packages or something to that effect. See if it's a configuration error or can be patched.

Workaround when the release for the extension fails:

• git pull
• update version manually in package.json
• npm install
• commit updates files as a fix: commit
• git push, semantic release should work

Hi @wkillerud, firstly, thank you for the efforts and work you've done here by expanding upon vscode-scss.

I've got a minor feature request here. When generating completion descriptions, the current logic works like this. Take the follow map:

/// Controls flex directions to use
///
$flex-direction: (
  row: row,
  col: column,
  // row-rev: row-reverse,
  // col-rev: column-reverse
);

The above would generate the following in completion descriptions:

After quickly having a look at the source, getLimitedString is handling the documentation generated for variables. It's my understanding that markdown code regions can also apply to completion descriptions in LSP and it would be nice to have the identical generation applied to completion items as with hovers.

For example, the above code sample in hovers:

Is this is the intended behavior for Some Sass or is there a particular reason why markdown code blocks are excluded in completions but not hovers?

Thanks.