Fork me on GitHub
#clojurescript
<
2020-03-25
>
rberger05:03:37

Any suggestions on how to use a CSS framework like Bootstrap or Bulma in a Chromex chrome extension so that I can use that injected CSS for my code on the content-script page but not have the original content-script page get modified by the injected CSS?

Kevin07:03:20

I think you're asking for something, where you create styling but it won't leak to other pages?

Kevin07:03:06

If I understand correctly, then maybe Tailwind would be an option? You can build almost everything with just adding CSS classes to your elements, without writing custom CSS

rberger23:03:17

@UG9U7TPDZ I want to be able to lets say inject bootstrap.css or bulma.css into the page via the chrome extension but not have the original page get disrupted by the new css that might have some classes with the same name as it was using already. But then have my code/html use the new css classes. In most software you could have a namespace to separate them, but it seems CSS is just global. So some easy way to add prefixes to bootstrap.css or bulma.css. There is Sass modules but I’m wondering if t here is an easier way where I don’t have to go thru a huge learning curve about Sass and Bootstrap/Bulma build tooling and in depth CSS.

frozar10:03:42

Hi there, I began my journey around the macro feature of Clojure(Script). I realised that the built-in resolve function have different behavior between Clojure and ClojureScript. This function is available respectively in clojure.core and cljs.core namespace. Here a tiny study case which shows a difference:

(def simple-var 42)
(resolve 'simple-var)
(symbol "simple-var")
(resolve (symbol "simple-var"))
Under a Clojure repl (shadow-cljs clj-repl):
shadow.user=> (def simple-var 42)
#'shadow.user/simple-var
shadow.user=> (resolve 'simple-var)
#'shadow.user/simple-var
shadow.user=> (symbol "simple-var")
simple-var
shadow.user=> (resolve (symbol "simple-var"))
#'shadow.user/simple-var
I get the good behavior. Under a ClojureScript repl (shadow-cljs node-repl):
cljs.user=> (def simple-var 42)
#'cljs.user/simple-var
cljs.user=> (resolve 'simple-var)
#'cljs.user/simple-var
cljs.user=> (symbol "simple-var")
simple-var
cljs.user=> (resolve (symbol "simple-var"))
------ REPL Error while processing ---------------------------------------------

(resolve (symbol "simple-var"))
Encountered error when macroexpanding cljs.core/resolve.
AssertionError: Assert failed: Argument to resolve must be a quoted symbol
(core/and (seq? quoted-sym) (= (quote quote) (first quoted-sym)))
	cljs.core/resolve (core.cljc:3388)
	cljs.core/resolve (core.cljc:3385)
	clojure.core/apply (core.clj:669)
I get an error. I really would like to find a way to make the ClojureScript resolve work with a "stringify" symbol. Does anyone have a hint how I can achieve that? Should I post this message elsewhere??

thheller10:03:46

@fabien.rozar resolve is only available in macros and cannot be used dynamically in CLJS

frozar10:03:23

In fact I was using it in a macro in a .clj file but when I tried to retrieve it in my ClojureScript project, I discover this difference that breaks everything 🙃

frozar10:03:35

The fact is that resolve doesn't recognise (symbol "simple-var") as a symbol. The assertion message requieres that the resolve arg have to begin with a quote...

thheller10:03:43

if you are in a macro you likely want cljs.analyzer/resolve-var. cljs.core/resolve is mostly for self-hosted purposes

thheller10:03:59

that is because resolve is a macro

frozar10:03:13

Oooh, nice, I'll try that

frozar10:03:32

thank you 🙂

sova-soars-the-sora17:03:09

is there an open source web forum solution for CLJS?

frozar19:03:09

@thheller Hi, after a pretty long try/error process, I finally got what I want from my macro, and this is thanks to your advice, so thank you. It's my first ClojureScript macro and I'm pretty proud of it :) Just for the sharing (which will eventually goes in the Slack void), here is my macro:

(ns bubble.macro
  (:require [cljs.analyzer :as cljs]))

(defmacro BANG
  "Take a func-name as input and generate the banged function associated.
  Should be used in bubble.state namespace only.

  For example:
  (bubble.macro/BANG update-bubble)
  => (defn update-bubble! [bubble-id hashmap]
       (swap! appstate #(update-bubble % bubble-id hashmap)))
  "
  [func-name]
  (let [
        func-name-banged
        (symbol (str func-name "!"))

        arglists-but-first
        (-> (cljs/resolve-var &env func-name) :meta :arglists second first rest)
        ]
    `(defn ~func-name-banged [~@arglists-but-first]
       (swap! bubble.state/appstate update #(~func-name % ~@arglists-but-first))))
  )