CSS properties after an @for loop are nested within the loop (indented syntax)

[Jacob-Lockwood]

Describe the bug
If a CSS statement occurs after an @for loop in a mixin, the statement (and any statements following it) are nested into the loop block. This only applies to the indented syntax BTW because otherwise the block would be enclosed by {curlies}.

To Reproduce
Steps to reproduce the behavior:

1. Create a file test.sass with a mixin containing an @for loop with more statements after, ex:

=my-mixin
  $a: 0
  @for $i from 1 to 10
    $a: $a + $i * 5
  width: $a * 1px

2. Format the file
3. Output will be:

=my-mixin
  $a: 0
  @for $i from 1 to 10
    $a: $a + $i * 5
    width: $a * 1px

Expected behavior
The statement after the @for loop (width: $a * 1px) should stay unindented and outside of the loop

Screenshots
N/A

Desktop (please complete the following information):

• OS: macOS Big Sur 11.3.1
• Version (of the extension) 1.8.20

Additional context
I am forced to either remove this mixin and inline a lot of code, switch to the SCSS syntax, or disable the formatter (as I am right now)

[Jacob-Lockwood]

I just found the //I feature which is helping me solve this for now so I can still use the formatter
If anyone else has this problem, use this:

+my-mixin
  $a: 0
  @for $i from 1 to 10
    $a: $a + $i * 5
  //I
  width: $a * 1px

[TheRealSyler]

its the expected behavior for the formatter, but it might be a good idea to always choose the closest indentation, so that the user can choose if they want to exit the for loop.

[zozzz]

I think this behavior is fully unexpected because what is the reason to move code from outside indentation level into @for block. But if you think this is expected, why move only properties and anything else remain on the same indentation level:

Input:

@if $something
  width: 1px  

width: 2px // formatter move this into @if block
$y: 3 // variables dont move into @if block
width: 4px // again move into @if block

.selector // why not move this is into @if block

Formatted:

@if $something
    width: 1px

    width: 2px // formatter move this into @if block
$y: 3 // variables dont move into @if block
    width: 4px // again move into @if block

.selector // why not move this is into @if block

My opinion is the formatter trust the indentation levels is correct, maybe if found broken indentation size (eg.: global indentation=4 space, broken indentation=3 space) then round to nearest indentation level