Less.js: Css grid-columns got transpiled to different value

[jurosh]

Using less compiler, css grid property grid-columns got transpiled to different value. instead of 2 / -1, output value is -2, so that it displays different way.

Input file:

grid-column: 2 / -1;

Output of less preprocessor:

grid-column: -2;

Expected output:

grid-column: 2 / -1;

Less version 2.7.3.

This css feature is quite new, even I've just learned it recently here https://stackoverflow.com/questions/47319464/make-a-column-span-to-the-end-of-the-grid/47320149#47320149
but looks like transpilation is incorrect.

PS: is possible to temporary fix transpilation somehow ?

[seven-phases-max]

Use strict-math.

[seven-phases-max]

Closing in favour of #1880.

[jurosh]

Thanks @seven-phases-max , it did the trick.
..but anyway probably shouldn't that option affect functionality (layout) even when it's turned off ?

[jurosh]

Ah see, it's being solved #1880

[matthew-dean]

Yes, I went to a learning seminar on CSS Grid recently and saw that here's another place where people using Less will run into this. / were not common in CSS when Less was first written, so it's become more of a problem over time.

[matthew-dean]

@jurosh Note you can also write: grid-column: ~"2 / -1"; but we're hoping to fix this so neither of those things are required.

[arvinxx]

Hello, I meet this problem too. Please tell me whether there's another new and clean syntax or not besides grid-column: ~"2 / -1"; and strict math mode by now? Thank very much.

[seven-phases-max]

Please tell me whether there's another new and clean syntax ...

No, there's not.

[matthew-dean]

@arvinxx Essentially, the problem of division operators needs to be resolved. See #1880. The holdup is basically there hasn't been community consensus on the best way to resolve the conflict. Read through the thread when you have time.