On Thursday, February 2, 2017 at 11:36:43 PM UTC+1, 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
This is interesting. A few thoughts...
Have you considered using garden syntax for the style generation? I have a ton
of garden styles already, and I imagine others do to, direct porting would be
awesome.
Is there a way to reuse css classes? Generating classes for each element
potentially produces a lot of redundant css, and in cases where performance is
an issue, the same class being applied to many elements will be faster
--
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 clojurescript+unsubscr...@googlegroups.com.
To post to this group, send email to clojurescript@googlegroups.com.
Visit this group at https://groups.google.com/group/clojurescript.
