Parser doesn't error on invalid variable interpolation syntax

[uncenter]

To reproduce:

Playground link: https://lesscss.org/less-preview/#eyJjb2RlIjoiLmZvbyB7XG4gIEBmaW5rOiAjZmZmO1xuICBjb2xvcjogJ0B7ZGFya2VuKEBmaW5rLCA1MCUpfSc7XG59IiwiYWN0aXZlVmVyc2lvbiI6IjQuMy4wIiwibWF0aCI6InBhcmVucy1kaXZpc2lvbiIsInN0cmljdFVuaXRzIjpmYWxzZX0=

.foo {
  @fink: #fff;
  color: '@{darken(@fink, 50%)}';
}

Current behavior:

Compiles to the following with no errors:

.foo {
  color: '@{darken(@fink, 50%)}';
}

The value of .foo's color property is not interpolated with the value of @fink and is instead the exact same string as the input, down to keeping the @{} interpolation syntax.

Expected behavior:

A parse error on line 3, color: '@{darken(@fink, 50%)}';, given that invoking a function within the variable interpolation syntax is invalid.

Note

To do what this attempts to do, you must invoke the function separately in a variable and then interpolate that variable:

.bar {
  @fink: #fff;
  @bink: darken(@fink, 50%);
  color: '@{bink}';
}

(Playground: https://lesscss.org/less-preview/#eyJjb2RlIjoiLmJhciB7XG4gIEBmaW5rOiAjZmZmO1xuICBAYmluazogZGFya2VuKEBmaW5rLCA1MCUpO1xuICBjb2xvcjogJ0B7Ymlua30nO1xufSIsImFjdGl2ZVZlcnNpb24iOiI0LjMuMCIsIm1hdGgiOiJwYXJlbnMtZGl2aXNpb24iLCJzdHJpY3RVbml0cyI6ZmFsc2V9)

Environment information:

• less version: v4.3.0
• nodejs version: n/a
• operating system: n/a

[dosubot]

Hello @uncenter! I'm Dosu, a bot here to help you solve bugs, answer questions, and become a contributor. I'm ready to assist while you wait for a human maintainer.

The issue you're encountering is related to the use of functions within variable interpolation in Less. According to the expected behavior, invoking a function directly within the variable interpolation syntax (e.g., @{darken(@fink, 50%)}) is not valid and should result in a parse error. However, the current behavior you're observing is that the Less parser does not throw an error and instead outputs the string as-is.

The correct approach to achieve the desired functionality is to first assign the result of the function to a variable and then use that variable in the interpolation. Here's how you can do it:

.bar {
  @fink: #fff;
  @bink: darken(@fink, 50%);
  color: '@{bink}';
}

This method ensures that the function is evaluated first, and the result is then used in the interpolation, which is the expected and valid syntax in Less. Unfortunately, the current parser behavior does not enforce this rule by throwing an error, which might be considered a limitation or bug in the parser's error handling for this specific case.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}

[matthew-dean]

That's not how interpolation syntax works. You can't put anything inside, only a variable name. @dosu is also wrong that it would cause a parsing error. It's not recognized as an interpolation statement. I suppose it could try to detect that it's a start with an incorrect end? 🤔 But that's not a current feature.

[uncenter]

That's not how interpolation syntax works. You can't put anything inside, only a variable name. @dosu is also wrong that it would cause a parsing error. It's not recognized as an interpolation statement. I suppose it could try to detect that it's a start with an incorrect end? 🤔 But that's not a current feature.

I'm aware that it is invalid interpolation syntax, but my point is that it would be helpful if the parser would error in cases like this, instead of silently ignoring it. I guess it would be a feature request than as you say?

[matthew-dean]

@uncenter oh okay sorry that wasn't clear