Fork me on GitHub
#specter
<
2019-08-19
>
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)]
  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.

schmee13:08:22

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

schmee13:08:37

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.