extend does not work on a selector which has a variable (not extending a selector with a variable)

[AlexVallat]

trafficstars

I understand from the docs that extends can't be used to extend a selector with a variable in it, but it is supposed to be able to be attached to an interpolated selector, according to the docs.

Using the exact code in the docs:

.bucket {
  color: blue;
}
@{variable}:extend(.bucket) {}
@variable: .selector;

I am getting the result

.bucket {
  color: blue;
}

not the expected (and documented) result

.bucket, .selector {
  color: blue;
}

I've verified this using the http://lesscss.org/less-preview/ playground, so it isn't something weird about my install or configuration.

[matthew-dean]

Where in the docs did you get that code?

[AlexVallat]

http://lesscss.org/features/#extend-feature-selector-interpolation-with-extend

(look down a bit to the last example, labelled "However, :extend attached to an interpolated selector works:"

[matthew-dean]

Okay, probably a bug added when selector re-parsing was added. You would expect that examples from docs would all be in unit tests, but that's unfortunately not the case.

[rgroothuijsen]

It does appear to be caused by an additional parsing call, which overwrites the existing selectors at this point, removing its extendList information in the process. Recovering the selector's previous extendList did produce the expected result.

[Moebytes]

Hi, I spent hours trying to debug this thinking that it was a problem with my code. I would love to see a fix for this issue.

/* Loop extends a selector, such as h1, h2, h3... */
.extendLoop (@dest; @selector; @start: 1; @end: 6; @incr: 1) when (@start <= @end) {
    @{selector}@{start} {
        &:extend(@{dest});
    }
    .extendLoop(@dest, @selector, @start + @incr, @end, @incr);
}

Expected:

span {
    color: blue;
}
.extendLoop(span, h)

span, h1, h2, h3, h4, h5, h6 {
    color: blue;
}

Actual:

span {
    color: blue;
}

Extending span directly instead of the variable @{dest} has the correct output.