Improve the gathering of the CSS classes in the source code

[green-coder]

This is what I have in mind:

(with-class-names-meta
  (defn foobar ...))

I think that this pattern would compose better with any existing defn-ish way people use to define their Clojure root variables, and it has the merit do be explicit.

[green-coder]

I am not sure of which approach to use here. Any suggestion or help is welcome.

Here are my most important goals:

1. I want a process which gathers the CSS classes (as strings) from the source code.
2. The process must not depend on a particular build tool (it should not only work via Shadow-CLJS for instance).
3. The process must only gather the strings (or keywords) intended to be used as CSS classes, it should not gather everything it can find.

Nice to have:

1. The process takes advantage of dead code elimination, it won't gather CSS classes from unused render functions.
2. The API permits rewriting the source code so that the CSS classes can be replaced by their minified versions.

[green-coder]

Maybe the best API is "no API". One solution which I imagine is just asking the user to annotate the CSS classes using metadata and do a static analysis on the source code to find them.

^:css would be used to annotate any string and keyword found while walking the target expression.

^:hiccup would be used to annotate the hiccup format, relying on semantic of the format for gathering the classes in keywords and props associated with :class in hashmap literals.

;; Using ^:css
(defn todo-list-comp [todo-list]
  [:div {:class ^:css ["ml-2" "py-2"])}
    (for [todo-item (:todo-items todo-list)]
      [todo-item-comp todo-item "not-a-class" ^:css "this-is-a-class"])])

;; This would work too
(defn todo-list-comp [todo-list]
  [:div {:class ^:css (conj ["ml-2"] :py-2)}
    (for [todo-item (:todo-items todo-list)]
      [todo-item-comp todo-item "not-a-class" ^:css "this-is-a-class"])])

;; Using ^:hiccup
(defn todo-list-comp [todo-list]
  ^:hiccup
  [:div.ml-2.py-2
    (for [todo-item (:todo-items todo-list)]
      [todo-item-comp todo-item "not-a-class" ^:css "this-is-a-class"])])

;; This would work too
(defn todo-list-comp [todo-list]
  ^:hiccup
  [:div {:class ["ml-2" "py-2"]}
    (for [todo-item (:todo-items todo-list)]
      [todo-item-comp todo-item "not-a-class" ^:css "this-is-a-class"])])

[green-coder]

After a fruitful discussion with @p-himik on Slack, I realized that:

• Metadata won't work on strings and keywords. Even if you want to read them directly in the source code, it would be a wrong construct for a Clojure program.
• Using macros as a way to annotate data is a viable alternate solution.

Some things I will try during the holidays:

• Using carve from @borkdude might be a good start at Dead Code Elimination preprocess.
• Using rewrite-clj to parse the source code and extract the CSS class names.

Any help, code contribution or advice is welcome.

[green-coder]

The library rewrite-clj does not provide any high level information on the source code, like symbol resolution, definition context, etc ... Instead of re-inventing the wheel by implementing it myself, it would be better to look for other tools which were already built on the top of rewrite-clj.

Today I found https://github.com/clj-kondo/clj-kondo/tree/master/analysis which might be useful to find all usages of the girouette.core/css macro which is not in unused source code.

[green-coder]

Currently, the tool only finds strings inside the shape (girouette.core/css ...). Good enough for the first release.