From 53c5bb422209c15c3f82a8ec510b084ca3f47878 Mon Sep 17 00:00:00 2001
From: clover caruso <git@paperclover.net>
Date: Fri, 13 Feb 2026 21:50:01 -0800
Subject: [PATCH] feat: template in class shorthand

---
 src/marko.rs | 53 ++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 51 insertions(+), 2 deletions(-)

diff --git a/src/marko.rs b/src/marko.rs
index 9240d56928b3c6cbeb049203f68658f7d469f166..88dc3786ee0f50d6d0362a1b3fd6153aeba187e4 100644
--- a/src/marko.rs
+++ b/src/marko.rs
@@ -369,7 +369,15 @@ fn parse_class_name_shorthand<'a>(
             Some(b' ' | b'\n' | b'\t' | b'\r' | b'.' | b'#' | b'>' | b'<' | b'(' | b'|') | None => {
                 break
             }
-            Some(b'$') => todo!(),
+            Some(b'$') => {
+                if l.peek_rest().starts_with("${") {
+                    l.advance(2);
+                    parse_expr(l)?;
+                    l.expect("}")?;
+                } else {
+                    l.offset += 1;
+                }
+            }
             _ => l.offset += 1,
         }
     }
@@ -1285,10 +1293,51 @@ mod tests {
     }
 
     #[test]
-    #[ignore = "NOT IMPLEMENTED: Dynamic class/id with $ interpolation hits todo!()"]
     fn test_shorthand_dynamic_class() {
         let result = parse_open("<div.color-${iconName}/>");
         assert!(result.is_ok());
+        let open = result.unwrap();
+        assert_eq!(open.content, "<div.color-${iconName}/>");
+    }
+
+    #[test]
+    fn test_shorthand_dynamic_id() {
+        let result = parse_open("<div#${myId}>");
+        assert!(result.is_ok());
+        let open = result.unwrap();
+        assert_eq!(open.content, "<div#${myId}>");
+    }
+
+    #[test]
+    fn test_shorthand_dynamic_mixed() {
+        let result = parse_open("<button.variant-${meow}#${id}>");
+        assert!(result.is_ok());
+        let open = result.unwrap();
+        assert_eq!(open.content, "<button.variant-${meow}#${id}>");
+    }
+
+    #[test]
+    fn test_shorthand_dynamic_multiple_classes() {
+        let result = parse_open("<div.class1.${dynamic}.class3>");
+        assert!(result.is_ok());
+        let open = result.unwrap();
+        assert_eq!(open.content, "<div.class1.${dynamic}.class3>");
+    }
+
+    #[test]
+    fn test_shorthand_template_expression() {
+        let result = parse_open("<div.class-${a + b}>");
+        assert!(result.is_ok());
+        let open = result.unwrap();
+        assert_eq!(open.content, "<div.class-${a + b}>");
+    }
+
+    #[test]
+    fn test_shorthand_template_with_dollar() {
+        let result = parse_open("<div.class-$value>");
+        assert!(result.is_ok());
+        let open = result.unwrap();
+        assert_eq!(open.content, "<div.class-$value>");
     }
 
     #[test]
-- 
2.54.0