vscode-scss icon indicating copy to clipboard operation
vscode-scss copied to clipboard

How to hint possible values for a function parameter from an existing map?

Open thany opened this issue 3 years ago • 0 comments

  • VS Code Version: 1.67
  • SCSS IntelliSense Version: 0.10.0
  • Operating System: Windows 10

Reproducible Case:

$brand-colors: (
  dark-blue:         #374c63,
  blue:              #0055a0,
  // ...
);

@function brand-color($name) {
  @if map-has-key($brand-colors, $name) {
    @return map-get($brand-colors, $name);
  }
  @else {
    @warn 'Brand color ' $name ' not found';
    @return 'unset';
  }
}

$color: brand-color(); // <-- Which $name are allowed?..

Steps to Reproduce:

  1. Use the code above
  2. Try intellisense on the function parameter
  3. Observe how it doesn't (and currently, cannot) know which values are permitted.

I would like to be able to hint to SCSS Intellisense what sort of values are permitted to pass into brand-color in the $name parameter. I want to populate that list of hints with the keys from an exisiting map, which is $brand-colors in the above example.

I was thinking JSdoc-style hints:

/// Description of brand-colors and whatall.
/// @param {keyof $brand-colors} $name The name of a color.
/// @returns {string} A color.
@function brand-color($name) {
  // ...
}

This could be enough information to provide such hints. I know Typescript (and Javascript to an extend) can do this, so I don't know why any other language couldn't do the same.

Sound good?

thany avatar May 13 '22 13:05 thany