[ClojureScript] Re: ClojureScript CSS-in-JS Solutions
I wrote about this recently [1] [2]. (ns my.demo (:require [shadow.markup.css :as css :refer (defstyled)])) (defstyled page-title :h1 [env] {:color "red" "&:hover" {:color "green"}) As I mentioned the API is very much inspired by styled-components although I think template-literals is strictly worse. So instead I used simple clojure maps where keywords keys refer to CSS properties and string keys refer to scoped CSS selectors (see details in [2]). I'm using this in production and so far I'm very happy with it, slowly migrating all my code towards it. Several other people in [1] also mention alternate approaches that you might want to look into. Happy to answer questions about shadow.markup either here or in Slack (@thheller). Cheers, /thomas [1] https://groups.google.com/d/msg/clojurescript/sc-0hukwfpw/v_j8rkeOCAAJ [2] https://github.com/thheller/shadow/wiki/shadow.markup On Thursday, March 16, 2017 at 7:42:19 AM UTC+1, rgde...@gmail.com wrote: > Hello there! > > I wasn't able to find a CSS solution for ClojureScript that scopes your CSS > to a component, but that also lets you write real CSS (think CSS Modules and > styled-components in JS-land). > > So I'm looking into porting over `styled-classnames` (which is a spinoff of > `styled-components`) over to cljs, though since `styled-components` uses > tagged template literals, I wasn't 100% sure what to do with the API. Here's > is what I have so far: > > https://cl.ly/290W3O102u2b (image also attached) > > I'd love to get some thoughts from more experienced clojurians about 1) > whether or not there's already a solution that meets my needs and 2) if not, > whether or not this "string-interpolation-string" API has any obvious > problems. (I'm still fairly new to Clojure, so it's quite possible I'm not > seeing something obvious.) -- 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.
[ClojureScript] Re: ClojureScript CSS-in-JS Solutions
Thanks for pointing me to your library and to the other thread, I'll take a look! In general, I disagree that a string-based solution is strictly worse than a map-based solution, since using strings can help the library remain evergreen. If the library can inject strings that use "real" CSS with little or no parsing, it means that it'll be more likely to support new CSS syntax without needing any updates. It also means that current CSS syntax weirdnesses such as pseudoclasses (:hover, etc) and queries (@media, @supports) work how you'd expected them to. -- 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.
[ClojureScript] Re: ClojureScript CSS-in-JS Solutions
On Thursday, March 16, 2017 at 6:55:44 PM UTC+1, rgde...@gmail.com wrote: > Thanks for pointing me to your library and to the other thread, I'll take a > look! > > In general, I disagree that a string-based solution is strictly worse than a > map-based solution, since using strings can help the library remain > evergreen. If the library can inject strings that use "real" CSS with little > or no parsing, it means that it'll be more likely to support new CSS syntax > without needing any updates. > > It also means that current CSS syntax weirdnesses such as pseudoclasses > (:hover, etc) and queries (@media, @supports) work how you'd expected them to. It makes more sense to use strings in JS since you can't achieve what I'm doing without more work there. JS doesn't have keywords so it can't differentiate between properties and selectors in objects as easily. You will still use strings for selectors so media queries or pseudoclasses just work, property values default to strings as well. But the most important part is: It is all just Clojure code. Your Clojure tools just work. You can call functions, you can merge styles from different parts. Good luck doing this with strings. FWIW styled-components adds 20KB (min, gzip'd) since it requires a CSS parser at runtime. It's hard to measure shadow.markup due to :advanced but it much less than that, probably 10%. -- 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.
[ClojureScript] Re: ClojureScript CSS-in-JS Solutions
I definitely agree with your last point: `styled-components` includes PostCSS and is huge as a result. (I might be wrong, but I remember it being larger than 20KB gzipped.) They're switching to a smaller parser for v2, but at the moment, it's a lot. -- 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.
[ClojureScript] Re: ClojureScript CSS-in-JS Solutions
I'd also recommend checking out radium: https://github.com/FormidableLabs/radium It's an inline style higher-order component for react. It supports media queries, pseudo-selectors like :hover, keyframe animations, does vendor prefixing for you, and supports server side rendering. It will also merge an array of objects intelligently, as well as filtering any falsy elements so you can easily compose styles based on the component's state. -- 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.
[ClojureScript] Re: ClojureScript CSS-in-JS Solutions
styled-classnames has now been merged into CLJSJS and is up on Clojars: https://github.com/rgdelato/styled-classnames https://clojars.org/cljsjs/styled-classnames -- 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.