Support CSS `@property` rule (Less.js 3.0.0) about less.php HOT 2 CLOSED

Example:

@property --item-size {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 40%;
}

html {
  --item-size: 20%;
}

.example {
  width: var(--item-size);
}

Upstream Less.js 2.5.3 at http://ecomfe.github.io/est/fiddle/#version=2.5.3&autoprefix=false&est=false&autorun=false

Parse error: directive options not recognised
Line 1: @property --item-size {

This is similar to how Less.php v4.4.0 failed:

lessc: Less_Exception_Chunk: ParseError: Unexpected input in input.less on line 1, column 10
1| @property --item-size {

NOTE: This is unrelated to the Less.js "property" class, which refers to each name/value declaration in a CSS block, for example, color: red is a property.

In Less.js there is also the "Property accessor" feature new in Less.js v3.5.0, which allows any property to be accessed as if it is a Less variable. E.g. color: red can be followed by border-color: $color.

https://lesscss.org/features/#variables-feature-properties-as-variables-new-
https://lesscss.org/features/#detached-rulesets-feature-property-variable-accessors

Finally, there is string interpolation for properties at https://lesscss.org/features/#variables-feature-properties

@foobar: color;

.widget {
  @{foobar}: #0ee;
  background-@{foobar}: #999;
}

But if I understand correctly, this request isn't for any Less.js feature, but rather about CSS's native @property. This is meant to work transparently and won't be documented in Less.js since it is a CSS feature. The bug is that in Less.js 2.5.3, this confused the Less parser because it didn't know about that CSS feature yet.

from less.php.

This has been resolved as part of Less.php 5.0, as part of porting over the permissive parsing and arbitrary at-rule support (https://phabricator.wikimedia.org/T368408).

from less.php.