Use static get styles to embed ha-style (#2479)

* Use static get styles

* Fix errors

src/panels/config/cloud/cloud-webhook-manage-dialog.ts

@@ -1,4 +1,10 @@
-import { html, LitElement, PropertyDeclarations } from "lit-element";
+import {
+  html,
+  LitElement,
+  PropertyDeclarations,
+  css,
+  CSSResult,
+} from "lit-element";
 
 import "@polymer/paper-button/paper-button";
 import "@polymer/paper-input/paper-input";
@@ -10,10 +16,9 @@ import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog";
 // tslint:disable-next-line
 import { PaperInputElement } from "@polymer/paper-input/paper-input";
 
-import { buttonLink } from "../../../resources/ha-style";
-
 import { HomeAssistant } from "../../../types";
 import { WebhookDialogParams } from "./types";
+import { haStyle } from "../../../resources/ha-style";
 
 const inputLabel = "Public URL – Click to copy to clipboard";
 
@@ -44,7 +49,6 @@ export class CloudWebhookManageDialog extends LitElement {
         ? "https://www.home-assistant.io/docs/automation/trigger/#webhook-trigger"
         : `https://www.home-assistant.io/components/${webhook.domain}/`;
     return html`
-      ${this._renderStyle()}
       <paper-dialog with-backdrop>
         <h2>Webhook for ${webhook.name}</h2>
         <div>
@@ -112,24 +116,25 @@ export class CloudWebhookManageDialog extends LitElement {
     this._paperInput.label = inputLabel;
   }
 
-  private _renderStyle() {
+  static get styles(): CSSResult[] {
-    return html`
+    return [
-      <style>
+      haStyle,
+      css`
         paper-dialog {
           width: 650px;
         }
         paper-input {
           margin-top: -8px;
         }
-        ${buttonLink} button.link {
+        button.link {
           color: var(--primary-color);
         }
         paper-button {
           color: var(--primary-color);
           font-weight: 500;
         }
-      </style>
+      `,
-    `;
+    ];
   }
 }
 

src/panels/lovelace/hui-editor.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, TemplateResult } from "lit-element";
+import { LitElement, html, TemplateResult, CSSResult, css } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
 import yaml from "js-yaml";
 
@@ -14,6 +14,7 @@ import { Lovelace } from "./types";
 import { hassLocalizeLitMixin } from "../../mixins/lit-localize-mixin";
 
 import "../../components/ha-icon";
+import { haStyle } from "../../resources/ha-style";
 
 const TAB_INSERT = "  ";
 
@@ -26,7 +27,6 @@ const lovelaceStruct = struct.interface({
 class LovelaceFullConfigEditor extends hassLocalizeLitMixin(LitElement) {
   public lovelace?: Lovelace;
   public closeEditor?: () => void;
-  private _haStyle?: DocumentFragment;
   private _saving?: boolean;
   private _changed?: boolean;
   private _hashAdded?: boolean;
@@ -44,7 +44,6 @@ class LovelaceFullConfigEditor extends hassLocalizeLitMixin(LitElement) {
 
   public render(): TemplateResult | void {
     return html`
-      ${this.renderStyle()}
       <app-header-layout>
         <app-header>
           <app-toolbar>
@@ -115,18 +114,10 @@ class LovelaceFullConfigEditor extends hassLocalizeLitMixin(LitElement) {
     });
   }
 
-  protected renderStyle() {
+  static get styles(): CSSResult[] {
-    if (!this._haStyle) {
+    return [
-      this._haStyle = document.importNode(
+      haStyle,
-        (document.getElementById("ha-style")!
+      css`
-          .children[0] as HTMLTemplateElement).content,
-        true
-      );
-    }
-
-    return html`
-      ${this._haStyle}
-      <style>
         app-header-layout {
           height: 100vh;
         }
@@ -168,8 +159,8 @@ class LovelaceFullConfigEditor extends hassLocalizeLitMixin(LitElement) {
         .saved {
           opacity: 1;
         }
-      </style>
+      `,
-    `;
+    ];
   }
 
   private _closeEditor() {

src/panels/lovelace/hui-root.ts

@@ -4,6 +4,8 @@ import {
   PropertyDeclarations,
   PropertyValues,
   TemplateResult,
+  CSSResult,
+  css,
 } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
 import "@polymer/app-layout/app-header-layout/app-header-layout";
@@ -45,6 +47,7 @@ import { showEditViewDialog } from "./editor/view-editor/show-edit-view-dialog";
 import { showEditLovelaceDialog } from "./editor/lovelace-editor/show-edit-lovelace-dialog";
 import { Lovelace } from "./types";
 import { afterNextRender } from "../../common/util/render-status";
+import { haStyle } from "../../resources/ha-style";
 
 // CSS and JS should only be imported once. Modules and HTML are safe.
 const CSS_CACHE = {};
@@ -63,7 +66,6 @@ class HUIRoot extends hassLocalizeLitMixin(LitElement) {
   private _curView?: number | "hass-unused-entities";
   private _notificationsOpen: boolean;
   private _persistentNotifications?: Notification[];
-  private _haStyle?: DocumentFragment;
   private _viewCache?: { [viewId: string]: HUIView };
 
   private _debouncedConfigChanged: () => void;
@@ -114,7 +116,6 @@ class HUIRoot extends hassLocalizeLitMixin(LitElement) {
 
   protected render(): TemplateResult | void {
     return html`
-    ${this.renderStyle()}
     <app-route .route="${this.route}" pattern="/:view" data="${
       this._routeData
     }" @data-changed="${this._routeDataChanged}"></app-route>
@@ -296,18 +297,10 @@ class HUIRoot extends hassLocalizeLitMixin(LitElement) {
     `;
   }
 
-  protected renderStyle(): TemplateResult {
+  static get styles(): CSSResult[] {
-    if (!this._haStyle) {
+    return [
-      this._haStyle = document.importNode(
+      haStyle,
-        (document.getElementById("ha-style")!
+      css`
-          .children[0] as HTMLTemplateElement).content,
-        true
-      );
-    }
-
-    return html`
-      ${this._haStyle}
-      <style include="ha-style">
         :host {
           -ms-user-select: none;
           -webkit-user-select: none;
@@ -373,8 +366,8 @@ class HUIRoot extends hassLocalizeLitMixin(LitElement) {
         paper-item {
           cursor: pointer;
         }
-      </style>
+      `,
-    `;
+    ];
   }
 
   protected updated(changedProperties: PropertyValues): void {

src/resources/ha-style.ts

@@ -1,7 +1,33 @@
 import "@polymer/paper-styles/paper-styles";
 import "@polymer/polymer/polymer-legacy";
+import { css } from "lit-element";
+
+export const haStyle = css`
+  :host {
+    @apply --paper-font-body1;
+  }
+
+  app-header-layout,
+  ha-app-layout {
+    background-color: var(--primary-background-color);
+  }
+
+  app-header,
+  app-toolbar {
+    background-color: var(--primary-color);
+    font-weight: 400;
+    color: var(--text-primary-color, white);
+  }
+
+  app-toolbar ha-menu-button + [main-title],
+  app-toolbar paper-icon-button + [main-title] {
+    margin-left: 24px;
+  }
+
+  h1 {
+    @apply --paper-font-title;
+  }
 
-export const buttonLink = `
   button.link {
     background: none;
     color: inherit;
@@ -12,6 +38,74 @@ export const buttonLink = `
     text-decoration: underline;
     cursor: pointer;
   }
+
+  .card-actions a {
+    text-decoration: none;
+  }
+
+  .card-actions paper-button:not([disabled]),
+  .card-actions ha-progress-button:not([disabled]),
+  .card-actions ha-call-api-button:not([disabled]),
+  .card-actions ha-call-service-button:not([disabled]) {
+    color: var(--primary-color);
+    font-weight: 500;
+  }
+
+  .card-actions paper-button.warning:not([disabled]),
+  .card-actions ha-call-api-button.warning:not([disabled]),
+  .card-actions ha-call-service-button.warning:not([disabled]) {
+    color: var(--google-red-500);
+  }
+
+  .card-actions paper-button[primary] {
+    background-color: var(--primary-color);
+    color: var(--text-primary-color);
+  }
+`;
+
+export const haStyleDialog = css`
+  :host {
+    --ha-dialog-narrow: {
+      margin: 0;
+      width: 100% !important;
+      max-height: calc(100% - 64px);
+
+      position: fixed !important;
+      bottom: 0px;
+      left: 0px;
+      right: 0px;
+      overflow: scroll;
+      border-bottom-left-radius: 0px;
+      border-bottom-right-radius: 0px;
+    }
+
+    --ha-dialog-fullscreen: {
+      width: 100% !important;
+      border-radius: 0px;
+      position: fixed !important;
+      margin: 0;
+    }
+  }
+
+  /* prevent clipping of positioned elements */
+  paper-dialog-scrollable {
+    --paper-dialog-scrollable: {
+      -webkit-overflow-scrolling: auto;
+    }
+  }
+
+  /* force smooth scrolling for iOS 10 */
+  paper-dialog-scrollable.can-scroll {
+    --paper-dialog-scrollable: {
+      -webkit-overflow-scrolling: touch;
+    }
+  }
+
+  @media all and (max-width: 450px), all and (max-height: 500px) {
+    paper-dialog {
+      @apply (--ha-dialog-narrow);
+    }
+  }
 `;
 
 const documentContainer = document.createElement("template");
@@ -152,101 +246,13 @@ documentContainer.innerHTML = `<custom-style>
 </custom-style><dom-module id="ha-style">
   <template>
     <style>
-      :host {
+    ${haStyle.cssText}
-        @apply --paper-font-body1;
-      }
-
-      app-header-layout, ha-app-layout {
-        background-color: var(--primary-background-color);
-      }
-
-      app-header, app-toolbar {
-        background-color: var(--primary-color);
-        font-weight: 400;
-        color: var(--text-primary-color, white);
-      }
-
-      app-toolbar ha-menu-button + [main-title],
-      app-toolbar paper-icon-button + [main-title] {
-        margin-left: 24px;
-      }
-
-      h1 {
-        @apply --paper-font-title;
-      }
-
-      ${buttonLink}
-
-      .card-actions a {
-        text-decoration: none;
-      }
-
-      .card-actions paper-button:not([disabled]),
-      .card-actions ha-progress-button:not([disabled]),
-      .card-actions ha-call-api-button:not([disabled]),
-      .card-actions ha-call-service-button:not([disabled]) {
-        color: var(--primary-color);
-        font-weight: 500;
-      }
-
-      .card-actions paper-button.warning:not([disabled]),
-      .card-actions ha-call-api-button.warning:not([disabled]),
-      .card-actions ha-call-service-button.warning:not([disabled]) {
-        color: var(--google-red-500);
-      }
-
-      .card-actions paper-button[primary] {
-        background-color: var(--primary-color);
-        color: var(--text-primary-color);
-      }
-
     </style>
   </template>
 </dom-module><dom-module id="ha-style-dialog">
   <template>
     <style>
-      :host {
+      ${haStyleDialog.cssText}
-        --ha-dialog-narrow: {
-          margin: 0;
-          width: 100% !important;
-          max-height: calc(100% - 64px);
-
-          position: fixed !important;
-          bottom: 0px;
-          left: 0px;
-          right: 0px;
-          overflow: scroll;
-          border-bottom-left-radius: 0px;
-          border-bottom-right-radius: 0px;
-        }
-
-        --ha-dialog-fullscreen: {
-          width: 100% !important;
-          border-radius: 0px;
-          position: fixed !important;
-          margin: 0;
-        }
-      }
-
-      /* prevent clipping of positioned elements */
-      paper-dialog-scrollable {
-        --paper-dialog-scrollable: {
-          -webkit-overflow-scrolling: auto;
-        }
-      }
-
-      /* force smooth scrolling for iOS 10 */
-      paper-dialog-scrollable.can-scroll {
-        --paper-dialog-scrollable: {
-          -webkit-overflow-scrolling: touch;
-        }
-      }
-
-      @media all and (max-width: 450px), all and (max-height: 500px) {
-        paper-dialog {
-          @apply(--ha-dialog-narrow);
-        }
-      }
     </style>
   </template>
 </dom-module>`;