From c868268d298dfe31bf301010328e8273fea9541a Mon Sep 17 00:00:00 2001 From: Luke Horton Date: Wed, 19 Sep 2018 11:39:35 -0700 Subject: [PATCH 1/6] fork cljss to fix race condition - theres no need for an atom to track state if we just pass the class through in a functional implementation --- project.clj | 13 +++++++++++-- src/cljss/builder.clj | 3 +-- src/cljss/collect.clj | 20 ++++++-------------- src/cljss/media.clj | 19 +++++++++---------- 4 files changed, 27 insertions(+), 28 deletions(-) diff --git a/project.clj b/project.clj index b0c3740..285f7fa 100644 --- a/project.clj +++ b/project.clj @@ -1,7 +1,16 @@ -(defproject org.roman01la/cljss "1.6.3" +(defproject com.verypossible/cljss "1.6.4" :description "Clojure Style Sheets" - :url "https://github.com/roman01la/cljss" + :repositories [ + ["releases" {:url "https://clojars.org" + :sign-releases false + :username :env/clojars_username + :password :env/clojars_password}] + ["snapshots" {:url "https://clojars.org" + :sign-releases false}] + ] + + :url "https://github.com/verypossible/cljss" :license {:name "Eclipse Public License" :url "http://www.eclipse.org/legal/epl-v10.html"} diff --git a/src/cljss/builder.clj b/src/cljss/builder.clj index c7dc2f2..22f4843 100644 --- a/src/cljss/builder.clj +++ b/src/cljss/builder.clj @@ -8,12 +8,11 @@ (map? value))) (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) + [mstatic mvals] (some-> styles :cljss.core/media ((partial build-media cls))) styles (dissoc styles :cljss.core/media) styles (filterv #(and (not (utils/pseudo? %)) (not (utils/nested? %))) styles) [static vals] (c/collect-styles cls styles) diff --git a/src/cljss/collect.clj b/src/cljss/collect.clj index 64ecfba..590ae45 100644 --- a/src/cljss/collect.clj +++ b/src/cljss/collect.clj @@ -1,12 +1,6 @@ (ns cljss.collect (:require [cljss.utils :refer [build-css]])) -(def env* (atom {:id 0 - :cls nil})) - -(defn reset-env! [v] - (reset! env* (merge {:id 0 :cls nil} v))) - (defn dynamic? [[_ value]] (not (or (string? value) (number? value)))) @@ -15,16 +9,14 @@ [rule (str "--var-" cls "-" idx)]) (defn collect-styles [cls styles] - (let [id (:cls @env*) - dynamic (filterv dynamic? styles) + (let [dynamic (filterv dynamic? styles) static (filterv (comp not dynamic?) styles) - vars + [vars _] (reduce - (fn [vars ds] - (let [ret (conj vars (varid id (:id @env*) ds))] - (swap! env* update :id inc) - ret)) - [] + (fn [[vars idx] ds] + (let [ret (conj vars (varid cls idx ds))] + [ret (inc idx)])) + [[] 0] dynamic) vals (mapv (fn [[_ var] [_ exp]] [var exp]) vars dynamic) static (->> vars diff --git a/src/cljss/media.clj b/src/cljss/media.clj index af14377..bea6d6a 100644 --- a/src/cljss/media.clj +++ b/src/cljss/media.clj @@ -234,44 +234,43 @@ (clojure.string/join " ") (str "@media ")))) -(defn compile-media-dispatch [styles] +(defn compile-media-dispatch [styles _] (cond (contains? styles :media) :media (contains? styles :styles) :styles)) (defmulti compile-media #'compile-media-dispatch) -(defmethod compile-media :media [{media :media}] +(defmethod compile-media :media [{media :media} cls] (->> (seq media) (reduce (fn [[sstyles svalues] [query styles]] - (let [[static values] (compile-media {:styles styles}) + (let [[static values] (compile-media {:styles styles} cls) query (-compile-media-query query)] [(str sstyles query static) (concat svalues values)])) ["" []]))) -(defmethod compile-media :styles [{styles :styles}] +(defmethod compile-media :styles [{styles :styles} cls] (let [pseudo (filterv utils/pseudo? styles) pstyles (->> pseudo (reduce (fn [coll [rule styles]] - (conj coll (c/collect-styles (str (:cls @c/env*) (subs (name rule) 1)) styles))) + (conj coll (c/collect-styles (str cls (subs (name rule) 1)) styles))) [])) styles (filterv (comp not utils/pseudo?) styles) - [static values] (c/collect-styles (:cls @c/env*) styles) + [static values] (c/collect-styles cls styles) values (->> pstyles (mapcat second) (into values))] [(str "{" (apply str static (map first pstyles)) "}") values])) -(defn build-media [styles] - (compile-media {:media styles})) +(defn build-media [cls styles] + (compile-media {:media styles} cls)) (comment - (c/reset-env! {:cls "class"}) - (build-media + "class" {[[:only :screen :and [:min-width "300px"]] [:print :and [:color]]] {:font-size 'p From 25e3b36ae0d5d1e2b4ce2a05e918c60253e8fad5 Mon Sep 17 00:00:00 2001 From: Luke Horton Date: Wed, 19 Sep 2018 12:06:19 -0700 Subject: [PATCH 2/6] deploy to clojars; see 1pass for creds --- project.clj | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/project.clj b/project.clj index 285f7fa..55dfec6 100644 --- a/project.clj +++ b/project.clj @@ -2,12 +2,16 @@ :description "Clojure Style Sheets" :repositories [ - ["releases" {:url "https://clojars.org" - :sign-releases false - :username :env/clojars_username - :password :env/clojars_password}] + ["clojars" {:url "https://clojars.org" + :sign-releases false + :username :env/clojars_username + :password :env/clojars_password + }] ["snapshots" {:url "https://clojars.org" - :sign-releases false}] + :sign-releases false + :username :env/clojars_username + :password :env/clojars_password + }] ] :url "https://github.com/verypossible/cljss" From 3bcb9e7cceffc313e31cf1fd8a308a5d61685b0a Mon Sep 17 00:00:00 2001 From: Luke Horton Date: Thu, 20 Sep 2018 09:47:30 -0700 Subject: [PATCH 3/6] fix bad rule id/indexing - turns out the env* atom was abused harder than we thought - to be functional we have to pass the rule-index all around ... i see now why they used an atom. --- src/cljss/builder.clj | 47 ++++++++++++++++++++++--------------------- src/cljss/collect.clj | 34 ++++++++++++++++++++++--------- src/cljss/media.clj | 30 +++++++++++++-------------- 3 files changed, 63 insertions(+), 48 deletions(-) diff --git a/src/cljss/builder.clj b/src/cljss/builder.clj index 22f4843..c22a81b 100644 --- a/src/cljss/builder.clj +++ b/src/cljss/builder.clj @@ -8,29 +8,30 @@ (map? value))) (defn build-styles [cls styles] - (let [pseudo (filterv utils/pseudo? styles) - nested (->> styles - (filterv (comp not utils/pseudo?)) - (filterv utils/nested?)) - [mstatic mvals] (some-> styles :cljss.core/media ((partial build-media cls))) - styles (dissoc styles :cljss.core/media) - 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 [])) + (let [rule-index 0 + pseudo (filterv utils/pseudo? styles) + nested (->> styles + (filterv (comp not utils/pseudo?)) + (filterv utils/nested?)) + [mstatic mvals rule-index] (some-> styles :cljss.core/media ((partial build-media cls rule-index))) + styles (dissoc styles :cljss.core/media) + styles (filterv #(and (not (utils/pseudo? %)) (not (utils/nested? %))) styles) + + [static vals rule-index] (c/collect-styles cls styles rule-index) + [pstyles rule-index] (c/collect-dynamic-styles + rule-index + pseudo + (fn [rule] (str cls (subs (name rule) 1)))) + [nstyles rule-index] (c/collect-dynamic-styles + rule-index + nested + (fn [rule] (str cls " " rule))) + + vals (->> pstyles + (mapcat second) + (into vals) + (concat mvals) + (into [])) vals (->> nstyles (mapcat second) (into vals)) diff --git a/src/cljss/collect.clj b/src/cljss/collect.clj index 590ae45..80c172c 100644 --- a/src/cljss/collect.clj +++ b/src/cljss/collect.clj @@ -8,19 +8,35 @@ (defn varid [cls idx [rule]] [rule (str "--var-" cls "-" idx)]) -(defn collect-styles [cls styles] +(defn collect-styles [cls styles rule-index] (let [dynamic (filterv dynamic? styles) static (filterv (comp not dynamic?) styles) - [vars _] - (reduce - (fn [[vars idx] ds] - (let [ret (conj vars (varid cls idx ds))] - [ret (inc idx)])) - [[] 0] - dynamic) + [vars rule-index] (reduce + (fn [[vars idx] ds] + (let [ret (conj vars (varid cls idx ds))] + [ret (inc idx)])) + [[] rule-index] + dynamic) + _ (println "static" static) + _ (println "vars" vars) + _ (println "dynamic" dynamic) vals (mapv (fn [[_ var] [_ exp]] [var exp]) vars dynamic) + _ (println "vals" vals) static (->> vars (map (fn [[rule var]] [rule (str "var(" var ")")])) (concat static) (build-css cls))] - [static vals])) + [static vals rule-index])) + +(defn collect-dynamic-styles [rule-index rules class-generator] + (loop + [idx rule-index + acc [] + coll rules] + (if (not (seq coll)) + [acc idx] + (let [[rule styles] (first coll) + [static vals nxt-idx] (collect-styles (class-generator rule) styles idx)] + (recur nxt-idx + (conj acc [static vals]) + (rest coll)))))) diff --git a/src/cljss/media.clj b/src/cljss/media.clj index bea6d6a..ba86776 100644 --- a/src/cljss/media.clj +++ b/src/cljss/media.clj @@ -234,39 +234,37 @@ (clojure.string/join " ") (str "@media ")))) -(defn compile-media-dispatch [styles _] +(defn compile-media-dispatch [styles _ _] (cond (contains? styles :media) :media (contains? styles :styles) :styles)) (defmulti compile-media #'compile-media-dispatch) -(defmethod compile-media :media [{media :media} cls] +(defmethod compile-media :media [{media :media} cls rule-index] (->> (seq media) (reduce - (fn [[sstyles svalues] [query styles]] - (let [[static values] (compile-media {:styles styles} cls) + (fn [[sstyles svalues nxt-idx] [query styles]] + (let [[static values nxt-idx] (compile-media {:styles styles} cls nxt-idx) query (-compile-media-query query)] - [(str sstyles query static) (concat svalues values)])) - ["" []]))) + [(str sstyles query static) (concat svalues values) nxt-idx])) + ["" [] rule-index]))) -(defmethod compile-media :styles [{styles :styles} cls] +(defmethod compile-media :styles [{styles :styles} cls rule-index] (let [pseudo (filterv utils/pseudo? styles) - pstyles (->> pseudo - (reduce - (fn [coll [rule styles]] - (conj coll (c/collect-styles (str cls (subs (name rule) 1)) styles))) - [])) + [pstyles rule-index] (c/collect-dynamic-styles rule-index pseudo (fn [rule] (str cls (subs (name rule) 1)))) + styles (filterv (comp not utils/pseudo?) styles) - [static values] (c/collect-styles cls styles) + [static values rule-index] (c/collect-styles cls styles rule-index) values (->> pstyles (mapcat second) (into values))] [(str "{" (apply str static (map first pstyles)) "}") - values])) + values + rule-index])) -(defn build-media [cls styles] - (compile-media {:media styles} cls)) +(defn build-media [cls rule-index styles] + (compile-media {:media styles} cls rule-index)) (comment (build-media From 67907a11da926449d30a72fe7ff7fd5ea1fc6cbf Mon Sep 17 00:00:00 2001 From: Luke Horton Date: Thu, 20 Sep 2018 11:39:42 -0700 Subject: [PATCH 4/6] fix broken pseudo/nested - turns out the env* had a lot more hidden context - fixed incorrect classnames being bandied about --- src/cljss/builder.clj | 9 ++++++--- src/cljss/collect.clj | 40 +++++++++++++++++++--------------------- src/cljss/media.clj | 2 +- 3 files changed, 26 insertions(+), 25 deletions(-) diff --git a/src/cljss/builder.clj b/src/cljss/builder.clj index c22a81b..c08348b 100644 --- a/src/cljss/builder.clj +++ b/src/cljss/builder.clj @@ -13,7 +13,8 @@ nested (->> styles (filterv (comp not utils/pseudo?)) (filterv utils/nested?)) - [mstatic mvals rule-index] (some-> styles :cljss.core/media ((partial build-media cls rule-index))) + [mstatic mvals mrule-index] (some-> styles :cljss.core/media ((partial build-media cls rule-index))) + rule-index (or mrule-index rule-index) styles (dissoc styles :cljss.core/media) styles (filterv #(and (not (utils/pseudo? %)) (not (utils/nested? %))) styles) @@ -21,11 +22,13 @@ [pstyles rule-index] (c/collect-dynamic-styles rule-index pseudo - (fn [rule] (str cls (subs (name rule) 1)))) + cls + (fn [rule] (subs (name rule) 1))) [nstyles rule-index] (c/collect-dynamic-styles rule-index nested - (fn [rule] (str cls " " rule))) + cls + (fn [rule] (str " " rule))) vals (->> pstyles (mapcat second) diff --git a/src/cljss/collect.clj b/src/cljss/collect.clj index 80c172c..224176e 100644 --- a/src/cljss/collect.clj +++ b/src/cljss/collect.clj @@ -8,27 +8,25 @@ (defn varid [cls idx [rule]] [rule (str "--var-" cls "-" idx)]) -(defn collect-styles [cls styles rule-index] - (let [dynamic (filterv dynamic? styles) - static (filterv (comp not dynamic?) styles) - [vars rule-index] (reduce - (fn [[vars idx] ds] - (let [ret (conj vars (varid cls idx ds))] - [ret (inc idx)])) - [[] rule-index] - dynamic) - _ (println "static" static) - _ (println "vars" vars) - _ (println "dynamic" dynamic) - vals (mapv (fn [[_ var] [_ exp]] [var exp]) vars dynamic) - _ (println "vals" vals) - static (->> vars - (map (fn [[rule var]] [rule (str "var(" var ")")])) - (concat static) - (build-css cls))] - [static vals rule-index])) +(defn collect-styles + ([cls styles rule-index] (collect-styles cls styles rule-index nil)) + ([cls styles rule-index tail-class] + (let [dynamic (filterv dynamic? styles) + static (filterv (comp not dynamic?) styles) + [vars rule-index] (reduce + (fn [[vars idx] ds] + (let [ret (conj vars (varid cls idx ds))] + [ret (inc idx)])) + [[] rule-index] + dynamic) + vals (mapv (fn [[_ var] [_ exp]] [var exp]) vars dynamic) + static (->> vars + (map (fn [[rule var]] [rule (str "var(" var ")")])) + (concat static) + (build-css (str cls tail-class)))] + [static vals rule-index]))) -(defn collect-dynamic-styles [rule-index rules class-generator] +(defn collect-dynamic-styles [rule-index rules cls tail-class-g] (loop [idx rule-index acc [] @@ -36,7 +34,7 @@ (if (not (seq coll)) [acc idx] (let [[rule styles] (first coll) - [static vals nxt-idx] (collect-styles (class-generator rule) styles idx)] + [static vals nxt-idx] (collect-styles cls styles idx (tail-class-g rule))] (recur nxt-idx (conj acc [static vals]) (rest coll)))))) diff --git a/src/cljss/media.clj b/src/cljss/media.clj index ba86776..9eb9f9d 100644 --- a/src/cljss/media.clj +++ b/src/cljss/media.clj @@ -252,7 +252,7 @@ (defmethod compile-media :styles [{styles :styles} cls rule-index] (let [pseudo (filterv utils/pseudo? styles) - [pstyles rule-index] (c/collect-dynamic-styles rule-index pseudo (fn [rule] (str cls (subs (name rule) 1)))) + [pstyles rule-index] (c/collect-dynamic-styles rule-index pseudo cls (fn [rule] (subs (name rule) 1))) styles (filterv (comp not utils/pseudo?) styles) [static values rule-index] (c/collect-styles cls styles rule-index) From f5bcfb95097c9c10cce609867003734cb64f5242 Mon Sep 17 00:00:00 2001 From: Luke Horton Date: Wed, 19 Sep 2018 12:18:45 -0700 Subject: [PATCH 5/6] revert project.clj --- project.clj | 17 ++--------------- 1 file changed, 2 insertions(+), 15 deletions(-) diff --git a/project.clj b/project.clj index 55dfec6..b0c3740 100644 --- a/project.clj +++ b/project.clj @@ -1,20 +1,7 @@ -(defproject com.verypossible/cljss "1.6.4" +(defproject org.roman01la/cljss "1.6.3" :description "Clojure Style Sheets" - :repositories [ - ["clojars" {:url "https://clojars.org" - :sign-releases false - :username :env/clojars_username - :password :env/clojars_password - }] - ["snapshots" {:url "https://clojars.org" - :sign-releases false - :username :env/clojars_username - :password :env/clojars_password - }] - ] - - :url "https://github.com/verypossible/cljss" + :url "https://github.com/roman01la/cljss" :license {:name "Eclipse Public License" :url "http://www.eclipse.org/legal/epl-v10.html"} From 706a98e3174617b09fa43cf787954122d0e227fa Mon Sep 17 00:00:00 2001 From: "Jason T. Wong" Date: Mon, 15 Oct 2018 19:39:03 -0400 Subject: [PATCH 6/6] Fix separate media queries Why: * We want the ability to define separate media queries for a single element. This change addresses the need by: * Split up the media queries before building. * Recombine separate media queries. * Concat media queries. --- src/cljss/sheet.cljs | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/src/cljss/sheet.cljs b/src/cljss/sheet.cljs index 318309a..e709f31 100644 --- a/src/cljss/sheet.cljs +++ b/src/cljss/sheet.cljs @@ -26,15 +26,8 @@ (throw (js/Error. (str "A stylesheet can only have " limit " rules")))) (when-not (@cache cls-name) (swap! cache conj cls-name) - (let [rule (if (ifn? rule) (rule) rule) - rules-count (gobj/get (gobj/get sheet "cssRules") "length")] - (if dev? - (dom/appendChild tag (dom/createTextNode rule)) - (try - (.insertRule sheet rule rules-count) - (catch :default e - (when dev? - (js/console.warn "Illegal CSS rule" rule)))))))) + (let [rule (if (ifn? rule) (rule) rule)] + (dom/appendChild tag (dom/createTextNode rule))))) (flush! [this] (-> tag .-parentNode