When using an @import (reference), mixins that contain an & selector get added to the compiled output improperly

When I import a less file with the (reference) directive, I expect to see no CSS output from that file.

However, I am seeing content being output from the imported file when a mixin contains an & selector.

mixin.less

.mixin-no-parent-selector() {
  background-color: red;
}
.mixin-with-parent-selector() {
  &:first-child{ //  USING AN & SELECTOR HERE
    background-color: blue;
 }
}

less-for-reference.less

.container-1 {
   .mixin-no-parent-selector();
}
.container-2{
   .mixin-with-parent-selector()
}

style.less

/*!
 * styles.less
 */
@import "mixin.less";
@import (reference) "less-for-reference.less";

Expected Output

/*!
 * styles.less
 */

Actual Output

/*!
 * styles.less
 */

.container-2:first-child{
    background-color: blue;
}

[almeidap]

@seven-phases-max For sure, I did not forget that less.js is a volunteer-based project and I am very grateful to the contributors. I just wanted to bring the focus back to the issue itself instead of not-so-useful (imo) discussions about the usage of imports.

I recently started refactoring our LESS resources as our framework hit the IE stylesheets limit when concatenated with other CSS project files. Fixing the (reference) import issue will help me to avoid duplicate selectors and better control outputted resources.

[SomMeri]

This should be fixed by #2729 .