Clojurians Log v2

@hifumi123 Re > the DSLs are never complete; garden, cljss, shadow-css, etc. are all leaky abstractions that break down the moment you want media queries, keyframes, font faces, etc. At least for garden, this is a lack of documentation, not feature-set. You can do all the things in CSS in Garden but I've found it poorly documented how to do those things.

e.g. defkeyframes in https://github.com/noprompt/garden/blob/master/src/garden/def.clj#L97 to do keyframes

Or the media query tests here - https://github.com/noprompt/garden/blob/05590ecb5f6fa670856f3d1ab400aa4961047480/test/garden/compiler_test.cljc#L63

https://github.com/clj-commons/cljss

I actually dislike CSS-in-CLJS for two reasons: 1. the DSLs are never complete; garden, cljss, shadow-css, etc. are all leaky abstractions that break down the moment you want media queries, keyframes, font faces, etc. 2. solutions like garden work by compiling to CSS at run-time — i dont want custom CSS solutions to provide additional runtime overhead

My projects tend to use Sass instead. You can modularize it in the same way as CSS modules, and you still get live reloading with shadow-cljs

If you’re fine with adding webpack to your project, then you can “import” CSS files and possibly get CSS modules in your CLJS project

Interesting, I haven't expected Sass to be on the list 🙂

Thanks @hifumi123

Np. Note that you don’t have to use Sass. Again, using webpack, you should be able to “import” CSS files and use CSS modules just like in vanilla JS. You can go down the Garden route but have component-local styling, check out Herb

im just not a big fan of CSS-in-CLJS (or even CSS-in-JS solutions like Emotion, styled-components, etc.)

https://github.com/roosta/herb has been archived

Oh well. Guess it’s not an option then

I think I'm going to look for CSS components or something akin to them. Inline styling is a good start, but one quickly runs into limitations and global styles are bleh.

Definitely check out Sass modules if you want/can — there is a built-in module system and mixins, variables, etc. do not have to be placed in a global registry at all

But if you want CSS modules, then you’ll need to figure out how to set up webpack with shadow-cljs. It isn’t too hard, but it’s a lot of more setup compared to setting up Sass

You can use tailwind if you like the utility class approach, and enhance that with plugins to get more component-y approach (like daisyui)

> https://github.com/roosta/herb has been archived > > Oh well. Guess it’s not an option then Why not? There are quite a few archived CLJ[S] libraries that are archived only because they're complete. There are no [important] issues, there are no features that are in the scope of the project. Can't say for sure whether it's the case for Herb, but at least there are no open issues at all.

I’ve been so accustomed to hearing this excuse from the Common Lisp community that I simply disagree with it out of principle. Many of these “finished” libraries often have bugs, so are they really finished?

While it may be true for extremely simple libraries (e.g. wscljs), I’m not sure if something at the complexity of Herb is exactly ever complete or free of bugs

Perhaps it's more true in Clojure community then. :) I have most definitely seen stable libraries without any reasonable issues that haven't received any updates in years.

Or at the very least, assuming Herb is a complete library, I do not feel confident recommending it to users simply because someone will need to fork it and maintain that, but nobody has done so. And when users inevitably run into a bug with the library, well, it is archived, so their only choice is “fork it and possibly maintain it too”. A tough sell IMO.

Unfortunately I forgot the name of some tooling around Garden specifically for “modularizing it” and introduce hot reloading with it. Otherwise I’d recommend it over Herb.

@tatut personally I found Tailwind CSS's approach appalling. It might be solution for some, I'll stay away. Anyway it still wouldn't solve the need for a:hover, media queries etc.

@hifumi123 I'm with you on that one. To me if it's archived that's a bad sign. May have no open issues, well I don't think archived repos can take new issues!

there is no “correct” answer on how to do CSS, only different tradeoffs

https://github.com/Jarzka/stylefy is in the same vein as herb

@jakub.stastny.pt_serv not looking to convince you of Tailwind’s approach but I believe it does support pseudo-classes, media queries etc. https://tailwindcss.com/docs/hover-focus-and-other-states

@tomisme I didn't know that. Still don't like it at all, but new thing learnt.

I'll give you guys an update on this, in case any of you find this useful: I end up not using any of the CLJS space tools nor CSS modules. We started using Joy UI from MUI and its CSS capabilities are the most powerful thing of it (and something you can't get rid of even if you wanted). The styling solution is in fact defined in MUI system which Joy UI is using. Now me personally, I'm a bit of a purist and would have preferred something like CSS modules. With that said the approach these libraries take is very powerful and it is the future of the web apps. If your app isn't as heavy as this (we have a lot of spreadsheets that have to behave like spreadsheets, not just a plain HTML table, so we're going full in on heavy JS), you can get by just fine with CSS modules, but if you do have a heavy JS app, the approach take by those makes a lot of sense. For me it's a new thing, well I was out of programming for the past 2 years, the world has moved on clearly. https://mui.com/joy-ui/customization/approaches/

I use a mix of both sx prop and Sass in my app using Material UI 😁 I agree the sx prop is amazing. You can define a single primary color for a button and it computes the tints and shades for each button state for you. I will note that the sx prop is one of the slowest options, so do not use it too much https://mui.com/system/getting-started/usage/#performance-tradeoffs

Of course, the "real world" is much more blurry: these benchmarks render 1,000 components. If you need to render large amounts of data, you should use react-virtualized and avoiding rendering everything simultaneously

Yeah. Esp. don't js->clj the fucking theme in the callbacks 😂 It's awfully huge.

It's a lot to learn with MUI/Joy UI. Not like I'd need more, I'm already new to CLJ, CLJS, Reagent & hiccup, Emacs, Org-mode/org-babel/literary programming. I spent the past few days in MUI system/Joy UI documentation trying to understand what's going on and how it translates into CLJS.

experiment support, you can use reagent.dom.client/createRoot` if you want to try it out and give feedback

if you don't want the warning, i guess use react 17 in your dependencies instead of 18

Thanks @rolthiolliere, I'll give it a go.