less / less/less.js

Losing wildcard selector inside mixins with ampersand

Open
#3,316 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

Using gulp-less v4.0.1, so with less v2.6.x || v3.7.1
In this particular case the * selector gets lost in the compiling the mixin:

Example

.nth-child(@child, @start, @increment, @decrement, @rules) when (@child > 0) {
  .nth-child(@child - 1, @start, @increment, @decrement, @rules);
  &:nth-child(@{child}) {
    @rules();
  }
}

@animation-delay: { animation-delay: @start + (@child * @increment) - (@child * @decrement); };


.content > * {
  animation-delay: 150ms; // @start + @child * @increment
  .nth-child(@child:3, @start:0ms, @increment:50ms, @decrement:0ms, {
    @animation-delay();
  });
}

Result

.content > * {
  animation-delay: 150ms
}
.content > :nth-child(1) {
  animation-delay: 50ms
}
.content > :nth-child(2) {
  animation-delay: .1s
}
.content > :nth-child(3) {
  animation-delay: 150ms
}

Expected Result

.content > * {
  animation-delay: 150ms
}
.content > *:nth-child(1) {
  animation-delay: 50ms
}
.content > *:nth-child(2) {
  animation-delay: .1s
}
.content > *:nth-child(3) {
  animation-delay: 150ms
}

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 source file or test is named. Start by compiling the provided LESS mixin with the stated gulp-less and less versions, compare the actual and expected selectors, and trace the compiler path handling the ampersand and wildcard selector. Done means the generated selectors retain * before :nth-child(...) and the regression is covered by a test.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
compilers
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.