less / less/less.js

Global mixins and mixins inside namespaces handle scopes differently

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

Nobody has claimed this yet.

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

Description

Scoping of global mixins is handled differently then scoping of mixin inside namespaces:

  • If I call mixin directly, it does not look into callers scope until it searched whole mixins scope. It will go through all parents, including the global scope.
  • If I call mixin from namespace, it searches only local scope and then proceeds to callers scope. Anything defined in definition parents scope is ignored.

Should they behave differently? If no, which version is correct?

Direct mixin call - mixin searches definition space first. It will never hit the caller:

/* define global mixin and variable */
.content() { 
  mixin:global;
}
@content: global;

/* mixin to be called */
.mobile() {
    variable: @content;
    .content();
}

.big-desktop-button {
  /* define local mixin and variable */
  .content() { 
    mixin:caller;
  }
  /* call mixin */
  @content: caller;
  .mobile();
}

compiles into:

.big-desktop-button {
  variable: global;
  mixin: global;
}

If I place exactly the same mixin into a namespace, output changes:

.content() { 
  mixin:global;
}
@content: global;

#namespace() {
  .mobile() {
    variable: @content;
    .content();
  }
}

.big-desktop-button {
  .content() { 
    mixin:caller;
  }
  @content: caller;
  #namespace > .mobile();
}

compiles into:

.big-desktop-button {
  variable: caller;
  mixin: caller;
}

The same effect happens with variables and mixins defined in namespace itself:

#namespace() {

  .content() { 
    mixin:namespace;
  }
  @content: namespace;

  .mobile() {
    variable: @content;
    .content();
  }
}

.big-desktop-button {
  .content() { 
    mixin:caller;
  }
  @content: caller;
  #namespace > .mobile();
}

compiles into:

.big-desktop-button {
  variable: caller;
  mixin: caller;
}

Tested on 1.4.0-beta-b4 with windows node.js.

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

Reproduce both namespace and direct-mixin examples using the reported Less 1.4.0-beta-b4 behavior and compare the generated CSS. Trace the scope-resolution behavior for variables and mixins, then establish which scoping rule should apply consistently and document the expected output.

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
28/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.