Incorrect Formatting of Angular elements

[Rohanator9000]

Describe the bug The formatter doesn't treat Angular elements like HTML elements.

To Reproduce Create a new .sass file with some angular elements. Then, format.

Expected behavior I expect the formatter to treat the Angular elements properly.

Screenshots Before formatting:

mat-sidenav-container
    width: 100%
    height: 100%

    mat-sidenav
        width: 6.66%
        text-align: center

        img
            margin: 20%
            width: 40%
            height: auto
            fill: red

mat-toolbar
    background-color: white
    border-bottom: 1px solid #19191940

    img
        width: 10%
        height: auto

After formatting:

mat-sidenav-container
width: 100%
height: 100%

    mat-sidenav
width: 6.66%
text-align: center

img
    margin: 20%
    width: 40%
    height: auto
    fill: red

mat-toolbar
    background-color: white
    border-bottom: 1px solid #19191940

    img
        width: 10%
        height: auto

Desktop (please complete the following information):

• OS: Windows 10
• Version: 1.7.5

Additional context Based on the syntax highlighting, it seems like the extension is recognizing the Angular elements as values.

[TheRealSyler]

@Rohanator9000 implementing this is a little bit tricky, not because it hard to implement but because its hard to implement while not changing the behaviour of other parts in the formatter.

it might take a while to implement, if you want to continue to use the formatter with angular custom elements you can use //R second part of the comment shows how to use //R.

[Rohanator9000]

Understood, thanks for the information. How can I help to implement this?

[TheRealSyler]

@Rohanator9000 if you want to try, you need to download the repo then npm i, then change the src/index.ts:SassFormatter.isBlockHeader method, the job of the isBlockHeader method is to return a boolean if the current line is a class, id, mixin etc, so for angular elements the method needs to return true if its an angluar element or class, id etc and false when the line is a property or variable or anything else that doesn't determine the indentation of the next line.

you should ignore the commented lines they are just there so i know what i already tried, you can delete them if you want to.

to run the tests run npm run test:watch