From 55f744899ce058850a5dd40074aede3bca5baa3d Mon Sep 17 00:00:00 2001
From: Daniel Puckowski <puckowski.d@gmail.com>
Date: Fri, 17 Jan 2025 18:06:49 -0500
Subject: [PATCH 1/2] feat: add support for container scroll-state

* Add support for CSS container query scroll-state.
---
 packages/less/src/less/functions/index.js     |  2 ++
 .../less/src/less/functions/scroll-state.js   | 23 +++++++++++++++++++
 packages/test-data/css/_main/container.css    | 19 +++++++++++++++
 packages/test-data/less/_main/container.less  | 23 +++++++++++++++++++
 4 files changed, 67 insertions(+)
 create mode 100644 packages/less/src/less/functions/scroll-state.js

diff --git a/packages/less/src/less/functions/index.js b/packages/less/src/less/functions/index.js
index 160ac7523..51fa81f53 100644
--- a/packages/less/src/less/functions/index.js
+++ b/packages/less/src/less/functions/index.js
@@ -13,6 +13,7 @@ import string from './string';
 import svg from './svg';
 import types from './types';
 import style from './style';
+import scrollState from './scroll-state';
 
 export default environment => {
     const functions = { functionRegistry, functionCaller };
@@ -30,6 +31,7 @@ export default environment => {
     functionRegistry.addMultiple(svg(environment));
     functionRegistry.addMultiple(types);
     functionRegistry.addMultiple(style);
+    functionRegistry.addMultiple(scrollState);
 
     return functions;
 };
diff --git a/packages/less/src/less/functions/scroll-state.js b/packages/less/src/less/functions/scroll-state.js
new file mode 100644
index 000000000..fea922da4
--- /dev/null
+++ b/packages/less/src/less/functions/scroll-state.js
@@ -0,0 +1,23 @@
+import Variable from '../tree/variable';
+import Anonymous from '../tree/variable';
+
+const scrollStateExpression = function (args) {
+    args = Array.prototype.slice.call(args);
+    switch (args.length) {
+        case 0: throw { type: 'Argument', message: 'one or more arguments required' };
+    }
+
+    const entityList = [new Variable(args[0].value, this.index, this.currentFileInfo).eval(this.context)];
+   
+    args = entityList.map(a => { return a.toCSS(this.context); }).join(this.context.compress ? ',' : ', ');
+   
+    return new Anonymous(`scroll-state(${args})`);
+};
+
+export default {
+    'scroll-state': function(...args) {
+        try {
+            return scrollStateExpression.call(this, args);
+        } catch (e) {}
+    },
+};
diff --git a/packages/test-data/css/_main/container.css b/packages/test-data/css/_main/container.css
index f5a17a602..c710e5f43 100644
--- a/packages/test-data/css/_main/container.css
+++ b/packages/test-data/css/_main/container.css
@@ -241,3 +241,22 @@
     color: purple;
   }
 }
+#sticky {
+  position: sticky;
+  container-type: scroll-state;
+}
+@container scroll-state (stuck: top) {
+  #sticky-child {
+    font-size: 75%;
+  }
+}
+@container scroll-state (snapped: x) {
+  #sticky-child {
+    font-size: 75%;
+  }
+}
+@container scroll-state (scrollable: top) {
+  #sticky-child {
+    font-size: 75%;
+  }
+}
diff --git a/packages/test-data/less/_main/container.less b/packages/test-data/less/_main/container.less
index 73fd17be0..cb02b49e0 100644
--- a/packages/test-data/less/_main/container.less
+++ b/packages/test-data/less/_main/container.less
@@ -289,3 +289,26 @@
         color: purple;
     }
 }
+
+#sticky {
+    position: sticky;
+    container-type: scroll-state;
+}
+  
+@container scroll-state(stuck: top) {
+    #sticky-child {
+      font-size: 75%;
+    }
+}
+
+@container scroll-state(snapped: x) {
+    #sticky-child {
+      font-size: 75%;
+    }
+}
+
+@container scroll-state(scrollable: top) {
+    #sticky-child {
+      font-size: 75%;
+    }
+}

From c127d4ce48b31aa3f8f73577261f1080ac2d1093 Mon Sep 17 00:00:00 2001
From: Daniel Puckowski <puckowski.d@gmail.com>
Date: Thu, 3 Apr 2025 19:01:54 -0400
Subject: [PATCH 2/2] fix: scroll-state function not detected

* Fixes issue with scroll-state function not being detected by regex.
---
 packages/less/src/less/parser/parser.js    | 2 +-
 packages/test-data/css/_main/container.css | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/less/src/less/parser/parser.js b/packages/less/src/less/parser/parser.js
index 6af533ff3..0c741b6c1 100644
--- a/packages/less/src/less/parser/parser.js
+++ b/packages/less/src/less/parser/parser.js
@@ -483,7 +483,7 @@ const Parser = function Parser(context, imports, fileInfo, currentIndex) {
 
                     parserInput.save();
 
-                    validCall = parserInput.$re(/^[\w]+\(/);
+                    validCall = parserInput.$re(/^[\w-]+\(/);
                     if (!validCall) {
                         parserInput.forget();
                         return;
diff --git a/packages/test-data/css/_main/container.css b/packages/test-data/css/_main/container.css
index c710e5f43..39aa6af87 100644
--- a/packages/test-data/css/_main/container.css
+++ b/packages/test-data/css/_main/container.css
@@ -245,17 +245,17 @@
   position: sticky;
   container-type: scroll-state;
 }
-@container scroll-state (stuck: top) {
+@container scroll-state(stuck: top) {
   #sticky-child {
     font-size: 75%;
   }
 }
-@container scroll-state (snapped: x) {
+@container scroll-state(snapped: x) {
   #sticky-child {
     font-size: 75%;
   }
 }
-@container scroll-state (scrollable: top) {
+@container scroll-state(scrollable: top) {
   #sticky-child {
     font-size: 75%;
   }