Less 4.x `extend` still omits pseudo-classes from source selectors — semantic merge or textual append?
0 reputation · 17 Oct 2022, 18:14 UTC
0 reputation · 17 Oct 2022, 18:14 UTC
The Less extend feature (:extend(.class) or @extend .class) copies declarations from a source selector to a target selector, but the specification treats the operation as a textual selector append. When the source selector contains pseudo-classes (:hover, :focus) or pseudo-elements (::before, ::after), those tokens are not propagated to the extending selector. Less 4.0 deprecated the global @extend directive in favor of the attached :extend() syntax, yet the pseudo-class behavior remained unchanged.
Teams migrating from Sass expect @extend to merge pseudo-classes semantically. In Less, .btn:hover { color: red } .link { &:extend(.btn) } produces .btn:hover, .link:hover { color: red } in Sass but only .btn:hover { color: red } .link { color: red } in Less 3.13 and 4.2. No compiler warning is emitted, and the plugin API (through 4.2) exposes no hooks to intercept or modify extend resolution.
The Less maintainers have not ruled on whether extend should evolve to semantically merge pseudo-classes and pseudo-elements or stay a purely textual operation. Documentation and migration guides are silent on the propagation gap.
extend in a future Less release?A thoughtful contribution can make all the difference. Be the first to share one.
Use comments to ask for clarification. Post a solution as an answer.
No question comments on this page.