SCSS single-line comments are formatted incorrectly

Important Note: Prettier has nice support for Grid-Template-Areas . See here

The example shows only how to reproduce the issue with single-line comments!

Prettier 1.15.3 Playground link

--parser scss

Input:

// This is SCSS. Prettier moves the area specification up behind the // comment
.grid {
        grid-template-areas: //
          "header header header" //
          "sidebar content content" //
          "footer footer footer";
 }

Output:

// This is SCSS. Prettier moves the area specification up behind the // comment
.grid {
  grid-template-areas: // "header header header"//
    "sidebar content content"//
    "footer footer footer";
}

Expected behavior:

// This is SCSS. Prettier moves the area specification up behind the // comment
.grid {
  grid-template-areas: // 
    "header header header" //
    "sidebar content content" //
    "footer footer footer";
}

There are related (closed) Issues for older Versions:

• https://github.com/prettier/prettier/issues/4311
• https://github.com/prettier/prettier/issues/4594

[jsnajdr]

Why this happens? SCSS code like this:

$a: // b
  c;

is parsed into AST node like this:

{
  type: 'css-decl',
  prop: '$a',
  value: 'c',
  raws: { between: ': // b\n  ' }
}

The inline comment is a part of the raw between string. It is not parsed or interpreted in any way, i.e., Prettier doesn’t know there is a comment. And when printing it, trim is called on the string. That’s how the critical newline gets lost. Result is:

$a: // b c;

[codepushr]

I’m experiencing the same issues:

$kt-media-breakpoints: (
	// Extra small screen / phone
		xs: 0,
	// Small screen / phone
		sm: 576px,
	// Medium screen / tablet
		md: 768px,
	// Large screen / desktop
		lg: 1024px,
	//1024px,
		// Extra large screen / wide desktop
		xl: 1399px
) !default;

It seems like comments are indenting the next line…