This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
- # asami (7)
- # aws (2)
- # babashka (21)
- # beginners (602)
- # calva (8)
- # cider (11)
- # clj-kondo (10)
- # cljfx (1)
- # clojure (177)
- # clojure-europe (43)
- # clojure-nl (3)
- # clojure-taiwan (2)
- # clojure-uk (45)
- # clojurescript (31)
- # depstar (8)
- # figwheel-main (2)
- # fulcro (12)
- # hugsql (2)
- # java (1)
- # jobs (2)
- # meander (1)
- # missionary (1)
- # off-topic (67)
- # other-languages (1)
- # pathom (212)
- # polylith (4)
- # rdf (1)
- # re-frame (10)
- # reagent (12)
- # reitit (28)
- # reveal (3)
- # shadow-cljs (21)
- # spacemacs (7)
- # sql (5)
- # tools-deps (12)
- # vim (1)
Is there a prescribed way for dealing with css embedded in an npm module, ala:
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"]))
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
:chrome-extension target also works for firefox 🔥
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/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?
2. Source code and CSS reloaded in the front end
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:
I can see a shadow-cljs - server starting ....................................................................... ready! message in my console and everything else seems right. Any ideas as to what could be going wrong?
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>
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.
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.
spit. The file is not re-generated if its content is going to be the same.
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.