mrcrowl / vscode-easy-less

Easy LESS extension for Visual Studio Code
MIT License
67 stars 23 forks source link

Problems with calc: support for strictMath or the new math options #44

Closed LenAnderson closed 4 years ago

LenAnderson commented 5 years ago

As described here:
http://lesscss.org/usage/#less-options-math

Currently the compiler calculates anything that remotely looks like a calculation and just ignores units. As a result 100vw - 100px becomes 0vw. For a long time LESS has offered the strictMath option to avoid this and only apply calculation in superfluous parentheses.
Recently this option has been deprecated in favor of a more flexible math option that offers the two previously available modes along with a couple of others.

While the aggressive calculation can be avoided by typing ~"100vw - 100px" support for either the new "math" option or just the old "strictMath" option would make life a lot easier and the LESS code more readable. It would also address the issue raised in #35.

LoganGerber commented 4 years ago

This should be changed from Enhancement to Bug. With the settings the way they currently are, something like this is rendered impossible:

@size1 = 30px;
@size2 = 40px;

.div {
    height: calc(100% - @size1 - @size2);
}

The above should be compiled to the following css:

.div {
    height: calc(100% - 30px - 40px);
}

With the settings the way they are, this is the css output:

.div {
    height: calc(30%);
}

And with the suggested bandaid fix in the OP, this is the css output:

.div {
    height: calc(100% - @size1 - @size2); // INVALID CSS
}
LenAnderson commented 4 years ago

@LoganGerber more crutches, but you can work around your problem by typing this:

.div {
    height: ~"calc(100%" - @size1 - @size2 ~")";
}

which will turn into:

.div {
  height: calc(100% - -10px );
}
mrcrowl commented 4 years ago

@LenAnderson @LoganGerber just trying to repro this in v1.6.2 of Easy LESS and finding it's not still happening, as described above.

Thinking this must be due to the changes to how calc is processed in Less 3.x, which was introduced in Easy LESS v1.5.0.