less.js: 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;
}
About this issue
- Original URL
- State: closed
- Created 10 years ago
- Comments: 30 (17 by maintainers)
Commits related to this issue
- XWIKI-11408: Menu Application: Improve default look to make it better-looking with the Flamingo skin - Because of the bug https://github.com/less/less.js/issues/1968 and after the commit https://gith... — committed to xwiki/xwiki-platform by evalica 10 years ago
- Fixing import by reference - refactored how import reference works - refactored to-css-visitor (this is side product, it was getting complicated) - fixes issues #1851, #1896, #1878, #2716, #1968, #... — committed to SomMeri/less-rhino.js by deleted user 9 years ago
@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.