clojure - Garden Generated Inline-styles in Reagent's Hiccup -

in reagent, 1 can specify inline css styles this:

[:div {:style {:border "1px solid red"}} "my text"] 

garden can make such css properties containing several values in list more generic. vectors comma separated lists , nested vectors (used here) space separated lists:

(require '[garden.core :refer [style]])  (style {:border [[:1px :solid :black]]}) ;= "border: 1px solid red;" 

how can things combined? reagent seems stubborn accepting hash-maps style attribute. accepting string solution here.

generally, of inline-styles aren't choice in long term. 1 solve attaching class div , specifying style globally gardens css function.

class example:

[:div.myclass "my text"]  (css [:.myclass {:border [[:1px :solid :black]]}]) ;= ".myclass {\n  border: 1px solid black;\n}" 

however, it's start inline styles, so: there way way described above?

the hash-map can optionally supplied reagent's hiccup vectors abstraction on html attributes of specified html element. (as represented in dom) additionally hash-map can nested when attached keyword :style. abstraction of element's style properties. different thing 1 above. reason 1 argue 2 things have better been kept apart, simpler in way.

manipulating element's style properties setting it's style attribute mean whole style string has parsed when 1 part changes. having extra-option providing style-string in hiccup wouldn't much.

it looks garden can render strings. i'd suggest helpful if render hash-map.

here workaround, lets reagent , garden work together:

(defn css-map [s]   (->> (style s)        (re-seq #"(.*): (.*);(?:\n|$)")        (reduce (fn [m [_ k v]]                  (assoc m k v))                {})))  (css-map {:border [[:1px :solid :red]]           :background-color (rgb 33 5 0)}) ;= {"border" "1px solid red", "background-color" "#210500"} 

the performance suffer of course. if knows better solution, i'd still curious know.