How to use goog.style/installSafeStyleSheet in Clojure, with garden.

core.cljs

(ns ^:figwheel-hooks dynamic-css.core
  (:require
    [goog.dom :as gdom]
    [goog.style :as gstyle]
    [reagent.core :as r]
    [reagent.dom :as rdom]
    [garden.core :refer [css]])
  (:import [goog.html SafeStyleSheet]
           [goog.string Const]))

(defonce db (r/atom {}))

(defn random-uuid-str []
  (->> (random-uuid)
       (str)))

(defonce class {:container (random-uuid-str)
                :stuff     (random-uuid-str)})

(defn install-styles! []
  (gstyle/installSafeStyleSheet
    (SafeStyleSheet/fromConstant
      (Const/from
        (css [(->> (:container class)
                   (str ".")
                   (keyword)) {:color 'red}
              [:&:hover {:color 'blue}]])))))

(defn app []
  [:h1 {:class (:container class)} 'hey])

(defn mount []
  (do
    (swap! db assoc :styles (install-styles!))
    (rdom/render [app] (gdom/getElement "app"))))

(defonce init (mount))

(defn ^:before-load before-reload []
  (gstyle/uninstallStyles (:styles @db)))

(defn ^:after-load reload []
  (mount))

This installs and removes the style block as Figwheel reloads. The uuid was my first try for some "scope".

Sometimes this doesn't work and I believe it is because installSafeStyleSheet can be loading the css after reagent's render, causing the styles to not be applied.