[FEATURE] Keep linking of less vars for css vars (#115)

lib/index.js

@@ -302,7 +302,10 @@ Builder.prototype.build = function(options) {
 							if (err) {
 								reject(err);
 							} else {
-								result.cssVariables = tree.toCSS(assign({}, options.compiler));
+								const CSSVariablesPointerPlugin = require("./plugin/css-variables-pointer");
+								result.cssVariables = tree.toCSS(assign({}, options.compiler, {
+									plugins: [new CSSVariablesPointerPlugin()]
+								}));
 								resolve(result);
 							}
 						});

lib/plugin/css-variables-collector.js

@@ -141,7 +141,7 @@ CSSVariablesCollectorPlugin.prototype = {
 	visitVariable(node, visitArgs) {
 		// convert less variables into CSS variables
 		if (this._isRelevant()) {
-			return new less.tree.Call("var", [new less.tree.Anonymous(node.name.replace(/^@/, "--", node.index, node.currentFileInfo, node.mapLines))]);
+			return new less.tree.Call("var", [new less.tree.Anonymous(node.name.replace(/^@/, "--"), node.index, node.currentFileInfo, node.mapLines)]);
 		}
 		return node;
 	},

lib/plugin/css-variables-pointer.js

@@ -0,0 +1,73 @@
+// Copyright 2020 SAP SE.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http: //www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+// either express or implied. See the License for the specific
+// language governing permissions and limitations under the License.
+
+"use strict";
+
+const less = require("../thirdparty/less");
+
+const CSSVariablesPointerPlugin = module.exports = function(config) {
+	this.config = config;
+	// eslint-disable-next-line new-cap
+	this.native = new less.tree.visitor(this);
+	this.ruleStack = [];
+	this.callStack = [];
+	this.mVars = {};
+};
+
+CSSVariablesPointerPlugin.prototype = {
+
+	isPreEvalVisitor: true,
+	isReplacing: true,
+
+	run(root) {
+		return this.native.visit(root);
+	},
+
+	visitRule(node, visitArgs) {
+		// store the rule context for the call variable extraction
+		this.ruleStack.push(node);
+		// replace the direct less variable assignment with the css variable
+		if (Array.isArray(node.name) && node.name[0] instanceof less.tree.Keyword && this.mVars[node.name[0].value]) {
+			node.value = new less.tree.Anonymous(this.mVars[node.name[0].value], node.index, node.currentFileInfo, node.mapLines);
+		}
+		return node;
+	},
+
+	visitRuleOut(node) {
+		// remove rule context
+		this.ruleStack.pop();
+		return node;
+	},
+
+	visitCall(node, visitArgs) {
+		// store the call context for the call variable extraction
+		this.callStack.push(node);
+		return node;
+	},
+
+	visitCallOut(node, visitArgs) {
+		// remove call context
+		this.callStack.pop();
+		return node;
+	},
+
+	visitVariable(node, visitArgs) {
+		// collect less variables to css variables mapping
+		if (this.callStack.length == 0 && this.ruleStack.length > 0 && this.ruleStack[this.ruleStack.length - 1].variable) {
+			this.mVars["--" + this.ruleStack[0].name.substr(1)] = "var(" + node.name.replace(/^@/, "--") + ")";
+		}
+		return node;
+	}
+
+};

test/expected/complex/test-cssvars-variables.css

@@ -1,6 +1,7 @@
 :root {
   --link-color: #428bca;
   --link-color-hover: #3071a9;
-  --var: 9%;
+  --link-color-active: var(--link-color);
+  --var: var(--a);
   --a: 9%;
 }

test/fixtures/complex/test.less

@@ -1,6 +1,7 @@
 // Variables
 @link-color:        #428bca; // sea blue
 @link-color-hover:  darken(@link-color, 10%);
+@link-color-active: @link-color;
 
 // Usage
 a,