fix: Allows less overriding of imported css custom properties.

[lumburr]

Overwrite declaration in import file.

What: fix #3563

Checklist:

• Documentation
• Added/updated unit tests
• Code complete

[matthew-dean]

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? 🤔

[lumburr]

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:

less.js/packages/less/src/less/tree/variable.js

Lines 29 to 44 in 7491578

	variable = this.find(context.frames, function (frame) {
	const v = frame.variable(name);
	if (v) {
	if (v.important) {
	const importantScope = context.importantScope[context.importantScope.length - 1];
	importantScope.important = v.important;
	}
	// If in calc, wrap vars in a function call to cascade evaluate args first
	if (context.inCalc) {
	return (new Call('_SELF', [v.value])).eval(context);
	}
	else {
	return v.value.eval(context);
	}
	}
	});

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);