add support for arbitrary nested CSS selectors via string key

Author: roman01la

example/src/example/core.cljs

@@ -140,6 +140,13 @@
   (text-field {:width  "300px"
                :height "140px"}))
 
+(defcard Selectors
+  (html
+    [:ul
+     [:li {:css {"&:first-child" {:color "red"}}} "first-child"]
+     [:li {:css {".link" {:color "green"}}}
+      [:a.link {:href "#"} "nested element with .link class name"]]]))
+
 (defn mount []
   (css/remove-styles!))
 

src/cljss/builder.clj

@@ -10,21 +10,33 @@
 (defn build-styles [cls styles]
   (c/reset-env! {:cls cls})
   (let [pseudo  (filterv utils/pseudo? styles)
+        nested  (->> styles
+                     (filterv (comp not utils/pseudo?))
+                     (filterv utils/nested?))
         [mstatic mvals] (some-> styles :cljss.core/media build-media)
         styles  (dissoc styles :cljss.core/media)
-        styles  (filterv (comp not utils/pseudo?) styles)
+        styles  (filterv #(and (not (utils/pseudo? %)) (not (utils/nested? %))) styles)
         [static vals] (c/collect-styles cls styles)
         pstyles (->> pseudo
                      (reduce
                        (fn [coll [rule styles]]
                          (conj coll (c/collect-styles (str cls (subs (name rule) 1)) styles)))
                        []))
+        nstyles (->> nested
+                     (reduce
+                       (fn [coll [rule styles]]
+                         (conj coll (c/collect-styles (str cls " " rule) styles)))
+                       []))
         vals    (->> pstyles
                      (mapcat second)
                      (into vals)
                      (concat mvals)
                      (into []))
+        vals (->> nstyles
+                  (mapcat second)
+                  (into vals))
         static (into [static] (map first pstyles))
+        static (into static (map first nstyles))
         static (if mstatic
                  (conj static mstatic)
                  static)]
@@ -33,11 +45,5 @@
 (comment
   (build-styles
     "hello"
-    {:background    'color
-     :width         "100px"
-     :height        "100px"
-     :border-radius "5px"
-     :padding       "8px"
-     :cljss.core/media    {[[:max-width "740px"]]
-                           {:width  "64px"
-                            :height "64px"}}}))
+    {"&:first-child" {:color "red"}
+     "a" {:color "blue"}}))

src/cljss/utils.cljc

@@ -7,6 +7,10 @@
   (and (re-matches #"&:.*" (name rule))
        (map? value)))
 
+(defn nested? [[rule value]]
+  (and (string? rule)
+       (map? value)))
+
 (defn literal? [x]
   (or (string? x) (number? x)))