From 2e9560dd2b89f7b1f3e09fcc3d0bfe867496a3fc Mon Sep 17 00:00:00 2001
From: Peter Muessig <petermuessig@users.noreply.github.com>
Date: Mon, 24 Feb 2020 09:16:10 +0100
Subject: [PATCH] [FIX] CSS var assignment only for less to less vars (#116)

---
 lib/plugin/css-variables-pointer.js           | 19 +++++++++++++++++--
 .../complex/test-cssvars-variables.css        |  1 +
 test/fixtures/complex/test.less               |  1 +
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/lib/plugin/css-variables-pointer.js b/lib/plugin/css-variables-pointer.js
index e509dfb0..a59d627b 100644
--- a/lib/plugin/css-variables-pointer.js
+++ b/lib/plugin/css-variables-pointer.js
@@ -62,9 +62,24 @@ CSSVariablesPointerPlugin.prototype = {
 		return node;
 	},
 
+	_isVariableAssignment(rule) {
+		// determines a simple less variable assignment:
+		// Rule > Value => Array[length=1] > Expression => Array[length=1] > Variable
+		const value = rule && rule.variable &&
+			rule.value instanceof less.tree.Value && rule.value;
+		const expression = value &&
+			Array.isArray(value.value) && value.value.length == 1 &&
+			value.value[0] instanceof less.tree.Expression && value.value[0];
+		const variable = expression &&
+			Array.isArray(expression.value) && expression.value.length == 1 &&
+			expression.value[0] instanceof less.tree.Variable && expression.value[0];
+		return variable;
+	},
+
 	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) {
+		// collect all simple less variables to less variables mapping (to convert them to css variables assignments)
+		if (this.callStack.length == 0 && this.ruleStack.length > 0 &&
+			this._isVariableAssignment(this.ruleStack[this.ruleStack.length - 1])) {
 			this.mVars["--" + this.ruleStack[0].name.substr(1)] = "var(" + node.name.replace(/^@/, "--") + ")";
 		}
 		return node;
diff --git a/test/expected/complex/test-cssvars-variables.css b/test/expected/complex/test-cssvars-variables.css
index 9ab118db..731af96c 100644
--- a/test/expected/complex/test-cssvars-variables.css
+++ b/test/expected/complex/test-cssvars-variables.css
@@ -1,6 +1,7 @@
 :root {
   --link-color: #428bca;
   --link-color-hover: #3071a9;
+  --other-var: 0 0 0.25rem 0 rgba(0, 0, 0, 0.15), inset 0 -0.0625rem 0 0 #428bca;
   --link-color-active: var(--link-color);
   --var: var(--a);
   --a: 9%;
diff --git a/test/fixtures/complex/test.less b/test/fixtures/complex/test.less
index feec2fe9..748218b6 100644
--- a/test/fixtures/complex/test.less
+++ b/test/fixtures/complex/test.less
@@ -1,6 +1,7 @@
 // Variables
 @link-color:        #428bca; // sea blue
 @link-color-hover:  darken(@link-color, 10%);
+@other-var: 0 0 0.25rem 0 rgba(0, 0, 0, 0.15), inset 0 -0.0625rem 0 0 @link-color;
 @link-color-active: @link-color;
 
 // Usage