raffia icon indicating copy to clipboard operation
raffia copied to clipboard

Confusing error message for invalid Less variable interpolation syntax

Open uncenter opened this issue 9 months ago • 1 comments

This is a bit of an odd scenario, but bear with me. I have the following less code.

.foo {
  @bar: #fff;
  --baz: '@{bar}';
  --qux: '@{darken(@bar, 50%)}';
}

In Less, this compiles without error to produce the following output:

.foo {
  --baz: '#fff';
  --qux: '@{darken(@bar, 50%)}';
}

https://lesscss.org/less-preview/#eyJjb2RlIjoiLmZvbyB7XG4gIEBiYXI6ICNmZmY7XG4gIC0tYmF6OiAnQHtiYXJ9JztcbiAgLS1xdXg6ICdAe2RhcmtlbihAYmFyLCA1MCUpfSc7XG59IiwiYWN0aXZlVmVyc2lvbiI6IjQuMy4wIiwibWF0aCI6InBhcmVucy1kaXZpc2lvbiIsInN0cmljdFVuaXRzIjpmYWxzZX0=

As you can see, for the --baz property the @bar variable is successfully interpolated. On the other hand, the --qux property is not interpolated with the value of @bar and is instead the exact same string as the input, down to keeping the @{} interpolation syntax brackets.

I believe this is because the interpolated value must be an identifier/variable, and cannot be a function with parenthesis and arguments. It is likely a bug with Less that it isn't erroring on this invalid syntax? Raffia, to its credit, errors given that input (https://raffia-play.vercel.app/?code=H4sIAAAAAAAAA9NLy89XqOZSUHBISiyyUlBOS0uzBvKSEqusFNQdqoGCteoggcLSCrBASmJRdmqeBki1joKpgaomSLoWAFCbKZ1GAAAA&syntax=less).

With the context out of the way, my issue is moreso that the error doesn't imply the issue that is occurring.

expect token ;, but found {

I would expect something along the lines of...

expect token }, but found {

As after the @{identifier, the next character should be the interpolation closing brace, }, but in the case above, is the (invalid) opening/left parenthesis of the arguments list (. I'm not sure why the parser would be expecting a semicolon there, or why it found the opening brace of something instead?

uncenter avatar Apr 09 '25 01:04 uncenter