This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2023-02-03
Channels
- # announcements (1)
- # babashka (31)
- # babashka-sci-dev (53)
- # beginners (34)
- # calva (54)
- # cider (15)
- # clj-kondo (9)
- # clojure (115)
- # clojure-dev (19)
- # clojure-europe (21)
- # clojure-nl (1)
- # clojure-norway (78)
- # clojurescript (10)
- # clr (9)
- # community-development (9)
- # core-async (24)
- # cursive (18)
- # datomic (59)
- # emacs (43)
- # figwheel-main (2)
- # fulcro (4)
- # graphql (4)
- # malli (7)
- # meander (12)
- # nbb (14)
- # off-topic (22)
- # polylith (9)
- # re-frame (5)
- # reitit (3)
- # releases (1)
- # shadow-cljs (36)
- # sql (1)
- # tools-build (23)
- # xtdb (13)
Has anyone came up with a decent setup for CSS modules and shadow-cljs? From developer experience side of things Webpack's loaders model is really nice, but I don't want to go that route.
Consuming transformed CSS in cljs is not an issue, but I haven't figured yet how to make it work in dev, in watch mode. Where a change to CSS file should trigger recompilation of respective cljs ns. Perhaps emitting JS modules from CSS files is the way to go :thinking_face:
On the other hand (:require ["styles.js"])
is kind of confusing
even (my-require "styles.css")
would be fine, as long as the reference is straightforward
there's no 1to1 mapping if I edit CSS file and require JS file
> not sure which problem you are trying to solve here, so please clarify To make the setup less confusing for devs
I have never used css modules, since I personally fine them very clunky and annoying. so I might be biased and not seeing what a good solution might look like
this is my take on what css should look like https://github.com/thheller/shadow-css
(ns
(:require [shadow.css :refer (css)]))
(defn hiccup-example []
[:div {:class (css :px-4 :shadow {:color "green"})}
"Hello World"])
I'm asking about the code side first since that decides how things are implemented and built
sure! Will get back in ~30 minutes, after a meeting
so ideally it would be the following
(def styles (css "./button.css"))
[:div {:class (:base styles)} ...]
[:div {:class (:warn styles)} ...]
maybe (css "./button.js")
is fine as a starting point
I mean (:require ["button.js"])
I’ve tried convincing myself to use garden and inline styling in reagent, but in the end I found all of these “CSS in Clojure” things to be lacking and often requiring me to write literal CSS inside strings, and extensions to garden ultimately felt like I was re-inventing features I took for granted in Sass in a worse way. So in the end I just use Sass for styling and keep a watch running for recompiling Sass assets into CSS (which shadow-cljs transparently hot reloads)
As long as you can get a single CSS file outputted by sassc into your public
folder, then shadow-cljs takes care of the hot reloading and it works out very nicely in practice. As a benefit you get mixins, color blending functions, scoping, and so on. I cannot see myself ever going back to pure CSS or even what feels like the CLJS equivalent of CSS-in-JSX
With that said, if you must use a React library that insists on importing CSS modules, then you have practically no other choice but to set up Webpack (see option #2 https://code.thheller.com/blog/shadow-cljs/2020/05/08/how-about-webpack-now.html)
That's what we currently have (a background process smashing all Stylus files together). The main problem is global class names. Which is the only thing really that we want from CSS modules (basically hash + a readable class name).
if you want to do it via a css
macro you can do so. but you have to build it yourself. you can inform shadow-cljs that it needs to watch the css files as described here
the important bit being the extra analyazer data https://github.com/thheller/shadow-cljs/blob/483a25b522895225b63321e39bbc081dfba8c58b/src/main/shadow/resource.clj#L47-L49
then have your external tool just output the JS files into that folder, while presering namespace structure
then as far as shadow-cljs is concerned it is just loading JS files and watch already watches them