Enhancement: Integrate CSSLJ for CSS file generation about hiccup

[weavejester]

In principle, this seems a good idea. However, there are two things CSSLJ is currently lacking:

1. Unit tests
2. Pre-compilation

Also, I'm uncertain whether using a hash map is a good idea for the properties. In CSS, the order of properties is significant.

[jlr]

I see. I would be willing to work towards unit tests and precompilation for a CSS library if you decided you were interested in integrating one - there are several and I have no idea if CSSLJ is the best one. Other options are Gaka, cssgen, etc.

Gaka uses a hiccup-like syntax except without the hashmaps. It just uses vectors.
Example Gaka CSS:
[:div#foo
:margin "0px"
[:span.bar
:color "black"
:font-weight "bold"
[:a:hover
:text-decoration "none"]]]

cssgen:
(rule "ul.nav, ol"
:color :black
:background-color :#ddd
:padding [:1px "2px" (px 3) 0])

gwt-clojure: (doesn't seem to clojurize css, just adds more composability)
(gwt-create-css
[".root {background-color: thistle;}"
".page {background-color: lavender; border: solid slategray 10px; width: 750px; margin: 0 auto;}"
".header {border-bottom: solid slategray 1px;color: indigo;}"])

So there's a few approaches to glance at. I have no opinion.

The one thing I DO have an opinion on is this: You, as the author of Hiccup, have good taste. Any solution you would wind up choosing for CSS in Clojure is probably something I'd want to use.

If you're interested in figuring something out for CSS in Hiccup I'll do the mundane work you don't want to do, or we can just close the ticket and forget about it. (I would be curious to learn what you used for CSS in Clojure if you ever pick a lib for your own use, though.) Thanks.

[jlr]

I have one more idea.

Array-map provides the exact semantics we need: it's a hash map that maintains the original order it's given. If array-maps could be dropped in in place of hash-maps, you could use Hiccup's style as-is to generate CSS.

The only problem is I think that requires a reader macro. But if there winds up being a way to get around the need for a reader macro, one could have a "css" macro which takes hiccup-style syntax and immediately reads the hash-maps given by the user as array-maps, thus preserving argument order but appearing no different to the user.

Food for thought. It would be the ideal solution if it could be done.

[weavejester]

I think that designing an appropriate syntax for CSS is probably more difficult than doing so for HTML. The structure of a mark-up language like HTML corresponds to the DOM it will be parsed into, but with a declarative language like CSS, one has rather more options.

From a literal perspective, CSS might look something like this:

;; [locators properties, locators properties, ...]
[:div.main :li] [[:color "#000055"] [:font-size "10pt"]]
[:p] [[:color "black"]]

This syntax is ordered, like CSS, and allows multiple CSS locators to be assigned to a group of properties.

However, I suspect we can take a few liberties with this syntax. For instance, whilst CSS properties are applied in order, most of the time the order is irrelevant. So most of the time, we could write:

[:div.main :li] {:color "#000055", :font-size "10pt"}
[:p] {:color "black"}

We could also drop the vector requirement if there is only one locator:

[:div.main :li] {:color "#000055", :font-size "10pt"}
:p {:color "black"}

Another possibility is to mix the brackets around a little, so we get CSSLJ:

[:div.main :li {:color "#000055", :font-size "10pt"}]
[:p {:color "black"}]

But we'd need to make sure those maps could be substituted for ordered vector pairs if necessary.

Another possibility is to optionally allow multiple maps to denote order:

[:div.main :li {:color "#000055", :font-size "10pt"}]
[:div.main :li {:color "#000055"} {:font-size "10pt"}]   ;; always output color first

Then perhaps a different meaning can be assigned to vectors and maps

;; Nested locator
[:div.main {:font-size "10pt"} [:li {:color "#000055"}]]

;; Equivalent to:
[:div.main {:font-size "10pt"}]
[:div.main :li {:color "#000055"}]

But in adding this particular syntax, we break a one-to-one mapping with the outputted CSS. That may make it harder to pre-compile the output, but we might be able to get away with it.

There are kinda a lot of options, and it's not yet a super-high priority with me, so I'm afraid I haven't given it that much thought.

[jlr]

OK, well thank you for the discussion. We'll let it be for now, but I may try playing with the ideas you listed. I'll let you know if I come up with anything.