fix: Allows less overriding of imported css custom properties.

[lumburr]

Overwrite declaration in import file.

What: fix #3563

Checklist:

• [ ] Documentation
• [x] Added/updated unit tests
• [x] 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: 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);