Lazy variables of css custom properties with less functions (even if it's overwritten) will break building

[weareoutman]

To simplify the issue, let's assume a third-party-library which contains:

// `library/style.less`
@base-color: green;
@dark-color: darken(@base-color, 50%);

.some-class {
  color: @base-color;
  backgroundColor: @dark-color;
}

And my app would like to override the colors to css custom properties:

// app.less
import "~library/style.less";

@base-color: var(--primary-color);
@dark-color: var(--bg-color);

:root {
  --primary-color: #fff;
  --bg-color: #000;
}

html[data-theme="dark"] {
  --primary-color: #000;
  --bg-color: #fff;
}

In which I want to override both the @base-color and @dark-color less variables. However, the less will fail with LessError: error evaluating function `darken`: Argument cannot be evaluated to a color, even if the @dark-color in library is actually overridden in my app, and no darken() function should be called.

[kpaxqin]

Same issue in my project.

IMO the darken() should not been called since its already overridden.

[srfaytkn]

+1

[FengShangWuQi]

+1

[lucataglia]

Same issue, any news ? I also posted a question on stack overflow but no solution nor workaround yet.

[da-anda]

same issue

[iChenLei]

Sorry for slow response, I will investgate this issue. 🕵️

[snoweastcn]

same issue

[tusharrathi1993]

same issue

[crossan007]

I'm having a similar issue: #3611 (comment)

[crossan007]

Looks like #3721

[imaliouris]

Looks like #4275. Do we have any update this? It really blocks much of our work..

[nsika]

Hitting the same issue when trying to use css variables in a UIkit theme.