less.js
less.js copied to clipboard
3.9 | Functions added by @plugin inside #namespace cannot be referenced
Functions that are added to a #namespace
by a @plugin
directive cannot be referenced by mixins residing in the namespace.
Given a simple plugin that adds a trivial plugin function, let's say lowercase
, and the following Less sample:
#namespaced {
@plugin "./plugins/lowercase.js";
.mixin(@value) {
value : lowercase(@value);
}
}
.test {
#namespaced.mixin("FOO");
}
the actual output I'd get is:
.test {
value : lowercase("FOO");
}
whereas the expected output would be:
.test {
value : "foo";
}
WORKAROUND
Problem has two easy workarounds, both of which have issues of their own:
- make the
@plugin
directive global -- but this leaks it to other stylesheets (!!) - scope the
@plugin
directive to the mixin -- but this is not practical for multiple mixins and not possible for functions used inwhen
mixin guards.
(I actually think leaking it to other stylesheets is a regression. Don't think the 2.x @plugin
directive did that...)
The only bullet-proof workaround is using an unlocking-mixins pattern: That is:
- nest all the actual mixin functionality of the namespace in yet another mixin;
- create facade duplicates of the original mixins and put those directly in the namespace; and finally
- 'unlock' the nested mixins inside inside the facades and chain the call.
E.g.
#namespaced {
.mixin(@value) {
#namespaced._();
.mixin(@value);
}
._() {
@plugin "./plugins/lowercase.js";
.mixin(@value) {
value : lowercase(@value);
}
}
.test {
#namespaced.mixin("FOO");
}
Needless to say; this is a lot of undesired boilerplate.
Can you do:
& {
@plugin "./plugins/lowercase.js";
#namespaced {
.mixin(@value) {
value : lowercase(@value);
}
}
.test {
#namespaced.mixin("FOO");
}
}
Other than workarounds, I don't think this can be reasonably addressed without rewriting the evaluation order algorithm.
That's an interesting idea, but afaik won't publish the namespace. ...which is sort of what I was after, as I'm attempting to build library functionality for re-use elsewhere. :wink: