Extend Scoping Across At-Rules#

&:extend() in Less must respect the scoping rules of CSS at-rules: an extend declared inside @media (tv) should only apply to selectors within that same block, while an extend at the root level should apply globally. This scoping is implemented entirely in extend-visitor.js through a stack called allExtendsStack.

Two-Phase Processing#

Extend resolution runs in two sequential visitor passes over the AST:

1. ExtendFinderVisitor — Scans the tree and attaches an allExtends array to every at-rule node, collecting the extend declarations found inside it. 1
2. ProcessExtendsVisitor — Walks the tree again, using those per-node allExtends arrays to rewrite selectors. 2

allExtendsStack Mechanics#

Phase 1 — ExtendFinderVisitor

The stack starts as [[]] — one empty array for the root scope 3.

When entering a Media or AtRule node, a new empty array is pushed as that node's allExtends property:

• visitMedia and visitAtRule: push a fresh [] onto the stack.
• visitMediaOut and visitAtRuleOut: pop the stack.

When visitRuleset encounters an extend declaration (e.g., .tv-lowres :extend(.ext1 all)), it pushes the extend into the top of the stack — which is whichever at-rule is currently in scope 4. This means extends are automatically segregated to the innermost enclosing at-rule.

Phase 2 — ProcessExtendsVisitor

When entering a Media or AtRule node, the visitor builds a merged extends list for that scope 5:

newAllExtends = atRuleNode.allExtends // extends declared inside this block
              + allExtendsStack.top() // extends from all outer scopes
              + doExtendChaining(...) // chained extends

This merged list is pushed onto the stack so that visitRuleset (which does the actual selector rewriting) always works against the full set of extends visible in the current scope 6. On exit, the merged list is popped 7.

Container Node Coverage#

@container is represented by the Container tree node. Its prototype is set to new AtRule(), giving it type: 'Container' 8. The Visitor class dispatches to visitor methods by constructing visit${node.type} at runtime 9; since no visitContainer method exists, the Visitor falls back to the generic visitAtRule/visitAtRuleOut handlers. Container nodes are therefore handled identically to any other at-rule for extend scoping purposes — no special case needed.

Worked Example#

Given 10:

.ext1 .ext2 { background: black; }

@media (tv) {
  .ext1 .ext3 { color: inherit; }
  .tv-lowres :extend(.ext1 all) { background: blue; }
  @media (hires) {
    .ext1 .ext4 { color: green; }
    .tv-hires :extend(.ext1 all) { background: red; }
  }
}
.all:extend(.ext1 all) {}

The output CSS 11 shows the scoping in action:

• .all (root-level extend) matches .ext1 .ext2 outside any at-rule.
• .tv-lowres (inside @media (tv)) matches .ext1 .ext3 within that block, and also .ext1 .ext2 outside it — because outer extends are merged in during Phase 2.
• .tv-hires (inside @media (tv) and (hires)) similarly picks up selectors from outer scopes.

Root-level extends do not gain selectors from inside at-rules.

Key Files#