Strange output when using inline margins

[handerpeder]

Using: no.cjohansen/replicant {:mvn/version "0.2024.05.10"}

(require '[replicant.dom :as replicant])
(def el (js/document.getElementById "app"))

(defn xml-str [node]
  (.serializeToString (js/XMLSerializer.) node))

(-> (replicant/render
     el
     [:div {:style {:margin-bottom "1rem"}} "foo"])
    xml-str) ;; => "<div xmlns=\"http://www.w3.org/1999/xhtml\" id=\"app\"><div style=\"\">foo</div></div>"

Nothing when setting :margin-bottom

(-> (replicant/render
     el
     [:div {:style {:margin "1rem"}} "foo"])
    xml-str)
;; => "<div xmlns=\"http://www.w3.org/1999/xhtml\" id=\"app\"><div style=\"margin-top: 1rem; margin-right: 1rem; margin-left: 1rem;\">foo</div></div>"

margin-top, margin-right and margin-left when setting margin

(-> (replicant/render
     el
     [:div {:style {:margin "1rem" :margin-bottom "1rem"}} "foo"])
    xml-str)
;; => "<div xmlns=\"http://www.w3.org/1999/xhtml\" id=\"app\"><div style=\"margin: 1rem;\">foo</div></div>"

margin when setting margin and margin-bottom

seems to also affect padding

(-> (replicant/render
     el
     [:div {:style {:padding-bottom "1rem"}} "foo"])
    xml-str)
;; => "<div xmlns=\"http://www.w3.org/1999/xhtml\" id=\"app\"><div style=\"padding-bottom: 1rem;\">foo</div></div>"

Works ✅

(-> (replicant/render
     el
     [:div {:style {:padding "1rem"}} "foo"])
    xml-str)

;; => "<div xmlns=\"http://www.w3.org/1999/xhtml\" id=\"app\"><div style=\"padding-top: 1rem; padding-right: 1rem; padding-left: 1rem;\">foo</div></div>"

no padding-bottom ❌

[cjohansen]

What in the ... 😅 Well, congratulations on finding the weirdest bug so far. I'll have to dig around a little.

[cjohansen]

Just to make sure: did you check that this happens without the XML serializer?

[handerpeder]

Thanks! Yes, happens without the XML serializer.

[cjohansen]

I'm unable to reproduce this. Do you perhaps have some global CSS, other JavaScript or something else complicating the matter? Here's what I'm seeing:

(require '[replicant.dom :as d])

(do
  (set! (.-innerHTML js/document.body) "<div id=\"app\"></div>")
  (def el (js/document.getElementById "app"))
  (d/render el [:div {:style {:margin "1rem"}} "foo"])
  (.-outerHTML el)
  ) ;;=> "<div id=\"app\"><div style=\"margin: 1rem;\">foo</div></div>"

  (do
  (set! (.-innerHTML js/document.body) "<div id=\"app\"></div>")
  (def el (js/document.getElementById "app"))
  (d/render el [:div {:style {:margin-bottom "1rem"}} "foo"])
  (.-outerHTML el)
  ) ;;=> "<div id=\"app\"><div style=\"margin-bottom: 1rem;\">foo</div></div>"

[handerpeder]

I've set up a repro repo here.

Something in the initial render introduces this, at which point it seems to happen consistently.

[cjohansen]

This wasn't so surprising after all 😅 Fixed in 3d397ef933972060c98dc73a73df30f10302052c, available as 0.2024.06.30