feature request: gate ->css on "style" key

CHANGELOG.md

@@ -4,6 +4,11 @@ Unreleased changes are available via `io.github.borkdude/html {:git/sha "..."}`
 
 [html](https://github.com/borkdude/html): Produce HTML from hiccup in Clojure and ClojureScript
 
+## 0.2.5
+
+- [#16](https://github.com/borkdude/html/pull/16): only render a map attribute value as CSS when the key is `style`; other map-like values such as records now render via `str` ([@telekid](https://github.com/telekid))
+- Fix escaping in cljs when escaped characters appear more than once in string ([@telekid](https://github.com/telekid))
+
 ## 0.2.4
 
 - Fix attribute value bound to a symbol: `(let [x "blue"] (html [:div {:color x}]))` now resolves the symbol at runtime instead of emitting its name

src/borkdude/html.cljc

@@ -11,11 +11,11 @@
   [text]
   (->
    (.. ^String (str text)
-       (replace "&"  "&")
-       (replace "<"  "&lt;")
-       (replace ">"  "&gt;")
-       (replace "\"" "&quot;")
-       (replace "'" "&apos;" #_(if (= *html-mode* :sgml) "&#39;" "&apos;")))))
+       (#?(:cljs replaceAll :clj replace) "&"  "&amp;")
+       (#?(:cljs replaceAll :clj replace) "<"  "&lt;")
+       (#?(:cljs replaceAll :clj replace) ">"  "&gt;")
+       (#?(:cljs replaceAll :clj replace) "\"" "&quot;")
+       (#?(:cljs replaceAll :clj replace) "'" "&apos;" #_(if (= *html-mode* :sgml) "&#39;" "&apos;")))))
 
 (defn ->safe
   "Implementation, do not use"
@@ -43,8 +43,8 @@
                         (str (name k)
                              "=" (cond (string? v) (pr-str (escape-html v))
                                        (keyword? v) (pr-str (name v))
-                                       (map? v) (pr-str (->css v))
-                                       :else (pr-str (str v))))))
+                                       (and (map? v) (= "style" (name k))) (pr-str (escape-html (->css v)))
+                                       :else (pr-str (escape-html (str v)))))))
                     m))))
   ([opts m base-map]
    (let [m (merge base-map m)]

test/borkdude/html_test.cljc

@@ -3,6 +3,10 @@
    [borkdude.html :refer [escape-html html xml]]
    [clojure.test :as t]))
 
+(defrecord QuestionId [value]
+  Object
+  (toString [_] value))
+
 (defn child-component [{:keys [name]}]
   (html [:<> "Hello " name]))
 
@@ -85,16 +89,43 @@
     (html [:div.container])
 
     "<a class=\"bar baz quux\" id=\"foo\"></a>"
-    (html [:a#foo.bar.baz {:class "quux"}]))
-  )
+    (html [:a#foo.bar.baz {:class "quux"}])
+
+    "<div style=\"color: blue;\"></div>"
+    (html [:div {:style {:color :blue}}])
+
+    "<div style=\"color: blue;\"></div>"
+    (let [style {:color :blue}]
+      (html [:div {:style style}]))
+
+    "<input type=\"hidden\" value=\"f33b44d7\">"
+    (let [qid (->QuestionId "f33b44d7")]
+      (html [:input {:type "hidden" :value qid}]))
+
+    "<div data-foo=\"{:a 1}\"></div>"
+    (let [m {:a 1}]
+      (html [:div {:data-foo m}]))
+
+    "<input value=\"f33b44d7&quot;&quot;\">"
+    (let [qid (->QuestionId "f33b44d7\"\"")]
+      (html [:input {:value qid}]))
+
+    ;; User dynamically generates a css variable name
+    "<input style=\"--&quot;&quot;\">"
+    (let [i "\"\""
+          v (str "--" i)]
+      (html [:input {:style v}]))
+))
 
 (t/deftest test-escaped-chars
-  (t/is (= (escape-html "\"") "&quot;"))
-  (t/is (= (escape-html "<") "&lt;"))
-  (t/is (= (escape-html ">") "&gt;"))
-  (t/is (= (escape-html "&") "&amp;"))
+  (t/is (= (escape-html "\"\"") "&quot;&quot;"))
+  (t/is (= (escape-html "<<") "&lt;&lt;"))
+  (t/is (= (escape-html ">>") "&gt;&gt;"))
+  (t/is (= (escape-html "&&") "&amp;&amp;"))
   (t/is (= (escape-html "foo") "foo"))
-  (t/is (= (escape-html "'") "&apos;")))
+  (t/is (= (escape-html "''") "&apos;&apos;"))
+  (t/is (= (escape-html "\"\"") "&quot;&quot;"))
+  )
 
 (comment
   (ok)