Fork me on GitHub
Bardia Pourvakil01:05:36

Anyone know if it’s possible to import or require your own libraries in klipse?


What's the benefit of scss compared to a css-in-clojurescript approach?


Or even just plain static css?


Also, I'm a bit confused about :npm-deps, like is it possible for it to fail to infer externs and foreign-libs for some given npm dependency?


imo just divide your CSS into modules, have a tool that concatenates them together, this will help a lot already

✔️ 4

scss and co. is useful for reusing values: colors, margins etc


css-in-js or basically runtime css is useful when your styles are dependant on runtime values, I wouldn't use it to generate static styles


it's just tooooo much complexity for nothing

👍 4

Ya, I mostly think of css-in-cljs for dynamic css, like if I need to create CSS based on DB or user input.


Though I like how it can bundle css with a react component like all in one. So say you require some namespace that has some nice react component, there's no other setup, no need to remember to add some additional stylesheet to your server or html


And so if I understand correctly, scss can only do static generation. So I guess I would look into it if my normal css becomes so complicated and big that I want to start having more organization and reuse in them

Alex Fell10:05:37

In JS land I pushed to use astroturf as it combines the css in js syntax, but pulls out the embedded css text to sass modules via a virtual file system so that webpack treats them as part of regular css compilation. From my very limited understanding, this smells a bit like a macro, I know that clojurescript can talk to the compiler in a macro, but unsure if it can talk to any other tool chains? What does shadow use under the hood, webpack or something else?


Shadow uses it's own bundler


You can have a macro generate css files at compile time. Or I guess it could even generate sass? I think because I don't really understand sass I'm not totally following though


Also note that css custom properties replace the need to use scss variables and they are dynamic which is v powerful


Essentially CSS is actually incorporating many of the features that made css preprocessors like scss interesting


one of my fav things to do is define a bunch of top level custom properties at the html block level and then you can have media queries which, when hit, will redefine the values making it easy to create responsive layouts


Ok cool,.I'm just learning CSS right now. Will have a look. I do feel I won't find the benefit of scss and sass until I'm somewhat writing a really big complicated set of CSS. And with what you said, probably standard CSS can go a really really long way already

👍 4
Jakob Durstberger10:05:08

Also SCSS is useful for css libs like It provides a few variables that can be configured like colours


I believe it could make css more maintainable. I see it as combination of Sass and all of the approaches combined in clojure and with absolutely minimal code


So I'm pretty new to the cljs ecosystem... wanted to compile code into an npm module using shadow-cljs. It compiles perfectly well if I set the target to browser, but is less happy with the npm module target:

IllegalStateException: Could not find where to put constant cljs$cst$keyword$priority. Used by [cljs.core.async.js, ajax.xhrio.js], selected common dep goog.async.nexttick.js
As this is the first time I've compiled to an npm module, is this below configuration correct? The only googling I could find on this error indicates that :modules should not be used with :npm-module, because there's a lot of syntactic sugar going on behind the scenes that makes it unnecessary. Assuming there is some other nuance I'm missing...
{:lein   true
 :nrepl {:port 8777}
 :builds {:npm {:target :npm-module
                :output-dir "resources/public/js/compiled"
                :asset-path "/js/compiled"
                :entries [foo.core]}}}


@rbruehlman which version do you use? that particular issue was fixed a while ago and I haven't seen it reported since? the version in project.clj is the important one here.


2.8.83 for shadow-cljs, looks like


I can't remember the version I fixed this in so try 2.9.8 which is the latest


Gotcha--I'll try that. Hopefully that does the trick!


curious why you are using :npm-module though? looks like you are building something where :browser might be a better fit?


well at least the paths would suggest a browser build 😛


Yeah, I just lazily stole the paths from the browser build 😉 I definitely need to find a better home for them, but right now was just trying to get it to work


happy to help in #shadow-cljs if you have more questions


aha, thanks! i will do that next time. (also, upgrading seems to have done the trick--thanks again)

👍 4

for those of you who uses emacs (evil-mode), which package do you use to handle s-expression manipulation and smart parentheses?


Thank you

👍 4

Highly recommended


A colleague just tried switching us from using bidi to reitit for frontend routing. From the build report, bidi was 10 Kb, but now reitit is 58 Kb (55 Kb from reitit-core) - is this to be expected?


> react + react-dom is 109 kb (34.8 kb gzipped)


might be worth asking in #reitit


that does seem pretty heavy


Cross posting cause I’m also interested :)


Thanks, will join and follow up there :thumbsup::skin-tone-2:

eccentric J01:05:52

What motivated them to switch?


answered on #reitit


anybody here using secretary with :advanced compilation and :source-maps ?


i'm getting a runtime error on this line:

(defmethod encode-pair ::sequential [[k v]]
XR.Ha is not a function.


looks like missing externs for secretary ?


you can compile with :pretty-print and `:pseudo-names` to help troubleshoot these kinds of issues


awesome, thx!