handle consuming/inserting collection of static css strings

Author: roman01la

example/src/example/core.cljs

@@ -1,6 +1,7 @@
 (ns example.core
   (:require [rum.core :as rum]
-            [cljss.core :as css :refer-macros [inject-global defstyles]]
+            [cljss.core :as css :refer-macros [defstyles defkeyframes]]
+            [cljss.rum :refer-macros [defstyled]]
             [devcards.core :refer-macros [defcard start-devcard-ui!]]
             [sablono.core :refer [html]]))
 
@@ -12,15 +13,15 @@
 
 ;; design system
 (def colors
-  {:blue "#298FCA"
-   :green "#7BC86C"
+  {:blue   "#298FCA"
+   :green  "#7BC86C"
    :orange "#FFB968"
-   :red "#EF7564"
+   :red    "#EF7564"
    :yellow "#F5DD29"})
 
 (defstyles text-styles [size]
   {:font-family "Helvetica Neue"
-   :font-size size})
+   :font-size   size})
 
 (rum/defc Text
   [{:keys [size]}
@@ -43,40 +44,45 @@
 
 (def button->color
   {:warning (:orange colors)
-   :error (:red colors)
-   :ok (:green colors)})
+   :error   (:red colors)
+   :ok      (:green colors)})
 
 (rum/defc Button
   [{:keys [kind
            on-click]}
    child]
   [:button
    {:on-click on-click
-    :css {:background (get button->color kind)
-          :border 0
-          :border-radius "5px"
-          :padding "8px 24px"
-          :font-size "14px"
-          :color "#fff"
-          :&:hover {:color "black"
-                    :cursor "pointer"}
-          :&:focus {:outline "none"}}}
+    :css      {:background    (get button->color kind)
+               :border        0
+               :border-radius "5px"
+               :padding       "8px 24px"
+               :font-size     "14px"
+               :color         "#fff"
+               :&:hover       {:color  "black"
+                               :cursor "pointer"}
+               :&:focus       {:outline "none"}}}
    child])
 
 ;; cards
 (defcard Colors
   "Base colors"
   (fn [state _]
     (html
-      [:div {:css {:display "flex"
+      [:div {:css {:display         "flex"
                    :justify-content "space-between"}}
+
        (for [[_ color] (:colors @state)]
          [:div
-          {:css {:background color
-                 :width "100px"
-                 :height "100px"
+          {:css {:background    color
+                 :width         "100px"
+                 :height        "100px"
                  :border-radius "5px"
-                 :padding "8px"}}
+                 :padding       "8px"
+                 :&:hover       {:border "1px solid blue"}
+                 ::css/media    {[[:max-width "740px"]]
+                                 {:width  "64px"
+                                  :height "64px"}}}}
           color])]))
   {:colors colors})
 
@@ -94,6 +100,45 @@
      (Button {:kind :error} "Error")
      (Button {:kind :ok} "OK")]))
 
+(def spinner-sizes
+  {"m"  "16px"
+   "l"  "32px"
+   "xl" "64px"})
+
+(defkeyframes spin []
+  {:from {:transform "rotate(0deg)"}
+   :to   {:transform "rotate(360deg)"}})
+
+(rum/defc spinner
+  [{:keys [size color]}]
+  [:div {:css {:width         (spinner-sizes size)
+               :height        (spinner-sizes size)
+               :border-radius "50%"
+               :border-top    (str "2px solid " color)
+               :border-left   "2px solid rgba(0,0,255,0.3)"
+               :border-bottom "2px solid rgba(0,0,255,0.3)"
+               :border-right  "2px solid rgba(0,0,255,0.3)"
+               :animation     (str (spin) " 1500ms linear infinite")}}])
+
+(defcard Spinner
+  (html
+    [:div
+     (spinner {:size "m" :color "blue"})
+     (spinner {:size "l" :color "blue"})
+     (spinner {:size "xl" :color "blue"})]))
+
+(defstyled text-field :textarea
+  {:width         :width
+   :height        :height
+   :border-radius "5px"
+   :border        "1px solid #ccc"
+   :&:hover       {:background-color "#eee"}
+   :&:focus       {:outline "none"
+                   :border  "1px solid blue"}})
+
+(defcard TextField
+  (text-field {:width  "300px"
+               :height "140px"}))
 
 (defn mount []
   (css/remove-styles!))

project.clj

@@ -54,5 +54,6 @@
                             :devcards        true
                             :optimizations   :advanced
                             :closure-defines {"goog.DEBUG" false}
+                            :pseudo-names    true
                             :verbose         true
                             :pretty-print    false}}]})

src/cljss/builder.clj

@@ -24,12 +24,20 @@
                      (into vals)
                      (concat mvals)
                      (into []))
-        static  (apply str static (map first pstyles))
-        static  (str static mstatic)]
+        static (into [static] (map first pstyles))
+        static (if mstatic
+                 (conj static mstatic)
+                 static)]
     [cls static vals]))
 
 (comment
   (build-styles
     "hello"
-    {:cljss.core/media {{:max-width 'sa :min-width 'l} {:font-size 'a
-                                                        :&:hover   {:margin 'b}}}}))
+    {:background    'color
+     :width         "100px"
+     :height        "100px"
+     :border-radius "5px"
+     :padding       "8px"
+     :cljss.core/media    {[[:max-width "740px"]]
+                           {:width  "64px"
+                            :height "64px"}}}))

src/cljss/core.cljs

@@ -1,6 +1,6 @@
 (ns cljss.core
   (:require [cljss.sheet :refer [create-sheet insert! filled? flush!]]
-            [cljss.utils :refer [build-css]]
+            [cljss.utils :refer [build-css dev?]]
             [clojure.string :as cstr]))
 
 (def ^:private sheets (atom (list (create-sheet))))
@@ -20,12 +20,12 @@
         (swap! sheets conj (create-sheet))
         (css cls static vars))
       (do
-        (loop [[s & static] static]
-          (if (seq static)
-            (do
-              (insert! sheet s cls)
-              (recur static))
-            (insert! sheet s cls)))
+        (loop [[s & static] static
+               idx 0]
+          (let [cls (str cls "-" idx)]
+            (insert! sheet s cls)
+            (when-not (empty? static)
+              (recur static (inc idx)))))
         (if (pos? (count vars))
           (let [var-cls (str "vars-" (hash vars))]
             (insert! sheet #(build-css var-cls vars) var-cls)
@@ -109,13 +109,13 @@
 
 (defn -styled [cls static vars attrs create-element]
   (let [clsn (str cls "-" (gensym))
-        static (if ^boolean goog.DEBUG
-                 (cstr/replace static cls clsn)
+        static (if ^boolean dev?
+                 (map #(cstr/replace % cls clsn) static)
                  static)
-        vars (if ^boolean goog.DEBUG
+        vars (if ^boolean dev?
                (->> vars (map (fn [[k v]] [(cstr/replace k cls clsn) v])))
                vars)
-        cls (if ^boolean goog.DEBUG clsn cls)]
+        cls (if ^boolean dev? clsn cls)]
     (fn [props & children]
       (let [[props children] (if (map? props)
                                (array props children)