Bug with .extend() that does not output media queries located in an included file with the "reference" option

[gdelhumeau]

The example is better than my words to explain the problem:

// file1.less
@media (max-width:767px) {
  .class1{
    color: #ff0000;
  }
}

.class2{
  border: 1px solid black;
}

and

// file2.less
@import (reference) "file1.less";

.class3{
  &:extend(.class1);
  &:extend(.class2);
  background-color: #0000ff;
}

Now I compile file2.less.

Results with less.js:

@media (max-width: 767px) {
  .class3 {
    color: #ff0000;
  }
}
.class3 {
  border: 1px solid black;
}
.class3 {
  background-color: #0000ff;
}

Results with less4j:

.class3 {
  border: 1px solid black;
}
.class3 {
  background-color: #0000ff;
}

The media query is missing.

[SomMeri]

@supports has the same problem:

file1.less:

@media (max-width:767px) {
  .class1{
    color: #ff0000;
  }
}

@supports(display: flex) {
  .class1{
    display: flex;
  }
}

Main file:

@import (reference) "file1.less";

.class3{
  &:extend(.class1);
}

Actual result:

.class3 {
  background-color: blue;
}

Expected result:

@media (max-width:767px) {
  .class3{
    color: #ff0000;
  }
}

@supports(display: flex) {
  .class3{
    display: flex;
  }
}

Note: less.js ignored supports too. I opened new issue for it (less.js 2359) there.

[gdelhumeau]

Thanks!