Extend of extended selector

Extend all does not always find matches in selector generated by another extend. Such match can but does not have to be found, depending on circumstances:

• Two extend keywords are not going to be applied together into the same selector.
• Extend will be applied into another extending selector and the result will be used as third extend. They create new extending selector on the fly and that one is applied to the rest of the sheet.

The combination of these rules make it hard to predict what will be generated. It is also very hard to describe for documentation 😃 (or for newbie). I think that two extends matching the same selector should either act independently or together at the same selector, but should not create new extending selectors on the fly.

Sorry if it sounds confusing. I tried to isolate cases that work and does not work and describe them all below.

1. Two Extend All of The Same Selector

If two extend all match the same selector, less.js will not combine them. However, both of them will extend original selector:

a:first b:second {
    property: value;
}
exSelector:pseudo:extend(a:first all) {}
independentExtend:extend(b:second all) {}

compiles into:

a:first b:second,
exSelector:pseudo b:second,
a:first independentExtend { // there is no exSelector:pseudo independentExtend
  property: value;
}

I expected one of following:

//option 1
a:first b:second,
exSelector:pseudo b:second,
a:first independentExtend,
exSelector:pseudo independentExtend { 
  property: value;
}

//option 2
a:first b:second,
exSelector:pseudo independentExtend {
  property: value;
}

2. Extend All Extending Selector

If extend all matches something inside another extend all, then it is going to be extended too:

a:first b:second {
    property: value;
}
exSelector:pseudo:extend(a:first all) {}
partialMatch:extend(exSelector all) {} // extends previous extend

compiles into:

a:first b:second,
exSelector:pseudo b:second,
partialMatch:pseudo b:second {
  property: value;
}

Less.js created partialMatch:pseudo:extend(a:first all) {} on the fly and applied it to the ruleset.

3. Extend All of Extended Selector

If extend all of matches extended selector, less.js will not find it: (EDIT: fixed the example, the original version had mistake in it)

a:first b:second {
    property: value;
}
exSelector:extend(a:first all) {}
longExtendExtend:extend(exSelector b:second all) {} //extend extended selector

compiles into:

a:first b:second,
exSelector b:second { //longExtendExtend was not used
  property: value;
}

I expected one of the following:

// option 1
a:first b:second,
longExtendExtend  { 
  property: value;
}

// option 2
a:first b:second,
exSelector:pseudo b:second,
longExtendExtend  { 
  property: value;
}

All In One - Full Case

The main question is, what should be generated by following less:

a:first exSelector { // original ruleset
    property: value;
}
exSelector:extend(a:first all) {} // extends original ruleset
chained:extend(exSelector all) {} // extends previous extend and original ruleset

As it is now, less.js produces this:

a:first exSelector,
exSelector exSelector, // applied exSelector:extend(a:first all)
a:first chained, // applied chained:extend(exSelector all)
chained exSelector { // sort of applied both - I expected chained:pseudo chained
  property: value;
}

I expected it to contain following selector: chained:pseudo chained. I did not expected the chained exSelector to be there, but it can be explained, so it may be ok.

[lukeapage]

https://github.com/less/less.js/blob/master/lib/less/visitors/extend-visitor.js

Looks like we need to rip out the chaining concept there and re-implement it so that every new selector that is created has all of the extends processed on it - this would allow you to extend a selector created via another extend.

[seven-phases-max]

Ah, OK - then I’ll wash out my first post since it simply repeats (3).