Trailing commas

[jk-nilo]

Hi,
I found a kind of configuration bug in this extension. The use of Prettier should be with trailingComma set to none, because when map-get() contains comma after the last parameter, then it's not compilable in Visual Studio by Web Compiler.

I filed an issue about it (prettier/prettier#10096). It's an option of Prettier, not their bug.

Thank you for feedback

[sibiraj-s]

AFIK, SASS supports trailing commas, so it shouldn't be a problem. Which SASS compiler are you using?

[sibiraj-s]

I tried your input here https://www.sassmeister.com/ which uses dart-sass

$ts-font-size: (
  "large": 16px,
  "normal": 14px,
);

$local-name-max-height: calc(
  5 * #{map-get(
      $map: $ts-font-size,
      $key: "large",
    )}
);

.item {
    height: $local-name-max-height;
}

output is as expected

.item {
  height: calc( 5 * 16px );
}

[jk-nilo]

I use "Web compiler" from Mads Kristensen (https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebCompiler)

[sibiraj-s]

I think the issue is with node-sass package used by Webcompiler it seems to be not supporting trailingCommas.

[sibiraj-s]

the project seems to be using older version of node-sass (possibly) that doesn't support trailingCommas? Can you verify if node-sass supports the same?

[jk-nilo]

I checked the documentation for node-sass, but no luck. No option related to commas. Any chance on having an option in your extension that would adjust behavior of prettier ?

[sibiraj-s]

I will add it.

[sibiraj-s]

Fixed in v2.1.0. Added option to set trailingCommas. defaults to es5.

[jk-nilo]

Works well now. Thank you