From 20f145ed610b76f7c21d8e247aaf3084d76d6df8 Mon Sep 17 00:00:00 2001
From: Josh Willox <39120423+jcwillox@users.noreply.github.com>
Date: Fri, 19 Feb 2021 21:44:18 +1100
Subject: [PATCH] Fix method used to apply styles

---
 src/modules/generic-card.js       | 13 +++++++------
 src/modules/generic-entity-row.js | 22 +++++++++++++++-------
 src/styles.js                     |  4 +---
 3 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/src/modules/generic-card.js b/src/modules/generic-card.js
index 132ad624..b109e430 100644
--- a/src/modules/generic-card.js
+++ b/src/modules/generic-card.js
@@ -1,5 +1,5 @@
 import { extensionEnabled, findConfig, moduleEnabled } from "../utils";
-import { applyTheme } from "../styles";
+import { applyTheme, mapStyle } from "../styles";
 import { NO_CARD_STYLE } from "../const";
 import { hass } from "card-tools/src/hass";
 import { createModule } from "../module";
@@ -14,17 +14,18 @@ if (moduleEnabled(MODULE)) {
 
     // ha-card elements have default transition that we need to temporarily disable.
     this.style.transition = "none";
+    this.style.cssText = "";
 
-    if (config.no_card === true && extensionEnabled(config, "no_card")) {
-      Object.assign(this.style, NO_CARD_STYLE);
+    if (config.canary_theme && extensionEnabled(config, "canary_theme")) {
+      applyTheme(this, hass().themes, config.canary_theme);
     }
 
     if (config.canary_style && extensionEnabled(config, "canary_style")) {
-      Object.assign(this.style, config.canary_style);
+      this.style.cssText += mapStyle(config.canary_style);
     }
 
-    if (config.canary_theme && extensionEnabled(config, "canary_theme")) {
-      applyTheme(this, hass().themes, config.canary_theme);
+    if (config.no_card === true && extensionEnabled(config, "no_card")) {
+      Object.assign(this.style, NO_CARD_STYLE);
     }
 
     // flush css.
diff --git a/src/modules/generic-entity-row.js b/src/modules/generic-entity-row.js
index 2d7c6be7..e9c9ff99 100644
--- a/src/modules/generic-entity-row.js
+++ b/src/modules/generic-entity-row.js
@@ -4,7 +4,7 @@ import { hasTemplate } from "card-tools/src/templates";
 import { hass, provideHass } from "card-tools/src/hass";
 import { extensionEnabled, moduleEnabled } from "../utils";
 import { createModule } from "../module";
-import { applyTheme } from "../styles";
+import { applyTheme, mapStyle } from "../styles";
 
 const MODULE = "generic-entity-row";
 const ELEMENT = "hui-generic-entity-row";
@@ -44,12 +44,7 @@ if (moduleEnabled(MODULE)) {
       }
     }
 
-    if (
-      this.config.canary_style &&
-      extensionEnabled(this.config, "canary_style")
-    ) {
-      Object.assign(this.style, this.config.canary_style);
-    }
+    this.style.cssText = "";
 
     if (
       this.config.canary_theme &&
@@ -57,5 +52,18 @@ if (moduleEnabled(MODULE)) {
     ) {
       applyTheme(this, hass().themes, this.config.canary_theme);
     }
+
+    if (
+      this.config.canary_style &&
+      extensionEnabled(this.config, "canary_style")
+    ) {
+      if (typeof this.config.canary_style === "string") {
+        let styleEl = document.createElement("style");
+        styleEl.innerHTML = this.config.canary_style;
+        this.appendChild(styleEl);
+      } else {
+        this.style.cssText += mapStyle(this.config.canary_style);
+      }
+    }
   });
 }
diff --git a/src/styles.js b/src/styles.js
index 464b3c69..eb2ac904 100644
--- a/src/styles.js
+++ b/src/styles.js
@@ -14,8 +14,6 @@ export function coerceObject(data = {}) {
 
 export function applyTheme(element, themes, localTheme) {
   if (localTheme in themes.themes) {
-    for (const [key, value] of Object.entries(themes.themes[localTheme])) {
-      element.style.setProperty("--" + key, value);
-    }
+    element.style.cssText = mapStyle(themes.themes[localTheme], "--");
   }
 }