dart-sass icon indicating copy to clipboard operation
dart-sass copied to clipboard

Multiline selectors in media queries are indented incorrectly

Open Kingju777 opened this issue 4 years ago • 2 comments

If you put a Selector with more than one line in a ‘@media’ Query the space that is needed to mark the indentation is not put there.

CSS Result (formatting in front of the body element wrong)

@media screen {
  html,
body {
    height: 100%;
    width: 100%;
  }

Corrected Result (corrected by me)

@media screen {
  html,
  body {
    height: 100%;
    width: 100%;
  }

Problem in Javascript API

Original Ticket: https://github.com/glenn2223/vscode-live-sass-compiler/issues/106

Kingju777 avatar Jul 20 '21 11:07 Kingju777

can reproduce this on most recent version. likely due to indentation only being applied to the first line of a selector. this shouldn't affect the semantics of expanded output.

A bit smaller Sass input and CSS output comparison

@media screen {
  a,
  b {
    color: red;
  }
}
@media screen {
  a,
b {
    color: red;
  }
}

connorskees avatar Jul 20 '21 14:07 connorskees

I've just confirmed that this is not unique to the JS API.

nex3 avatar Jun 15 '22 23:06 nex3