Value is not calculated for css --variables

[Dagur]

To reproduce:

.test {
  width: 20px + 40px;  
  --width: 20px + 40px;  
}

Current behavior:

output is

.test {
  width: 60px;
  --width: 20px + 40px;
}

Expected behavior:

I expected

.test {
  width: 60px;
  --width: 60px;
}

Environment information:

• less version: 4.1.3
• nodejs version: Whatever http://lesscss.org/less-preview/ uses
• operating system: Whatever http://lesscss.org/less-preview/ uses

This can cause unexpected problems when combined with less @variables.

[matthew-dean]

This is by design and not a bug. For example, let's say you had this:

.test {
  --width: 20px + foo({ 40: 'px' });
}

What should Less do with this? The value you have for --width is 100% perfectly valid, and you could be intending to evaluate it as JavaScript, so it couldn't throw an error as an invalid expression. Instead, you have to evaluate it before-hand:

.test {
  @width: 20px + 40px;
  --width: @width;
}

Less evaluating at-rules in custom properties has its own add-in side-effects / bugs, but that's what is currently supported.

[Dagur]

Maybe this bug should be about lack of documentation then? I tried to look this up and found nothing.