From a963f11cb444dc39d9357dd4248b6117176bc3c4 Mon Sep 17 00:00:00 2001
From: Daniel Puckowski <puckowski.d@gmail.com>
Date: Fri, 6 Dec 2024 16:26:37 -0500
Subject: [PATCH] fix(issue:4224) improve CSS custom property logic

* Fixes issue #4224 by improving CSS custom property handling.
---
 .../less/src/less/functions/math-helper.js     |  9 +++++++++
 packages/less/src/less/tree/custom-property.js | 18 ++++++++++++++++++
 .../test-data/css/_main/custom-property.css    |  4 ++++
 .../test-data/less/_main/custom-property.less  |  4 ++++
 4 files changed, 35 insertions(+)
 create mode 100644 packages/less/src/less/tree/custom-property.js
 create mode 100644 packages/test-data/css/_main/custom-property.css
 create mode 100644 packages/test-data/less/_main/custom-property.less

diff --git a/packages/less/src/less/functions/math-helper.js b/packages/less/src/less/functions/math-helper.js
index b557875c5..4cca18668 100644
--- a/packages/less/src/less/functions/math-helper.js
+++ b/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' };
     }
diff --git a/packages/less/src/less/tree/custom-property.js b/packages/less/src/less/tree/custom-property.js
new file mode 100644
index 000000000..3eaa284b9
--- /dev/null
+++ b/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;
diff --git a/packages/test-data/css/_main/custom-property.css b/packages/test-data/css/_main/custom-property.css
new file mode 100644
index 000000000..f7b495866
--- /dev/null
+++ b/packages/test-data/css/_main/custom-property.css
@@ -0,0 +1,4 @@
+.test {
+  --basic-deg: 20deg;
+  --basic-deg-tan: tan(var(--basic-deg));
+}
diff --git a/packages/test-data/less/_main/custom-property.less b/packages/test-data/less/_main/custom-property.less
new file mode 100644
index 000000000..2d19e1dbc
--- /dev/null
+++ b/packages/test-data/less/_main/custom-property.less
@@ -0,0 +1,4 @@
+.test {
+    --basic-deg: 20deg;
+    --basic-deg-tan: tan(var(--basic-deg));
+}