Confusing error message for invalid Less variable interpolation syntax
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?