trailing comma aftscss if comment on same line as last item

Prettier 1.19.1 Playground link

--parser scss
--trailing-comma all

Input:

$mediaBreakpointsUpperLimit: (
    xs: map-get($mediaBreakpoints, xs) - 1px,
    sm: map-get($mediaBreakpoints, md) - 1px,
    md: map-get($mediaBreakpoints, lg) - 1px,
    lg: map-get($mediaBreakpoints, xl) - 1px,
    xl: 9007199254740991 // Number.MAX_SAFE_INTEGER
);

Output:

$mediaBreakpointsUpperLimit: (
  xs: map-get($mediaBreakpoints, xs) - 1px,
  sm: map-get($mediaBreakpoints, md) - 1px,
  md: map-get($mediaBreakpoints, lg) - 1px,
  lg: map-get($mediaBreakpoints, xl) - 1px,
  xl: 9007199254740991 // Number.MAX_SAFE_INTEGER,
);

Expected behavior: The trailing comma should be added before the comment, not after.

Related issues found but already closed: #5855

Edit: Additional bug, which is related: Try moving the comment before the last entry. The last entry will become part of the last comment:

playground link

[aeruhxi]

I experimented changing stuff here and there for this issue, and I am stuck in solving the problem. Below are the findings I have found in the process.

I’ve tested for this particular code:

$gradient-colors: (
  "primary": (
    0: $color-primary,
    1: $color-primary-light,
    2: 3 // third comment
    // fourth comment
    // fifth comment
  ),
);

And I believe the issue is that all fields are in a single group of value-comma_group instead that the comments should be separate nodes.

{
  groups: [
    NumberNode {
      raws: [Object],
      value: '2',
      source: [Object],
      sourceIndex: 73,
      unit: '',
      type: 'value-number'
    },
    Colon {
      raws: [Object],
      value: ':',
      source: [Object],
      sourceIndex: 74,
      type: 'value-colon'
    },
    NumberNode {
      raws: [Object],
      value: '3',
      source: [Object],
      sourceIndex: 76,
      unit: '',
      type: 'value-number'
    },
    Comment {
      raws: [Object],
      value: ' third comment',
      inline: true,
      source: [Object],
      sourceIndex: 78,
      type: 'value-comment'
    },
    Comment {
      raws: [Object],
      value: ' fourth comment',
      inline: true,
      source: [Object],
      sourceIndex: 99,
      type: 'value-comment'
    },
    Comment {
      raws: [Object],
      value: ' fifth comment',
      inline: true,
      source: [Object],
      sourceIndex: 121,
      type: 'value-comment'
    }
  ],
  type: 'value-comma_group'

I have tried several stuff like

• changing the logic of isLastItemComment

      const isLastItemComment = lastItem && (lastItem.type === "value-comment" 
        || (lastItem.type === "value-comma_group" && lastItem.groups[lastItem.groups.length - 1].type === "value-comment"));

but I realized this wouldn’t work because it wouldn’t add the trailing comma at all.

• adding lineSuffix for inline comments for value-comment case. But I am in doubt it would be safe to buffer every comment.

    case "value-comment": {
      const opts = options.originalText.slice(
        options.locStart(node),
        options.locEnd(node)
      );

      if (node.inline) {
        return lineSuffix(opts);
      } 

      return opts;
    }

It did fix a part of the issue that now it inserts trailing comma before the comment (but with a leading space before comma which is an issue too). For example,

$gradient-colors: (
  "primary": (
    0: $color-primary,
    1: $color-primary-light,
    2: 3 // third comment
  ),
);

turns to

$gradient-colors: (
  "primary": (
    0: $color-primary,
    1: $color-primary-light,
    2: 3 , // third comment
  ),
);

And then there’s another problem which is preexisting right now regardless of my changes. The comment on the line gets a break.

$gradient-colors: (
  "primary": (
    0: $color-primary,
    1: $color-primary-light,
    2: 3, // third comment
  ),
);

turns to

$gradient-colors: (
  "primary": (
    0: $color-primary,
    1: $color-primary-light,
    2: 3, 
    // third comment
  ),
);

At this point, I am confused whether the issue is in the parser or the printer. Hope my findings will be useful information for fixing this issue. If someone guides me in this, I will submit a PR.

Thank you.

[sosukesuzuki]

@aeruhxi Thank you, go ahead!