CSS with shadow-grove

Questions & Help How to?
, ,
1

In various shadow-grove apps, I see that the css function is being used. Say, here.

I’m wondering… is the CSS part of shadow-grove still in its infancy, or can I use it? If I can use it, then I’ve been having trouble getting it to work. I think the big problem (I think) is that somewhere in the hot-reload process (not to mention the release), an actual CSS file has to be generated.

When I look at the shadow-cljs project on GitHub, in the shadow-cljs.edn I find something strange and undocumented (at least I haven’t found any docs about it): I find this:

:css
 {:paths
  ["src/main"
   "src/dev"]

  :outputs
  {"src/ui-release/shadow/cljs/ui/dist/main.css"
   {:entries
    [shadow.cljs.ui.main
     shadow.cljs.devtools.server.web]}}}

Could the above be part of the puzzle? …I suppose my question is, anyone who has figured this out, any clues you can give me would be very much appreciated.

2

The css function comes from shadow-css, which shadow-grove depends on I guess.

It is optional though and currently requires setting up a somewhat manual build progress as described in the above README.

The bit on :css config in shadow-cljs.edn is from a very early attempt at trying to integrate shadow-css with shadow-cljs. This doesn’t actually do anything yet, and may never do. I wasn’t happy with that approach and generally like having more control over stuff.

The current setup shadow-cljs uses to build the CSS for the UI is here for development in the REPL

and here for the “release” build, run via lein run -m build/css-release.

3

Forgive my lateness of reply, but I am combing through the shadow-cljs manual to find how I can put a css-compilation that works with dev hot-reload.

(In my mind: I’d love to use shadow-css, but I can’t figure out how to make it “easy.”)

4

The setup described in the README or the shadow-cljs example have all that, it works just fine with CSS reload. That is the easiest it’ll currently get. I think it is fairly easy, if a bit manual.

To expand a little bit on the CSS reload. The described shadow-css build functions just generate a regular .css file. shadow-cljs will use its built-in CSS reload to reload that, like any other .css file. There is not other special treatment needed, it all just works.

5

Update: Never mind! I found that I had the code:

(ns app.views
  {:shadow.css/include ["public/main.css"]}
  (:require
    [shadow.grove :as sg :refer (<< defc css)]))

At the start of one of my files: that :shadow.css/include… I don’t remember why I put it there, but when I remove it, the css generation just works.

My previous message:

I wonder if you could help off the top of your head with a strange issue. There is a bit of code here that looks like this:

          #?@(:clj
              [(doseq [inc classpath-includes]
                 (emitln sw (slurp (io/resource inc))))])

…where if I comment out (emitln sw (slurp (io/resource inc))), css-generation works (as per the README on the shadow-cljs project. But if I don’t comment out that form, I get the following error when I run my shadow-cljs run repl/start:
IllegalArgumentException: Cannot open <nil> as a Reader. (amongst many more lines).

In my case the inc in the above line, as I’ve debugged it, is “public/main.css”. I’m trying to understand what this bit of code is doing, particularly because I have no “main.css”. I have seen that (io/resource inc) when inc has the value just mentioned is nil, but why io/resource (ie clojure.java.io/resource) returns nil, I haven’t been able to find out.

6

io/resource looks up files on the classpath, not the regular filesystem.

If you don’t need it you don’t need to set it. It is entirely optional, and only meant to include some regular CSS into the output if needed.

1 Like
7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.