How to generate css for the front end

Hi, first of all, thanks a lot for the package, I've been using it with cljs reagent and it works excellent. However I cannot make it work for a static site generated with clojure.

This is more a question than an issue, what would be the recommended approach to build the css styles for a static generator?

As mentioned, I am building with clojure and thus, at the beginning I thought of allowing girouette.processor to watch on the src path, as the demo example. However, it does not seem to work correctly.

What I have so far:

The my_css.cljc and my_grammar.cljc from the demo example. Also the content of app.cljc of simple-example is used via hiccup merged after the following layout page, which is served via ring jetty during development, and converted to a html page during building.

(defn layout-page [request page]
  (html5
   [:head
    [:meta {:charset "utf-8"}]
    [:meta {:name "viewport"
            :content "width=device-width, initial-scale=1.0"}]
    [:title "Tech blog"]
    [:link {:rel "stylesheet" :href "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"}]
    [:link {:rel "stylesheet" :href "/styles/girouette.css"}]
    ]
   [:body
    [:div.body page]]))

Here I have experimented by commenting out either the tailwind link or the girouette only, and I get different effects each combination. The best so far is allowing both.

However, my resulting css generated by girouette is very small (220 lines) compared to the one generated by the demo example (522 lines) with reagent cljs. Also the final page looks way different that the one generated with the same code in cljs (your demo example).

My alias is not different from the one of the demo example either, maybe the problem is there?

:girouette-processor {:extra-deps {girouette/processor {:mvn/version "0.0.8"}}
                        :ns-default girouette.processor
                        :exec-fn    process
                        :exec-args  {:css {:output-file "resources/public/styles/girouette.css"}
                                     :base-css-rules [girouette.tw.preflight/preflight-v3_0_24
                                                      teoten.ttblog.my-css/my-base-css-rules]
                                     :garden-fn teoten.ttblog.my-grammar/class-name->garden
                                     :apply-classes teoten.ttblog.my-css/composed-classes
                                     :watch?        true
                                     ;; :dry-run? true
                                     }}

Any advices or guidance on this?

Sorry if something is not clear, I am not experimented front end developer and this is more of a personal project. Feel free to ask any details I am omitting. And thanks in advance for your time and patience.

green-coder / girouette

How to generate css for the front end #101