Orignally reported by @bentideswell@github.com at https://github.com/wikimedia/less.php/issues/106:

This breaks out internal systems which uses block comments to denote critical CSS. Rules are then extracted as part of our post processing routine into critical and non-critical CSS.

Given the following input:

.plain {
    font-weight: 100; /* One */
    font-style: normal; /* Two */
}


@font-face {
    font-weight: 200; /* One */
    font-style: normal; /* Two */
}

.fn() {
    @font-face {
        font-weight: 300; /* One */
        font-style: normal; /* Two */
    }
}
.fn();

Actual problem:

In the case of @font-face, the /* One */ and /* Two */ comments are moved to the end of the ruleset block. This is a problem because it changes the meaning in the case when comments are used for machine-readable instructions, such as for marking rules for inclusion for "critical CSS".

.plain {
  font-weight: 100;
  /* One */
  font-style: normal;
  /* Two */
}
@font-face {
  font-weight: 200;
  font-style: normal;
  
  /* One */
  /* Two */
}
@font-face {
  font-weight: 300;
  font-style: normal;
  
  /* One */
  /* Two */
}

Expected:

The inline comments should have their relative position between other rules preserved, either normalized with a line break (like we usually do) or left as-is on the same line as the input.

.plain {
  font-weight: 100;
  /* One */
  font-style: normal;
  /* Two */
}
@font-face {
  font-weight: 200;
  /* One */
  font-style: normal;
  /* Two */
}
@font-face {
  font-weight: 300;
  /* One */
  font-style: normal;
  /* Two */
}

Other information:

This was fixed in upstream Less.js in version 2.5.0. In version 2.4.0, upstream behaved the same as Less.php does today.

http://ecomfe.github.io/est/fiddle/#version=2.4.0&autoprefix=false&est=false&autorun=false