Fork me on GitHub
#clojure-nl
<
2019-12-19
>
kwrooijen08:12:37

Morning! Trying to figure out a good way to package CSS in a CLJS library but no luck 😞

kwrooijen08:12:13

Seems like the only option is copying from the ~/.m2 directory

thomas08:12:32

Moin moin.... Kerst lunch and Borrel today. so party time!

borkdude08:12:32

@kevin.van.rooijen You mean publishing a library with CSS included?

Mno08:12:54

Buongiorno

borkdude08:12:43

@kevin.van.rooijen Usually you put that in the resources folder

kwrooijen09:12:54

But how do I get it in my index.html file?

gklijs09:12:23

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.

borkdude09:12:20

@kevin.van.rooijen you need a server for that which serves up the resources from the jar

borkdude09:12:05

@kevin.van.rooijen is your lib intended for general purpose usage or do you have a limited audience in mind?

kwrooijen09:12:00

@gklijs It’s a CSS file

kwrooijen09:12:15

@borkdude Currently we only use it internally, and we use a git url to get the dependency

kwrooijen09:12:32

But we do want to make it public eventually and upload it to clojars, for example

kwrooijen09:12:18

I see, then you use hiccup.page to include it in your view

kwrooijen09:12:07

Our frontend isn’t served through a Clojure service, though

kwrooijen09:12:26

We compile it to standalone html / css /javascript

kwrooijen09:12:35

Or do you mean something else?

borkdude09:12:57

Yes, that's what I wanted to know. You can also publish your CSS as a separate package of course

borkdude09:12:23

but if you offer it as a CLJS lib it makes sense to bundle it with the .jar

gklijs09:12:33

In that case you can use git module for that

borkdude09:12:32

you can also write the resources from the jar to disk

kwrooijen09:12:56

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 ?

kwrooijen09:12:19

Or would that not work if the main app is stand-alone?

kwrooijen09:12:33

Sorry, I’m making this confusing

kwrooijen09:12:32

Editted for clarity

borkdude09:12:30

@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.

borkdude09:12:55

@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$"})))

borkdude09:12:22

(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/"})))

borkdude09:12:31

But depending on your build tool, that logic may differ

borkdude09:12:39

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)

borkdude09:12:28

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

borkdude09:12:27

Step 2 depends on what build tool you use, lein, boot, tools.deps, shadow-cljs, whatever

borkdude09:12:27

Hope that helps

kwrooijen09:12:25

Ok sorry lot to process haha, for clarity you’re not talking about cljsjs, right? We’re just talking about clojars

kwrooijen09:12:23

Right, ok then I guess we need to include it in our build process, this does clear up a lot for me

kwrooijen09:12:04

I was just hoping that there was a way to automatically include the styles, but I guess not

kwrooijen09:12:33

This would be something to include in the README of an open source project that provides CSS

borkdude09:12:34

@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

kwrooijen09:12:58

Yeah that’s also an option of course (I’ve seen projects mention this)

kwrooijen09:12:06

I just like making things easy for people haha

borkdude09:12:17

@kevin.van.rooijen You can do both I guess

gklijs09:12:49

You can just put the css on a cdn, that's pretty easy.

kwrooijen09:12:24

@gklijs That’s what we’re currently doing

kwrooijen09:12:31

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

kwrooijen09:12:51

But anyway, maybe I’m just thinking too much about this

kwrooijen09:12:59

Thanks a lot for the information, I really appreciate it

borkdude09:12:21

@kevin.van.rooijen There's nothing stopping you from both including it in the jar + publishing it to a CDN/repo

borkdude09:12:43

The first option is nice for people who are using a build tool to compile a single CSS file

kwrooijen09:12:27

Yeah that’s a good option

Mno12:12:33

Someone write a blog post about this so I can see a practical example 😄

borkdude12:12:08

@hobosarefriends what do you use for frontend at LT?

Mno12:12:51

I use nothing, because I stay in the backend almost exclusively, but my client has the frontend in... polymer (I think)

borkdude12:12:15

I think Play framework also uses webjars a lot, so there's probably examples in your companies codebase as well

borkdude12:12:42

At least, I've used it from Play once

borkdude12:12:51

and they had it in their docs

borkdude12:12:19

there is standard webjars support in yada

Mno12:12:22

Oooh that looks nice

Mno12:12:09

I still have so much to learn 😅

borkdude12:12:08

it's one of those thing you figure out in the early phases of an app and then never touch again

borkdude12:12:30

quite tedious really, Rails has an edge there 😛

Mno12:12:18

Rails is the reason I don't understand so many of these issues.. both a gift and curse.

Mno12:12:45

A sheltered life as it were.

borkdude12:12:57

Overprotected childhood

🧒 1
👶 2
🛤️ 1
💎 1