Less doesn't compile grid-column forward slash shorthand correctly, outputting incorrect CSS

To 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.2
• nodejs version: v16.13.1
• operating 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.

[iChenLei]

https://github.com/rowanlovejoy/less_test/blob/652ff774b3c98351bdaaf538ae0ab749c05d5d0a/package-lock.json#L8145-L8150

  "snowpack-plugin-less": {
      "version": "1.0.7",
      "resolved": "https://registry.npmjs.org/snowpack-plugin-less/-/snowpack-plugin-less-1.0.7.tgz",
      "integrity": "sha512-cuFVPltfS9nf0EayN0uigoelbGrhZ6DlEAPqnIT4sv2v0mRE+f+06eHfk4J/9wKz/5E2bYsLFXED9hjnf11b4Q==",
      "dev": true,
      "requires": {
          "less": "^3.12.2",
          "tslib": "^2.1.0"
      },
      "dependencies": {

snowpack-plugin-less using less v3 to compile less file, so cause unexpected css output. @rowanlovejoy

BTW: please using vite rather than snowpack, vite is better and actively maintained.

[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.