SCSS maps indentation decreases by one level starting from the next line

[stimlocy]

When using Sass Map, the indentation decreases by one level starting from the next line.
This issue is reproducible in beautifier.io as well.

I am currently using VSCode and initially reported this problem in microsoft/vscode#238101, where I was advised to open a new issue here.
Additionally, this might be related to the issue mentioned in #1236

Example Code

Before formatting

main {
  $colors: (
    "foo": red,
    "bar": blue,
  );

      @each $key, $value in $colors {
        p.type_#{key} { color: $value; }
      }

  .hoge {text-align: right;}
}

Expected behavior

main {
  $colors: (
    "foo": red,
    "bar": blue,
  );

  @each $key, $value in $colors {
    p.type_#{key} {
      color: $value;
    }
  }

  .hoge {
    text-align: right;
  }
}

Actual behavior

main {
  $colors: (
    "foo": red,
    "bar": blue,
  );

@each $key, $value in $colors {
  p.type_#{key} {
    color: $value;
  }
}

.hoge {
  text-align: right;
}
}

Additional Information

Interestingly, this issue does not occur when the Sass map is defined with !default
In such cases, the indentation of the closing brackets increases by one level, but acceptable to me.

Example Code with !default

main {
  $colors: (
    "foo": red,
    "bar": blue,
    ) !default;

  @each $key, $value in $colors {
    p.type_#{$key} {
      color: $value;
    }
  }

  .hoge {
    text-align: right;
  }
}

I understand that solving this problem might require significant time and effort.
I hope this post will help to improve the project.

[stimlocy]

I have discovered even more interesting behavior regarding this issue.
When a function containing parentheses, such as minmax() repeat(), is used after a map defined with !default, the closing parenthesis of the map unexpectedly results in a new line.

Example 1: Before Formatting

main {
  $colors: (
    "foo": red,
    "bar": blue,
    ) !default;

  .fuga {
    display: grid;
    grid-template-columns: repeat(2, 60px);
    grid-template-rows: repeat(2, 60px);
    width: 100%;
  }
}

Example 1: After Formatting

main {
  $colors: (
    "foo": red,
    "bar": blue,
    ) !default;

  .fuga {
    display: grid;
    grid-template-columns: repeat(2, 60px
    );
  grid-template-rows: repeat(2, 60px);
  width: 100%;
}
}

Interestingly, this behavior does not occur if a value is specified after the parentheses, as shown below:

Example 2: With Values After Parentheses

main {
  $colors: (
    "foo": red,
    "bar": blue,
    ) !default;

  .fuga {
    display: grid;
    grid-template-columns: repeat(2, 60px) 1fr;
    grid-template-rows: repeat(2, 60px) 1fr;
    width: 100%;
  }
}

As a temporary hack, adding an inline comment /**/ after the closing parentheses seems to correct the formatting, at least for the indentation.

Example 3: With Inline Comments

main {
  $colors: (
    "foo": red,
    "bar": blue,
    ) !default;

  .fuga {
    display: grid;
    grid-template-columns: repeat(2, 60px)
      /**/
    ;
    grid-template-rows: repeat(2, 60px)
      /**/
    ;
    width: 100%;
  }
}

However, if the map is defined at the very beginning of the SCSS file, this workaround becomes quite cumbersome.

I hope this additional information helps in diagnosing and resolving the issue.