Incorrect linebreaks

[Semigradsky]

Input:

.image {
  background-image: image-set(
    url(img/test.png) 1x,
    url(img/test-2x.png) 2x,
    url(my-img-print.png) 600dpi
  );
}

Expected output:

.image {
  background-image: url(img/test.png);
}
@media (min-resolution: 144dpi) {
  .image {
    background-image: url(img/test-2x.png);
  }
}
@media (min-resolution: 600dpi) {
  .image {
    background-image: url(my-img-print.png);
  }
}

Actual output:

.image {
  background-image: url(img/test.png);
}@media (min-resolution: 144dpi) {.image {
  background-image: url(img/test-2x.png);
}
}@media (min-resolution: 600dpi) {.image {
  background-image: url(my-img-print.png);
}
}

[jonathantneal]

Is this a formatting issue? A plugin should not concern itself with formatting. At most, the newly generated @media at-rules could take in the raws of another element.

https://github.com/SuperOl3g/postcss-image-set-polyfill/blob/master/index.js#L113-L116

[SuperOl3g]

Actually I don't know how to fix this correctly. As far as i understand problem is in this lines.

If I replace append with insertAfter order of rules brokens.

I can add \n to 2 last append but is it correct?

@jonathantneal, maybe you could help with this question too?))

[SuperOl3g]

Possible relative bug: input

.foo {
  background-image: image-set(
    url('../../backgrounds/image.jpg') 1x,
    url('../../backgrounds/[email protected]') 2x
  );
}

@media (max-width: 640px) {
  .foo {
    background-image: none;
  }
}

output

.foo {
  background-image: url('../../backgrounds/image.jpg');
}

@media (max-width: 640px) {
  .foo {
    background-image: none;
  }
}

@media (min-resolution: 192dpi) {
.foo {
  background-image: url('../../backgrounds/[email protected]');
}
}

[TongDaDa]

input

background-image: image-set(url(../assets/img/cash_bg.jpg) 1x,
                                url(../assets/img/[email protected]) 2x);

Actual output:

background-image: url(/static/img/cash_bg.ae8cf5a.jpg);
background-image: url(/static/img/cash_bg.ae8cf5a.jpg);

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    ....
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    ....
}

why output two ?