Clojurians Log v2

Is there a prescribed way for dealing with css embedded in an npm module, ala:

import '@trendmicro/react-sidenav/dist/react-sidenav.css';

https://github.com/trendmicro-frontend/react-sidenav

I tried doing something like this

(ns react-sidenav
  (:require [reagent.core :as r]
            ["@trendmicro/react-sidenav" :refer (Toggle Nav NavItem NavIcon NavText) :as lib]
            ["@trendmicro/react-sidenav/dist/react-sidenav.css"]))

but it doesnt like the .css, of course

Is it possible to target firefox extension with shadow? I see that there is :chrome-extension target and I’m wondering if the output also works in firefox since they both follow WebExtension standards.

@ghaskins css is not supported at this time. you can use webpack if you really need it or just anything else that can process css

@tugh yeah I think they work in firefox too but not sure

Thanks, will try and let everyone know.

Hello, is this related to Shadow-cljs? I see such html element for the first time. What is this?

@stebokas no it is not. this is shadow dom. usually associated with web components https://developer.mozilla.org/en-US/docs/Web/Web_Components

@thheller I have my CSS generated from the metadata found in my source code, it works. Now I have another problem (minor but annoying), the CSS is reloaded in the front end right after the hooks ^:dev/before-load and ^:dev/after-load are called, leading to a flash of unstyle page because the updated source code is using CSS classes which are defined in the CSS file which is not yet loaded in the front end. What can I try to do to get things in this order instead? 1. ^:dev/before-load called 2. Source code and CSS reloaded in the front end 3. ^:dev/after-load called

I just updated to the latest shadow-cljs and did a clean restart of everything. I can create an nrepl connection to the server just fine, but now when I execute (shadow.cljs.devtools.api/nrepl-select :dev) I get the error:

Execution error (ExceptionInfo) at shadow.cljs.devtools.server.nrepl-impl/repl-init (nrepl_impl.clj:28).
watch for build not running

@markbastian as the error is telling you the watch needs to be running. start only starts the server not the watch. you can either start the watch via the web UI at http://localhost:9630 or shadow-cljs watch <build-id>

@vincent.cantin :dev/before-load-async has control over when the next step happens

For this to work, the front end would need to know that the CSS is going to be reloaded, so that it will wait for it (in a finite time). I am not sure if it is possible. Alternatively, I was thinking that there could be a way to alter the build-state in the compilation hook where the CSS is generated to mark the generated file as “updated” and hope that it would be sent to the front end in the same batch as the source code. Is this possible?

Side note: my compilation hook only regenerates the CSS when it is needed, it does not happen on each source code change.

sorry I do not know what you are doing to give a proper answer

Inside a compile hook at the phase :compile-finish , I collect every meta on every Clojure var from any namespace compiled. Based on those informations, I generate some CSS content which I write into an output file, e.g. public/style/girouette.css, using spit. The file is not re-generated if its content is going to be the same. During a shadow-cljs watch :front-end, when the front end developer changes his source and save it on the hard disk, Shadow-CLJS detects a change and recompile the source code. My compilation hook is triggered and a CSS file’s content may be updated. In the browser, the source code is reloaded, front end hooks are called, and then afterward the new CSS (when it’s been regenerated) is reloaded in the browser. My problem is that the CSS is reloaded separately from the source code, I am looking for a way to make Shadow-CLJS update the CSS file in the browser at the same time the source code is updated.

that is not supported. css watching is entirely separate currently

Ah ok. Thanks for the answer.