Fork me on GitHub
Pragyan Tripathi12:08:31

I am trying to write a merge method to generate CSS styles dynamically. This method should take breakpoints, and styles param and generates a map which can be used for styling using stylefy. I am trying to do this using specter, but unable to get desired results. The method should work as follows:

(def breakpoints [320 600 1280])
(def style {:padding-top ["20px" "30px" "40px" "50px"]
            :margin "30px"

(merge-style breakpoints style)
The output should look like the following:
{:padding-top "20px"
 :margin "30px"
 ::stylefy/media {{:min-width "320px"} {:padding-top "30px"}
                  {:min-width "600px"} {:padding-top "40px"}
                  {:min-width "1280px"} {:padding-top "50px"}}

Pragyan Tripathi12:08:10

The code I have written till now is as follows:

(defn merge-style
  [breakpoints style]
  (let [media-queries (s/transform [s/ALL] #(hash-map :min-width (str %1 "px")) breakpoints)]

Pragyan Tripathi06:08:15

@U3L6TFEJF Thanks a lot for the suggestions. I have been able to solve the problem I had with following method:

(defn- get-media-queries
  [breakpoints styles]
  (let [base-style (s/transform [s/MAP-VALS] #(%1 0) styles)
        styles-maps (s/setval [s/MAP-VALS empty?] s/NONE (s/setval [s/MAP-VALS s/FIRST] s/NONE styles))
        styles-list (map (fn [[key val]] (map #(hash-map key %1) val)) styles-maps)
        styles-final (apply vdu/merge-maps styles-list)
        breaks (map #(hash-map :min-width %1) breakpoints)
        styles-merged (into {} (mapv vector breaks styles-final))
    (assoc base-style ::stylefy/media styles-merged)))

Pragyan Tripathi12:08:12

As I am a beginner in clojurescript. I am finding it hard to solve this in functional way using specter.


creating new data structures out of two existing ones it not really something Specter is suited for, it is better suited for transformations of an existing data structure


this is probably easier to solve with regular Clojure code

Pragyan Tripathi13:08:01

got it. I am trying to learn specter so may be that’s why I thinking in those terms all the time. Will figure out a way to in normal clojure code. Thanks.