less / less/less.js

The proposed feature set for :extend

Open
#2,101 25 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

feature request up-for-grabs
Dominant language
JavaScript
Stars
17k
Forks
3.4k
Avg merge
7h 42m
Merged PRs (30d)
26

Description

On issue #1155, there was community consensus on the usage of extend in a way that offered flexibility for different use cases but kept things simple through the use of keyword flags. I've pulled out the relevant section/syntax that was agreed upon:

:extend( selector [exact|any] [shallow|deep] [all])
  • exact [default] - Match complete selectors (:extend(.button exact) matches .button {} but not #main .button a - :extend(.a .b) is considered an exact match to .a { .b { } })
  • any - Match partial selector (:extend(.button any) matches .button {} and #main .button a)
  • shallow [default] - extend only root properties (.a:extend(.button shallow) will not include hover in .button { &:hover { } })
  • deep - extend all nested selectors/properties (.a:extend(.button deep) will include hover in .button { &:hover { } })
  • all - set "any" and "deep" to true. Extend all matches, partial and exact, and extend all base and nested properties

Example:

.b:extend(.a);  // because of defaults, exact=true, shallow=true
.b:extend(.a any);  // exact=false, shallow=true
.b:extend(.a deep);  //exact=true, shallow=false
.b:extend(.a all); // exact=false, shallow=false

The reasons, arguments, and use cases for these other uses of :extend are documented in issue #1155. After the discussion and consensus, the first case and last case were implemented because they were easier to implement first, but I think the remaining implementation got lost in the noise. I'd love to see the rest of :extend implemented as I think these other use cases are still valid and there's various issues that come up here that essentially relate to what's still missing. (See: less/less-docs#177).

I'd love to see the work on :extend continue! (And other great ideas, like extending mixins.)

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

No files or tests are named. Start by reading issue #1155 and less-docs#177, then inspect the existing :extend implementation for the already-supported default and all cases. Done means implementing the remaining exact/any and shallow/deep combinations described here, with coverage for the listed examples.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
compilers
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.