DotLess LessCss compiler is different to WebEssent

Question

I'm using dotless to parse LessCss at runtime. This is mostly successful but I have one scenario where it doesn't work as intended.

Given the following LessCss:

@tileWidth: 50px;
@tileMarginX: 5px;
@gridWidth: 2;

// recursive less to generate all x positions down to 1
.position-x(@maxIndex) when (@maxIndex > 0) {
    [data-col="@{maxIndex}"] {
        left: ((@maxIndex - 1) * @tileWidth) + (@tileMarginX * ((@maxIndex * 2) - 1));
    }

    .position-x(@maxIndex - 1);
}

.position-x(@gridWidth);

WebEssentials 2013 Update 3 will compile to:

[data-col="2"] {
  left: 65px;
}
[data-col="1"] {
  left: 5px;
}

LessEngine.TransformToCss will output:

[data-col="@{maxIndex}"] {
    left: 65px
}    
[data-col="@{maxIndex}"] {
    left: 5px
}

Is this syntax not supported in DotLess?
How can I alter the Less code to get my expected output?

Answer 1

According to https://github.com/dotless/dotless/issues/395 dotless just does not support interpolation in attribute selectors so you need just "hide" the attribute in a variable, e.g.:

@tileWidth: 50px;
@tileMarginX: 5px;
@gridWidth: 2;

.position-x(@n) when (@n > 0) {
    @attr: ~'[data-col="@{n}"]';
    @{attr} {
        left: (@n - 1) * @tileWidth + (2 * @n - 1) * @tileMarginX;
    }

    .position-x(@n - 1);
}

.position-x(@gridWidth);