This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2019-12-19
Channels
- # adventofcode (18)
- # announcements (1)
- # babashka (153)
- # beginners (73)
- # bristol-clojurians (4)
- # calva (1)
- # cider (6)
- # clj-kondo (38)
- # clojure (154)
- # clojure-dev (12)
- # clojure-europe (7)
- # clojure-finland (11)
- # clojure-nl (70)
- # clojure-spec (13)
- # clojure-uk (101)
- # clojuredesign-podcast (2)
- # clojurescript (15)
- # core-async (30)
- # cryogen (1)
- # cursive (5)
- # devops (1)
- # duct (4)
- # figwheel-main (1)
- # fulcro (19)
- # jobs (12)
- # kaocha (17)
- # luminus (2)
- # malli (8)
- # music (5)
- # nrepl (13)
- # off-topic (20)
- # overtone (3)
- # re-frame (7)
- # reagent (38)
- # shadow-cljs (13)
- # specter (3)
- # tools-deps (6)
- # vim (7)
Morning! Trying to figure out a good way to package CSS in a CLJS library but no luck 😞
@kevin.van.rooijen You mean publishing a library with CSS included?
@kevin.van.rooijen Usually you put that in the resources
folder
Last workday of the year, some some things to round up. And yesterday my fix for kotlin-graphql got merged. So in case I can do GraphQL, and I want to use subscriptions, and I'm not allowed to use Clojure, there is a viable alternative.
@kevin.van.rooijen indeed resources, and if the source is sass you can use something like lein-sass to build the css, https://github.com/openweb-nl/kafka-graphql-examples/blob/a1892c21fdc2041a74b39223c7bade1198604339/frontend/project.clj#L21
@kevin.van.rooijen you need a server for that which serves up the resources from the jar
@kevin.van.rooijen is your lib intended for general purpose usage or do you have a limited audience in mind?
@borkdude Currently we only use it internally, and we use a git url to get the dependency
@kevin.van.rooijen A lot of CSS is available on webjars as .jar files as well. Here's an example of a usage: https://github.com/borkdude/who-follows-me/blob/d5d56a61ef3c5244ccc4f691519ee1fe6a05e48e/project.clj#L7
@kevin.van.rooijen And here's a ring middleware which serves the jar: https://github.com/borkdude/who-follows-me/blob/d5d56a61ef3c5244ccc4f691519ee1fe6a05e48e/src/who_follows_me/handler.clj#L44
Yes, that's what I wanted to know. You can also publish your CSS as a separate package of course
I haven’t deployed a CLJS package yet so I’m not too familiar with the process. But if I understand correctly; if I add the CSS to resources, bundle the library as a jar, I can include it in my main app with hiccup.page/include-css
?
@kevin.van.rooijen If you publish your sources as a lib, a clojars .jar is the standard format for that. If the CSS is essential to the lib, you include it in the resources and it gets packaged along with your library. If you want to deploy the compiled CLJS sources + CSS to a static assets folder, that belongs to the build process and is a separate step from the "publish as a library" one.
@kevin.van.rooijen for compiling CLJS and selecting the CSS from our classpath to spit out to disk we use boot and that step looks like this:
(deftask build-cljs []
(set-env! :source-paths #(conj % "src-cljs-prod"))
(comp
(cljs :optimizations :advanced
:source-map true
:compiler-options {:foreign-libs foreign-libs})
(sift :invert true
:include #{;; we include app.out by design, for Sentry source mapping
;; it's only accessible by datahubdev and sentry
;; #"^public/js/app\.out/"
#"^public/js/vendor/"
#"^public/devcards/"
#"\S+\.cljs\.edn$"})))
(deftask build-less []
(comp
(less :source-map false :compression true :inline-javascript true)
(sift :invert true
:include #{#"^public/css/.*\.less$"
#"^public/css/components/"
#"^public/css/main/"
#"^public/css/pages/"})))
All the JS + CSS ends up in a target folder on disk. You can then choose to deploy those files to a static file server, or package it to an uberjar which will be deployed somewhere (we do both)
So there are two distinct steps: 1) publish as lib 2) use as lib (add to classpath) and compile CLJS / CSS and spit it out to disk
Step 2 depends on what build tool you use, lein, boot, tools.deps, shadow-cljs, whatever
Ok sorry lot to process haha, for clarity you’re not talking about cljsjs, right? We’re just talking about clojars
Right, ok then I guess we need to include it in our build process, this does clear up a lot for me
I was just hoping that there was a way to automatically include the styles, but I guess not
This would be something to include in the README of an open source project that provides CSS
@kevin.van.rooijen if it's just a single compiled CSS file that people need, you can also just include it in your repo and point people at it so they can download it themselves, but you'll still need to publish the (uncompiled) CLJS sources to clojars
@kevin.van.rooijen You can do both I guess
Which is fine. But it would’ve been nice if users could just include the dependency and use the CSS without writing a custom build step
@kevin.van.rooijen There's nothing stopping you from both including it in the jar + publishing it to a CDN/repo
The first option is nice for people who are using a build tool to compile a single CSS file
@hobosarefriends what do you use for frontend at LT?
I use nothing, because I stay in the backend almost exclusively, but my client has the frontend in... polymer (I think)
I think Play framework also uses webjars a lot, so there's probably examples in your companies codebase as well
it seems the edge reference app also uses webjars: https://github.com/juxt/edge/search?q=webjars&unscoped_q=webjars