Compiled SCSS Multiline comments misplacement

[Grant-Kellie]

Compiled SCSS Multiline comments misplacement

Issue

Comments in SCSS do not correspond to the correct position in CSS, when compiled creates a wall of multiline comments, followed by the correct markdown.

Notes

VScode Extension affected: Live Sass Compiler v6.1.2 Initial Issue: https://github.com/glenn2223/vscode-live-sass-compiler/issues/368

Markup Examples

SCSS

/*
@title: Image Overlay
@description: provides a darkened overlay effect, modifiers are available to change the positioning of internal content
*/
.overlay {
    width: calc(100% - 32px);
    height: 100%;    
    padding:0 16px;
    color: color.set('light');
    background: #0f0f0f;
    display:flex;
    flex-direction: column;
    justify-content:end;
    position: absolute;
    z-index:1;

    &:hover{
        background: #f0f0f0;
    }

    /*
    @group: Overlay size & position
    @title: Auto
    @description: 
    */
    &--auto { 
        height: auto;
    }

    /*
    @title: Quarter
    @description: 
    */
    &--quart {
        max-height: 25% !important;
    }
}

Compiled CSS

/*
@title: Image Overlay
@description: provides a darkened overlay effect, modifiers are available to change the positioning of internal content
*/
.overlay {
    width: calc(100% - 32px);
    height: 100%;
    padding: 0 16px;
    color: hsl(0, 0%, 100%);
    background: hsla(206, 11%, 7%, 0.75);
    display: flex;
    flex-direction: column;
    justify-content: end;
    position: absolute;
    z-index: 1;
    /*
    @group: Overlay size & position
    @title: Auto
    @description: 
    */
    /*
    @title: Quarter
    @description: 
    */
}

.overlay:hover {
    background: hsla(0, 0%, 0%, 0);
}
.overlay--auto {
    height: auto;
}

[ntkme]

a {
  b: c;
  /* comment 1 */
  & > x {
    /* comment 2 */
  }
}

With the example above, there is no way we can tell if comment 1 is actually commenting on b: c; or & > x. So the best thing we can do is keep it inside the same block scope as the source. If you want to make sure the comment for a block is tied to that block, put the comment inside the block like comment 2, instead of above the block like comment 1.

[nex3]

As @ntkme indicates, as far as Sass is concerned, a CSS-style "loud" comment is just another child of a statement like a declaration or a nested rule. There's no notion of "attaching" a comment to a particular other node that it gets moved with, and there is a risk that changing that behavior would break existing use-cases (like comment 1 in the example above). I don't think there's a clear enough use-case here to be worth that risk.