Less doesn't compile grid-column forward slash shorthand correctly, outputting incorrect CSS
See original GitHub issueTo reproduce:
// In a .less file, add a rule containing the below property
.some-class {
grid-column: 1 / -1
}
Current behavior:
The grid-column
CSS property (part of the CSS Grid) supports a shorthand form using a forward slash, as shown in the example above, which sets the grid lines a column starts (before the slash) and ends on (after the slash). (See https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column) Less currently doesn’t process this shorthand correctly; Less compiles the example above to grid-column: -1
, which sets column to start from line -1.
Expected behavior:
The rule grid-column: 1 / -1
should be not altered during compilation; it is standard CSS. In the example above, the property in the output CSS should appear exactly as it does in the Less source file.
Environment information:
less
version: 4.1.2nodejs
version: v16.13.1operating system
: Windows 10 Pro 64-bit
A workaround I have been using for this problem is to escape the property value, so instead of grid-column: 1 / -1
, I will write grid-column: ~'1 / -1'
.
My theory is that this issue occurs because Less is trying to do a division operation using the numbers of either side of the slash.
Issue Analytics
- State:
- Created 2 years ago
- Comments:6 (3 by maintainers)
https://github.com/rowanlovejoy/less_test/blob/652ff774b3c98351bdaaf538ae0ab749c05d5d0a/package-lock.json#L8145-L8150
snowpack-plugin-less
using less v3 to compileless
file, so cause unexpected css output. @rowanlovejoy@iChenLei Here’s a minimal reproduction repo (or at least as minimal as I know how to do): https://github.com/rowanlovejoy/less_test/tree/main
Inside styles.less, the currently broken code is uncommented; the working code is commented out above it.