less / less/less.js

Extend of extended selector

Open
#1,641 6 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug medium priority
Dominant language
JavaScript
Stars
17k
Forks
3.4k
Avg merge
7h 42m
Merged PRs (30d)
26

Description

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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the four reduced selector examples in the issue and compare the current output with the stated expectations. Trace how chained and independently matching extend-all selectors are handled; done means the semantics are agreed and the chosen behavior is covered by tests.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
compilers
Issue type
Bug
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.