Hello,
After seeing this message, we extracted a library from work that uses garden
and adds the style when the component is rendered (when using React). Code
currently lives at https://github.com/guilherme-teodoro/stylish
Usage is like:
(ns stylish.example
(:require [stylish.core :as stylish]
[garden.units :as units]))
(defn style
[color]
[{:font-size (units/px 40)
:background color}])
(def button-style
[{:color :yellow}
[:&:hover {:color :blue}]])
(defn show
[]
[:div {:class (stylish/render (style color))} ;; return:
stylish_example-style-1
[:button {:class (stylish/render button-style)}]]) ;; return:
stylish_example-button-style-1
We have being using it in prod from months now and it works fine.
HTH,
mynomoto
On Thursday, February 2, 2017 at 8:36:43 PM UTC-2, Thomas Heller wrote:
> Hello,
>
> I'm not sure how many of you are in this horrible situation where you have to
> write CSS for your React Components. I typically have to write way more than
> I'd like and always hated the way I wrote it. Until a few weeks ago.
>
> I wrote this thing and so far I really like it. Too early to tell whether
> this is actually a good idea but I already prefer it over pretty much
> everything else I have used in the past (CSS, SCSS, OOCSS, BEM, ...).
>
> Anyways here it goes:
>
> (ns my.fancy.component
> (:require [shadow.markup.css :as css :refer (defstyled)]))
>
> (defstyled title :h1
> [env]
> {:color "red"})
>
> (h1 {} "hello world")
>
> In Clojure this produces <h1 class="my-fancy-component--title">hello
> world</h1>. There are also ways to generate the appropriate CSS so the
> element is actually styled in your page. Not totally settled on the final API
> but it works well enough for now.
>
> In ClojureScript this produces a ReactElement and should work with React
> natively and most CLJS React Wrappers like OM (although I tried no other than
> my own). No extra CSS generation is required here, just include it in your
> page and it will be styled.
>
> More here: https://github.com/thheller/shadow/wiki/shadow.markup
>
> This is basically my take on the whole css-in-js thing that is happening in
> the JS world if anyone follows this. I wasn't happy with any of their
> implementations so I wrote this.
>
> If you'd like to use this try it with this:
>
> [thheller/shadow-client "1.0.180"]
>
> The Clojure part also requires hiccup, the CLJS parts require React via
> cljsjs.react.
>
> If anyone is actually interested in this I'd be happy to go over some more
> details. I just open-sourced this as I wanted to use it in another project
> and needed a place to put it. Consider this very ALPHA though, you have been
> warned. ;)
>
> Cheers,
> /thomas
--
Note that posts from new members are moderated - please be patient with your
first post.
---
You received this message because you are subscribed to the Google Groups
"ClojureScript" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/clojurescript.
