CSS scroll state container queries

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;
 };

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) {}
+    },
+};

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;

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%;
+  }
+}

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%;
+    }
+}