Less dynamic HTML css (#560)

squint-cljs · Oct 11, 2024 · e0d134d · e0d134d
1 parent bd9a01d
commit e0d134d
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 19 deletions.
diff --git a/src/squint/compiler_common.cljc b/src/squint/compiler_common.cljc
@@ -140,12 +140,7 @@
                 (if html?
                   "$"
                   "")
-                (format (if (:html-attr env)
-                          "squint_html.attr(%s)"
-                          "%s" #_(if html?
-                            "squint_html._safe(%s)"
-                            "%s"))
-                        expr)))
+                expr))
       expr)))
 
 (defmethod emit ::number [expr env]
@@ -1046,15 +1041,27 @@ break;}" body)
 
 (defn emit-css
   [v env]
-  (let [env (assoc env :html-attr true)]
-    (-> (reduce
-         (fn [acc [k v]]
-           (str acc
-                (emit k env) ":"
-                (emit v env) ";"))
-         ""
-         v)
-        (wrap-double-quotes))))
+  (if (contains? v :&)
+    (let [rest-opts (dissoc v :&)
+          env (assoc env :js true)
+          cherry? (= :cherry *target*)]
+      (when-let [dyn (:has-dynamic-expr env)]
+        (reset! dyn true))
+      (-> (format "${squint_html.css(%s,%s)}"
+                  (emit (cond->> (get v :&)
+                          cherry? (list `clj->js)) (dissoc env :jsx))
+                  (emit (cond->> rest-opts
+                          cherry? (list `clj->js)) (dissoc env :jsx)))
+          (wrap-double-quotes)))
+    (let [env (assoc env :html-attr true)]
+      (-> (reduce
+           (fn [acc [k v]]
+             (str acc
+                  (emit k env) ":"
+                  (emit v env) ";"))
+           ""
+           v)
+          (wrap-double-quotes)))))
 
 (defn jsx-attrs [v env]
   (let [env (expr-env env)

diff --git a/src/squint/html.js b/src/squint/html.js
@@ -32,7 +32,8 @@ function safe(x) {
   return escapeHTML(x.toString());
 }
 
-function css(v) {
+export function css(v, props) {
+  v = Object.assign(props, v);
   let ret = "";
   if (v == null) return ret;
   let first = true;
@@ -47,9 +48,9 @@ function css(v) {
   return ret;
 }
 
-export function attr(v) {
+function attr(v) {
   if (typeof(v) === 'object') {
-    return css(v);
+    return css({}, v);
   } else
   {
     return v;

diff --git a/test/squint/html_test.cljs b/test/squint/html_test.cljs
@@ -70,7 +70,7 @@
 (deftest html-dynamic-css-test
   (t/async done
     (let [js (squint.compiler/compile-string
-              "(let [m {:color :green}] #html [:div {:style (assoc m :width \"200\")} \"Hello\"])"
+              "(let [m {:color :green} m (assoc m :width \"200\")] #html [:div {:style {:& m}} \"Hello\"])"
               {:repl true :elide-exports true :context :return})
           js (str/replace "(async function() { %s } )()" "%s" js)]
       (-> (js/eval js)