Lightweight React wrapper and CSS-in-JS styling for ClojureScript


#1

I thought maybe someone might find these projects useful for themselves.

Preact in ClojureScript

I was always interested in having more tools to build PWAs (progressive web apps) in ClojureScript. And since cljs runtime is tiny (just 30KB) I thought it would be good to have a tiny renderer for UIs as well. That’s why I created Prum, it’s basically Rum and Sabolono ported to use Preact under the hood. Prum is almost exactly the same as Rum from user perspective, except that it is more strict about Hiccup. Because the intention of the library is to build lightweight apps, there’s no runtime Hiccup interpretation, instead it always compiles into plain React. I know at least one person who is interested in building business around PWAs in ClojureScript, so maybe you also have a use case for Prum :slight_smile:

CSS-in-JS for ClojureScript

So in JavaScript world there’s this new movement towards modular CSS which fits better into components way of thinking. The idea is to write CSS right in your components, which is what Garden is being used for in Clojure world. CSS-in-JS libraries are different from Garden in that they are more components centric and usually perform a number of optimizations which allows to have dynamic styles at runtime with decent performance.

cljss (Clojure Style Sheet) is a small library (most of the code is macros to compile as much as possible at build time) which I developed as an experiment, but it seems like some people found it useful and using it in production. I even got a small donation on Patreon :slight_smile: It is mostly inspired by Emotion library. Some of the interesting optimizations it does: distinguishes static and dynamic parts of CSS and makes use of CSS Variables to update dynamic styles. It is still far from supporting all basic CSS features and maybe performance can be improved, so I’d be glad to have more contributors on board.


#2

I started trying emotion in my work this month. But for my personal projects I’m still in the inline CSS age. Would like to see cljss becoming more maturer in this area.


#3

Are you planning lein/boot template, which uses both libraries together?


#4

I’d love to! Ideally it should come with pre-configured code-splitting and Service Worker build. And maybe follow PRPL performance pattern. Maybe something similar to Preact CLI would be enough. I don’t really have time for this stuff, but if there will be demand, we could make something for sure!


#5

IMO from all required CSS features cljss is lacking only CSS Media Queries, everything else is covered. I still can not decide on the syntax for media queries, didn’t really have a need for them yet.


#6

If you got some example project or something like that, I could try to create the template :slight_smile:


#7

Great work with cljss, I’d love to see media queries happen! Important feature for modern web apps, at least as of today, in my opinion. Just (defmedia …), or (defbreakpoint …) á la Bootstap, even?


#8

Thanks! You are right, this is the only thing that is missing currently in cljss. Haven’t implemented it yet because still not sure how it should look like. But I guess I just have to do something and let everyone try it.