Guards on css styles and variables scoping

[SomMeri]

Guarded css styles defined inside mixin use global scope instead of local one. The consequence the same variable has different value in guard and different value in declaration.

1.) Mixin redefines @usedScope variable:

@usedScope: global;
.mixin() {
  @usedScope: mixin; 
  .global when (@usedScope=global) {
    guard-used-scope: global;
    declaration-used-scope: @usedScope;
  }
  .mixin when (@usedScope=mixin) {
    guard-used-scope: mixin;
    declaration-used-scope: @usedScope;
  }
  @usedScope: mixin; 
}

.mixin();

actual output:

.global {
  guard-used-scope: global;
  declaration-used-scope: mixin;
}

expected output:

.mixin{
  guard-used-scope: mixin;
  declaration-used-scope: mixin;
}

2.) Mixin argument redefines @usedScope:

@usedScope: global;

.mixin(@usedScope: argument) {
  .global when (@usedScope=global){
    guard-used-scope: global;
    declaration-used-scope: @usedScope;
  }
  .argument when (@usedScope=argument){
    guard-used-scope: argument;
    declaration-used-scope: @usedScope;
  }
}

.mixin();

actual output:

.global {
  guard-used-scope: global;
  declaration-used-scope: argument;
}

expected output:

.argument {
  guard-used-scope: argument;
  declaration-used-scope: argument;
}

3.) Variable defined in caller is visible:

@caller: global;
.caller() {
  .caller when (@caller=caller){ // this should use global variable value
    guard-expected-caller-but-is: @caller;
  }
  .global when (@caller=global){ // this should use global variable value
    guard-expected-global-but-is: @caller;
  }
}
.local-in-caller {
  .caller();
  @caller: caller;
}

compiles into:

.local-in-caller .caller {
  guard-expected-caller-but-is: global;
}

expected css:

.local-in-caller .global{
  guard-expected-global-but-is: global;
}

Tested with windows node.js lessc 1.6.1 (LESS Compiler) [JavaScript]

[lukeapage]

there was a bug in guarded mixins that resulted in some frankly odd behaviour.

the only thing fixing it broke was this test

.light when (lightness(@a) > 50%) {
  color: green;
}
.dark when (lightness(@a) < 50%) {
  color: orange;
}
@a: #ddd;

.see-the {
  @a: #444; // this mirrors what mixins do - they evaluate the guards at the point of definition
  .light();
  .dark();
}

.hide-the {
  .light();
  .dark();
}

and previous the local definition of @a changed which of the mixins came through. which is frankly pretty odd.