Commit cf37788

@@ -75,7 +75,8 @@
 /// - height (auto, relative, length):
 /// - fit (str):
 /// - scaling (auto, str):
-/// - astro (dictionary):
+/// - astro (dictionary): `<Image />` props; `style` takes a CSS property
+///   dictionary that overrides the generated defaults
 /// -> content
 #let img(src, astro: (:), ..args) = {
   if type(src) == str and not src.starts-with("/") {
@@ -96,15 +97,23 @@
   let alt = element.at("alt", default: none)
 
   let options = (layout: "constrained") + astro
-  let styles = ("display: block",)
-  if width != none { styles.push("width: " + width) }
-  if height != none { styles.push("height: " + height) }
+  let styles = ("display": "block")
+  if width != none { styles.insert("width", width) }
+  if height != none { styles.insert("height", height) }
   if width != none and height != none {
-    styles.push("object-fit: " + fit-map.at(fit))
+    styles.insert("object-fit", fit-map.at(fit))
   }
-  if scaling == "pixelated" { styles.push("image-rendering: pixelated") }
+  if scaling == "pixelated" { styles.insert("image-rendering", "pixelated") }
   if "style" in options {
-    styles.push(options.at("style"))
+    let style = options.at("style")
+    if style != none {
+      if type(style) != dictionary {
+        panic(
+          "kp.img: astro.style must be a dictionary, e.g. (style: (width: \"30%\"))",
+        )
+      }
+      for (property, value) in style { styles.insert(property, value) }
+    }
     let _ = options.remove("style")
   }
   if "alt" not in options {
@@ -114,7 +123,7 @@
   let attributes = jsx-attributes(options)
   let tag = (
     "<Image src={import(" + repr(specifier) + ").then(m => m.default)} style={",
-    repr(styles.join("; ")),
+    js-value(styles),
     "} ",
     attributes.join(" "),
     " />",