fix(issue:4224) improve CSS custom property logic

* Fixes issue less#4224 by improving CSS custom property handling.

Author: puckowski

packages/less/src/less/functions/math-helper.js

@@ -1,6 +1,15 @@
+import Call from '../tree/call';
+import CustomProperty from '../tree/custom-property';
 import Dimension from '../tree/dimension';
 
 const MathHelper = (fn, unit, n) => {
+    if (n instanceof Call && n.name === 'var') {
+        if (n.args && n.args.length === 1) {
+            return new Call(fn.name, [new CustomProperty(n.args[0].toCSS(), n._index, n._fileInfo)], n._index, n._fileInfo);
+        } else {
+            throw { type: 'Argument', message: 'var must contain one expression' };
+        }
+    }
     if (!(n instanceof Dimension)) {
         throw { type: 'Argument', message: 'argument must be a number' };
     }

packages/less/src/less/tree/custom-property.js

@@ -0,0 +1,18 @@
+/* eslint-disable no-prototype-builtins */
+import Node from './node';
+
+const CustomProperty = function (name, index, currentFileInfo) {
+    this.name = name;
+    this._index = index;
+    this._fileInfo = currentFileInfo;
+};
+
+CustomProperty.prototype = Object.assign(new Node(), {
+    type: 'CustomProperty',
+
+    genCSS: function (context, output) {
+        output.add('var(' + this.name + ')');
+    }
+});
+
+export default CustomProperty;

packages/test-data/css/_main/custom-property.css

@@ -0,0 +1,4 @@
+.test {
+  --basic-deg: 20deg;
+  --basic-deg-tan: tan(var(--basic-deg));
+}

packages/test-data/less/_main/custom-property.less

@@ -0,0 +1,4 @@
+.test {
+    --basic-deg: 20deg;
+    --basic-deg-tan: tan(var(--basic-deg));
+}