Global mixins and mixins inside namespaces handle scopes differently
Nobody has claimed this yet.
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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