[scss] grid-template-areas not formatting as expected

[UTGuy]

Description

Formatting seems to break when using a SCSS variable in grid-template-areas.

Input

The code looked like this before beautification:

.foo-bar {
    $courseLibrarySearch-content-row1: "search search search . toggleFilters";
    grid-template-areas:
        $courseLibrarySearch-content-row1;

    .foo--showFilters & {
        grid-template-areas:
            $courseLibrarySearch-content-row1 
            "assetTypeFilter languageFilter . . .";
    }
}

Expected Output

The code should have looked like this after beautification:

.foo-bar {
    $courseLibrarySearch-content-row1: "search search search . toggleFilters";
    grid-template-areas:
        $courseLibrarySearch-content-row1;

    .foo--showFilters & {
        grid-template-areas:
            $courseLibrarySearch-content-row1 
            "assetTypeFilter languageFilter . . .";
    }
}

Actual Output

The code actually looked like this after beautification:

.foo-bar {
    $courseLibrarySearch-content-row1: "search search search . toggleFilters";
    grid-template-areas:
        $courseLibrarySearch-content-row1;

    .foo--showFilters & {
        grid-template-areas:
            $courseLibrarySearch-content-row1 "assetTypeFilter languageFilter . . ."; // <--  why does this happen
    }
}

Steps to Reproduce

Format the code

Environment

OS: any

Settings

default settings in VSCode

[bitwiseman]

I'm not sure why it is happening. Is it actually breaking functionality or is it simply less then ideal formatting?

[UTGuy]

It's definitely not ideal to have "rows" showing side-by-side like that

[bitwiseman]

Agreed, I was just trying to understand the severity of the problem. Preserve newlines should work in this area, but it apparently has a bug.