noprompt / lein-garden

Leiningen plugin for compiling Garden stylesheets.
The Unlicense
84 stars 17 forks source link

How to build multiple garden stylesheets as 'modules' using the current plugin? #29

Closed priyatam closed 9 years ago

priyatam commented 9 years ago

I have the following stylesheets: mixins, typography, layout, etc., loaded in a particular order. Lein-garden plugin expects :source-paths and a :stylesheet value that must be a symbol in a single namespace, typically a value returned by defstyles. Is this the way you organize modules using garden?

Here's my current workflow:

(ns company-ui.typography)

(def fonts
  [:body
   {:font-family "sans-serif"
    :font-size (px 16) 
    :line-height 1.5}])

(def media-queries
 ;; ...)

(defstyles styles 
  (list fonts media-queries))

project.clj

:garden {:builds [{:id "typography"
                        :source-paths ["src/styles"]
                        :stylesheet company-ui.typography/styles                                 
                        :compiler {:output-to "resources/public/css/typography.css"
                                   :pretty-print? true}}

                    {:id "layout"
                     :source-paths ["src/styles"]
                     :stylesheet company-ui.layout/styles                                 
                     :compiler {:output-to "resources/public/css/layout.css"
                                :pretty-print? true}}                    
                    ]}

As you can see the more 'modules' I have, the more build ids I must create.

Is there any other way you recommend mapping garden stylesheets into modules to be output into a single css file?

noprompt commented 9 years ago

@priyatam Sorry for the delay on getting back to you. I see what you're getting at. Do you have a concept or a suggestion as to how this might/should look?

priyatam commented 9 years ago

No worries. For dev, I ended up with a convention and defined an index that merges necessary defstyles to generate a single css. My concept of module is simply the 'index' definition per package (as done in some npm and sass libs) to control the order and debug included styles at one place. In theory you can have many 'indexes' per package-level ...

For prod I use another build-id with compiler settings.