Unexpected Import Order

Consider the following three files:

main.less

@import 'component';
@import 'base';

base.less

.base {
    color: red;
}

component.less

@import 'base';

.component:extend(.base) {
    color: blue;
}

Compiling main gives the following:

.component {
  color: blue;
}
.base,
.component {
  color: red;
}

I think I understand why this is happening: the compiler is scanning main.less and seeing “component” before “base.” However, I would expect that importing “base” in “component.less” would be sufficient to tell the compiler that “base” is a dependency of “component” and therefore should be included first. The fact that the locally defined dependency isn’t necessarily inserted first means that the importing file can easily screw up your order, creating subtle bugs. Worse, it may be very difficult to address because, by the time you realize it, you may have written other rules that depend on the (in my opinion) incorrect order.

[matthewwithanm]

Sorry, I don’t mean to beat a dead horse but I want to make sure I was being clear. I wasn’t talking about extends dependencies but rather file dependencies. The thing that seems strange to me is that it’s possible for a file to come before its dependencies in the compiled output.

[matthew-dean]

Huh. I guess I never had this be problem so I never thought about it.