Open lumburr opened 2 years ago
I see this works in this test case, but I'm kind of suspicious about how this works. This works by just re-assigning the declaration pre-eval? 🤔
Let's first look at how the problem happened. For the
@import "./a.less";
@base-color: var(--primary-color);
@dark-color: var(--bg-color);
// a.less
@base-color: green;
@dark-color: darken(@base-color, 50%);
less
appends the imported AST to the source AST, so the AST we process is similar to the following structure
- Declaration base-color // green;
- Declaration dark-color // darken(@base-color, 50%);
- Declaration base-color // var(--primary-color);
- Declaration dark-color // var(--bg-color);
When the program eval()
the second nodeDeclaration dark-color // darken(@base-color, 50%)
, where @base-color
is find()
to be var(--primary-color)
at:
https://github.com/less/less.js/blob/7491578403a5a35464772c730854c3a5169c0de7/packages/less/src/less/tree/variable.js#L29-L44
Then the value of the node is darken(var(--primary-color), 50%)
. Since var(--primary-color)
cannot be converted to color, the node cannot be serialized by less.
The current modification scheme is to overwrite the duplicate declaration when appending the AST in the import, so that the structure of the AST is as follows:
- Declaration base-color // var(--primary-color);
- Declaration dark-color // var(--bg-color);
- Declaration base-color // var(--primary-color);
- Declaration dark-color // var(--bg-color);
Overwrite declaration in import file.
What: fix #3563
Checklist: