Fix method used to apply styles

jcwillox · Feb 19, 2021 · 20f145e · 20f145e
1 parent 36b2856
commit 20f145e
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 16 deletions.
diff --git 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
@@ -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,18 +44,26 @@ 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 &&
       extensionEnabled(this.config, "canary_theme")
     ) {
       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
@@ -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], "--");
   }
 }