Support CSS @property rule (Less.js 3.0.0)

[Fedik]

Hi :)

A feature request for @property rule https://developer.mozilla.org/en-US/docs/Web/CSS/@property
It seems already implemented upstream https://github.com/puckowski/less.js/blob/master/packages/less/src/less/tree/property.js

Thank you.

[Krinkle]

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.

[Krinkle]

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