How to generate css for the front end

[teotenn]

trafficstars

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.

[jamesnvc]

Including the Tailwind CSS link shouldn't be necessary, that will just double things up.

What is teoten.ttblog.my-grammar/class-name->garden? I would expect that to be girouette.tw.default-api/tw-v3-class-name->garden

You say the resulting CSS is very small, but what is in it? Is it just the preflight and base rules, is it picking up any of the classes from your code?

[teotenn]

The teoten.ttblog.my-grammar/class-name->garden is based on the example template, it contains the following:

(ns teoten.ttblog.my-grammar
  (:require
    [girouette.version :as version]
    [girouette.tw.core :as gtw]
    [girouette.tw.common :as common]
    [girouette.tw.color :as color]
    [girouette.tw.layout :as layout]
    [girouette.tw.flexbox :as flexbox]
    [girouette.tw.grid :as grid]
    [girouette.tw.box-alignment :as box-alignment]
    [girouette.tw.spacing :as spacing]
    [girouette.tw.sizing :as sizing]
    [girouette.tw.typography :as typography]
    [girouette.tw.background :as background]
    [girouette.tw.border :as border]
    [girouette.tw.effect :as effect]
    ))


(def my-custom-components
  [{:id :rainbow-text
    :rules "
    rainbow-text = <'rainbow-text'>
    "
    :garden (fn [_]
              {:background-image "linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red)"
               :background-clip "text"
               :color "transparent"})}])

(def my-chosen-components
  (-> [common/components
       layout/components
       flexbox/components
       grid/components
       box-alignment/components
       spacing/components
       sizing/components
       typography/components
       background/components
       border/components
       effect/components
       ]
      (version/filter-components-by-version [:tw 3])
      (into my-custom-components)))


;; Adds colors to the existing default ones.
(def my-color-map
  (assoc color/tw-v3-unified-colors-extended
    "cat-white"  "eeeeee"
    "cat-orange" "e58c56"
    "cat-black"  "333333"))

(def class-name->garden
  (-> my-chosen-components
      (gtw/make-api {:color-map my-color-map
                     :font-family-map typography/tw-v2-font-family-map})
      :class-name->garden))

The css yes, it contains only the preflight and base rules and whatever I put into my-custom-components like the rainbow-text, and none of my classes.

[green-coder]

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

I propose to try Ornament. It is using Girouette under the hood and maybe it could help your use case better.

Girouette is mainly a big function that takes a string and return some Garden data. Ornament is more in the user-friendly side.