Minify ha-style/Roboto and load asynchronously (#18226)

cast/src/launcher/entrypoint.ts

@@ -1,4 +1,4 @@
 import "../../../src/resources/safari-14-attachshadow-patch";
-import "../../../src/resources/ha-style";
-import "../../../src/resources/roboto";
 import "./layout/hc-connect";
+
+import("../../../src/resources/ha-style");

cast/src/receiver/layout/hc-main.ts

@@ -100,7 +100,9 @@ export class HcMain extends HassElement {
 
   protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
-    import("../second-load");
+    import("./hc-lovelace");
+    import("../../../../src/resources/ha-style");
+
     window.addEventListener("location-changed", () => {
       const panelPath = `/${this._urlPath || "lovelace"}/`;
       if (location.pathname.startsWith(panelPath)) {

cast/src/receiver/second-load.ts

@@ -1,3 +0,0 @@
-import "../../../src/resources/ha-style";
-import "../../../src/resources/roboto";
-import "./layout/hc-lovelace";

demo/src/entrypoint.ts

@@ -1,4 +1,4 @@
-import "../../src/resources/ha-style";
-import "../../src/resources/roboto";
 import "../../src/resources/safari-14-attachshadow-patch";
 import "./ha-demo";
+
+import("../../src/resources/ha-style");

gallery/src/entrypoint.js

@@ -1,5 +1,5 @@
-import "../../src/resources/ha-style";
-import "../../src/resources/roboto";
 import "./ha-gallery";
 
+import("../../src/resources/ha-style");
+
 document.body.appendChild(document.createElement("ha-gallery"));

hassio/src/entrypoint.ts

@@ -1,15 +1,15 @@
 // Compat needs to be first import
 import "../../src/resources/compatibility";
 import { setCancelSyntheticClickEvents } from "@polymer/polymer/lib/utils/settings";
-import "../../src/resources/roboto";
-import "../../src/resources/ha-style";
 import "../../src/resources/safari-14-attachshadow-patch";
 import "./hassio-main";
 
+import("../../src/resources/ha-style");
+
 setCancelSyntheticClickEvents(false);
 
 const styleEl = document.createElement("style");
-styleEl.innerHTML = `
+styleEl.textContent = `
 body {
   font-family: Roboto, sans-serif;
   -moz-osx-font-smoothing: grayscale;

src/entrypoints/app.ts

@@ -4,8 +4,8 @@ import {
 } from "@polymer/polymer/lib/utils/settings";
 import "@webcomponents/scoped-custom-element-registry/scoped-custom-element-registry.min";
 import "../layouts/home-assistant";
-import "../resources/ha-style";
+
-import "../resources/roboto";
+import("../resources/ha-style");
 
 setPassiveTouchGestures(true);
 setCancelSyntheticClickEvents(false);

src/entrypoints/authorize.ts

@@ -2,9 +2,9 @@
 import "../resources/compatibility";
 import { setCancelSyntheticClickEvents } from "@polymer/polymer/lib/utils/settings";
 import "../auth/ha-authorize";
-import "../resources/ha-style";
-import "../resources/roboto";
 import "../resources/safari-14-attachshadow-patch";
 import "../resources/array.flat.polyfill";
 
+import("../resources/ha-style");
+
 setCancelSyntheticClickEvents(false);

src/entrypoints/onboarding.ts

@@ -2,11 +2,11 @@
 import "../resources/compatibility";
 import { setCancelSyntheticClickEvents } from "@polymer/polymer/lib/utils/settings";
 import "../onboarding/ha-onboarding";
-import "../resources/ha-style";
-import "../resources/roboto";
 import "../resources/safari-14-attachshadow-patch";
 import "../resources/array.flat.polyfill";
 
+import("../resources/ha-style");
+
 setCancelSyntheticClickEvents(false);
 
 declare global {

src/onboarding/particles.ts

@@ -1,6 +1,6 @@
 import { tsParticles } from "tsparticles-engine";
 import { loadLinksPreset } from "tsparticles-preset-links";
-import { DEFAULT_PRIMARY_COLOR } from "../resources/ha-style";
+import { DEFAULT_PRIMARY_COLOR } from "../resources/styles-data";
 
 loadLinksPreset(tsParticles).then(() => {
   tsParticles.load("particles", {

src/panels/config/hardware/ha-config-hardware.ts

@@ -35,7 +35,7 @@ import { showOptionsFlowDialog } from "../../../dialogs/config-flow/show-dialog-
 import { showRestartDialog } from "../../../dialogs/restart/show-dialog-restart";
 import "../../../layouts/hass-subpage";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
-import { DEFAULT_PRIMARY_COLOR } from "../../../resources/ha-style";
+import { DEFAULT_PRIMARY_COLOR } from "../../../resources/styles-data";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
 import { hardwareBrandsUrl } from "../../../util/brands-url";

src/panels/profile/ha-pick-theme-row.ts

@@ -19,7 +19,7 @@ import "../../components/ha-textfield";
 import {
   DEFAULT_ACCENT_COLOR,
   DEFAULT_PRIMARY_COLOR,
-} from "../../resources/ha-style";
+} from "../../resources/styles-data";
 import { HomeAssistant } from "../../types";
 import { documentationUrl } from "../../util/documentation-url";
 

src/resources/ha-style.ts

@@ -1,14 +1,12 @@
-import "@polymer/polymer/lib/elements/custom-style";
+import { css, unsafeCSS } from "lit";
-import { derivedStyles } from "./styles-data";
+import { fontStyles } from "./roboto";
+import {
+  DEFAULT_ACCENT_COLOR,
+  DEFAULT_PRIMARY_COLOR,
+  derivedStyles,
+} from "./styles-data";
 
-export const DEFAULT_PRIMARY_COLOR = "#03a9f4";
+const mainStyles = css`
-export const DEFAULT_ACCENT_COLOR = "#ff9800";
-
-const documentContainer = document.createElement("template");
-documentContainer.setAttribute("style", "display: none;");
-
-documentContainer.innerHTML = `<custom-style>
-  <style>
   /*
     Home Assistant default styles.
 
@@ -28,12 +26,12 @@ documentContainer.innerHTML = `<custom-style>
     --disabled-text-color: #bdbdbd;
 
     /* main interface colors */
-      --primary-color: ${DEFAULT_PRIMARY_COLOR};
+    --primary-color: ${unsafeCSS(DEFAULT_PRIMARY_COLOR)};
     --dark-primary-color: #0288d1;
-      --light-primary-color: #b3e5fC;
+    --light-primary-color: #b3e5fc;
-      --accent-color: ${DEFAULT_ACCENT_COLOR};
+    --accent-color: ${unsafeCSS(DEFAULT_ACCENT_COLOR)};
-      --divider-color: rgba(0, 0, 0, .12);
+    --divider-color: rgba(0, 0, 0, 0.12);
-      --outline-color: rgba(0, 0, 0, .12);
+    --outline-color: rgba(0, 0, 0, 0.12);
 
     --scrollbar-thumb-color: rgb(194, 194, 194);
 
@@ -70,7 +68,7 @@ documentContainer.innerHTML = `<custom-style>
     --energy-non-fossil-color: #0f9d58;
     --energy-battery-out-color: #4db6ac;
     --energy-battery-in-color: #f06292;
-      --energy-gas-color: #8E021B;
+    --energy-gas-color: #8e021b;
     --energy-water-color: #00bcd4;
 
     /* opacity for dark text on a light background */
@@ -83,7 +81,7 @@ documentContainer.innerHTML = `<custom-style>
     --light-divider-opacity: 0.12;
     --light-disabled-opacity: 0.3; /* or hint text or icon */
     --light-secondary-opacity: 0.7;
-      --light-primary-opacity: 1.0;
+    --light-primary-opacity: 1;
 
     /* rgb */
     --rgb-primary-color: 3, 169, 244;
@@ -222,61 +220,69 @@ documentContainer.innerHTML = `<custom-style>
     /* from http://codepen.io/shyndman/pen/c5394ddf2e8b2a5c9185904b57421cdb */
 
     --shadow-elevation-2dp: {
-        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
+      box-shadow:
+        0 2px 2px 0 rgba(0, 0, 0, 0.14),
         0 1px 5px 0 rgba(0, 0, 0, 0.12),
         0 3px 1px -2px rgba(0, 0, 0, 0.2);
     };
 
     --shadow-elevation-3dp: {
-        box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14),
+      box-shadow:
+        0 3px 4px 0 rgba(0, 0, 0, 0.14),
         0 1px 8px 0 rgba(0, 0, 0, 0.12),
         0 3px 3px -2px rgba(0, 0, 0, 0.4);
     };
 
     --shadow-elevation-4dp: {
-        box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
+      box-shadow:
+        0 4px 5px 0 rgba(0, 0, 0, 0.14),
         0 1px 10px 0 rgba(0, 0, 0, 0.12),
         0 2px 4px -1px rgba(0, 0, 0, 0.4);
     };
 
     --shadow-elevation-6dp: {
-        box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14),
+      box-shadow:
+        0 6px 10px 0 rgba(0, 0, 0, 0.14),
         0 1px 18px 0 rgba(0, 0, 0, 0.12),
         0 3px 5px -1px rgba(0, 0, 0, 0.4);
     };
 
     --shadow-elevation-8dp: {
-        box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14),
+      box-shadow:
+        0 8px 10px 1px rgba(0, 0, 0, 0.14),
         0 3px 14px 2px rgba(0, 0, 0, 0.12),
         0 5px 5px -3px rgba(0, 0, 0, 0.4);
     };
 
     --shadow-elevation-12dp: {
-        box-shadow: 0 12px 16px 1px rgba(0, 0, 0, 0.14),
+      box-shadow:
+        0 12px 16px 1px rgba(0, 0, 0, 0.14),
         0 4px 22px 3px rgba(0, 0, 0, 0.12),
         0 6px 7px -4px rgba(0, 0, 0, 0.4);
     };
 
     --shadow-elevation-16dp: {
-        box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14),
+      box-shadow:
+        0 16px 24px 2px rgba(0, 0, 0, 0.14),
         0 6px 30px 5px rgba(0, 0, 0, 0.12),
         0 8px 10px -5px rgba(0, 0, 0, 0.4);
     };
 
     --shadow-elevation-24dp: {
-        box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14),
+      box-shadow:
+        0 24px 38px 3px rgba(0, 0, 0, 0.14),
         0 9px 46px 8px rgba(0, 0, 0, 0.12),
         0 11px 15px -7px rgba(0, 0, 0, 0.4);
     };
 
     /* Paper typography Styles */
     --paper-font-common-base: {
-        font-family: 'Roboto', 'Noto', sans-serif;
+      font-family: "Roboto", "Noto", sans-serif;
       -webkit-font-smoothing: antialiased;
     };
 
     --paper-font-common-code: {
-        font-family: 'Roboto Mono', 'Consolas', 'Menlo', monospace;
+      font-family: "Roboto Mono", "Consolas", "Menlo", monospace;
       -webkit-font-smoothing: antialiased;
     };
 
@@ -298,7 +304,7 @@ documentContainer.innerHTML = `<custom-style>
 
       font-size: 112px;
       font-weight: 300;
-        letter-spacing: -.044em;
+      letter-spacing: -0.044em;
       line-height: 120px;
     };
 
@@ -308,7 +314,7 @@ documentContainer.innerHTML = `<custom-style>
 
       font-size: 56px;
       font-weight: 400;
-        letter-spacing: -.026em;
+      letter-spacing: -0.026em;
       line-height: 60px;
     };
 
@@ -317,7 +323,7 @@ documentContainer.innerHTML = `<custom-style>
 
       font-size: 45px;
       font-weight: 400;
-        letter-spacing: -.018em;
+      letter-spacing: -0.018em;
       line-height: 48px;
     };
 
@@ -326,7 +332,7 @@ documentContainer.innerHTML = `<custom-style>
 
       font-size: 34px;
       font-weight: 400;
-        letter-spacing: -.01em;
+      letter-spacing: -0.01em;
       line-height: 40px;
     };
 
@@ -335,7 +341,7 @@ documentContainer.innerHTML = `<custom-style>
 
       font-size: 24px;
       font-weight: 400;
-        letter-spacing: -.012em;
+      letter-spacing: -0.012em;
       line-height: 32px;
     };
 
@@ -423,11 +429,14 @@ documentContainer.innerHTML = `<custom-style>
     --float-start: left;
     --float-end: right;
 
-      ${Object.entries(derivedStyles)
+    ${unsafeCSS(
+      Object.entries(derivedStyles)
         .map(([key, value]) => `--${key}: ${value};`)
-        .join("")}
+        .join("")
+    )}
   }
-  </style>
+`.toString();
-</custom-style>`;
 
-document.head.appendChild(documentContainer.content);
+const styleElement = document.createElement("style");
+styleElement.textContent = [mainStyles, fontStyles].join("");
+document.head.append(styleElement);

src/resources/roboto.js

@@ -1,132 +0,0 @@
-export {}; // for Babel to treat as a module
-
-const documentContainer = document.createElement("template");
-documentContainer.setAttribute("style", "display: none;");
-
-documentContainer.innerHTML = `<style>
-@font-face {
-font-family: "Roboto";
-src:
-  local("Roboto Thin"),
-  local("Roboto-Thin"),
-  url(${__STATIC_PATH__}fonts/roboto/Roboto-Thin.woff2) format("woff2");
-font-weight: 100;
-font-style: normal;
-}
-@font-face {
-font-family: "Roboto";
-src:
-  local("Roboto Thin Italic"),
-  local("Roboto-ThinItalic"),
-  url(${__STATIC_PATH__}fonts/roboto/Roboto-ThinItalic.woff2) format("woff2");
-font-weight: 100;
-font-style: italic;
-}
-@font-face {
-font-family: "Roboto";
-src:
-  local("Roboto Light"),
-  local("Roboto-Light"),
-  url(${__STATIC_PATH__}fonts/roboto/Roboto-Light.woff2) format("woff2");
-font-weight: 300;
-font-style: normal;
-}
-@font-face {
-font-family: "Roboto";
-src:
-  local("Roboto Light Italic"),
-  local("Roboto-LightItalic"),
-  url(${__STATIC_PATH__}fonts/roboto/Roboto-LightItalic.woff2) format("woff2");
-font-weight: 300;
-font-style: italic;
-}
-@font-face {
-font-family: "Roboto";
-src:
-  local("Roboto Regular"),
-  local("Roboto-Regular"),
-  url(${__STATIC_PATH__}fonts/roboto/Roboto-Regular.woff2) format("woff2");
-font-weight: 400;
-font-style: normal;
-}
-@font-face {
-font-family: "Roboto";
-src:
-  local("Roboto Italic"),
-  local("Roboto-Italic"),
-  url(${__STATIC_PATH__}fonts/roboto/Roboto-RegularItalic.woff2) format("woff2");
-font-weight: 400;
-font-style: italic;
-}
-@font-face {
-font-family: "Roboto";
-src:
-  local("Roboto Medium"),
-  local("Roboto-Medium"),
-  url(${__STATIC_PATH__}fonts/roboto/Roboto-Medium.woff2) format("woff2");
-font-weight: 500;
-font-style: normal;
-}
-@font-face {
-font-family: "Roboto";
-src:
-  local("Roboto Medium Italic"),
-  local("Roboto-MediumItalic"),
-  url(${__STATIC_PATH__}fonts/roboto/Roboto-MediumItalic.woff2) format("woff2");
-font-weight: 500;
-font-style: italic;
-}
-@font-face {
-font-family: "Roboto";
-src:
-  local("Roboto Bold"),
-  local("Roboto-Bold"),
-  url(${__STATIC_PATH__}fonts/roboto/Roboto-Bold.woff2) format("woff2");
-font-weight: 700;
-font-style: normal;
-}
-@font-face {
-font-family: "Roboto";
-src:
-  local("Roboto Bold Italic"),
-  local("Roboto-BoldItalic"),
-  url(${__STATIC_PATH__}fonts/roboto/Roboto-BoldItalic.woff2) format("woff2");
-font-weight: 700;
-font-style: italic;
-}
-@font-face {
-font-family: "Roboto";
-src:
-  local("Roboto Black"),
-  local("Roboto-Black"),
-  url(${__STATIC_PATH__}fonts/roboto/Roboto-Black.woff2) format("woff2");
-font-weight: 900;
-font-style: normal;
-}
-@font-face {
-font-family: "Roboto";
-src:
-  local("Roboto Black Italic"),
-  local("Roboto-BlackItalic"),
-  url(${__STATIC_PATH__}fonts/roboto/Roboto-BlackItalic.woff2) format("woff2");
-font-weight: 900;
-font-style: italic;
-}
-</style>`;
-
-document.head.appendChild(documentContainer.content);
-
-/**
-@license
-Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-*/
-/*
-  FIXME(polymer-modulizer): the above comments were extracted
-  from HTML and may be out of place here. Review them and
-  then delete this comment!
-*/

src/resources/roboto.ts

@@ -0,0 +1,124 @@
+import { css, unsafeCSS } from "lit";
+
+export const fontStyles = css`
+  @font-face {
+    font-family: "Roboto";
+    src:
+      local("Roboto Thin"),
+      local("Roboto-Thin"),
+      url(${unsafeCSS(__STATIC_PATH__)}fonts/roboto/Roboto-Thin.woff2)
+        format("woff2");
+    font-weight: 100;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: "Roboto";
+    src:
+      local("Roboto Thin Italic"),
+      local("Roboto-ThinItalic"),
+      url(${unsafeCSS(__STATIC_PATH__)}fonts/roboto/Roboto-ThinItalic.woff2)
+        format("woff2");
+    font-weight: 100;
+    font-style: italic;
+  }
+  @font-face {
+    font-family: "Roboto";
+    src:
+      local("Roboto Light"),
+      local("Roboto-Light"),
+      url(${unsafeCSS(__STATIC_PATH__)}fonts/roboto/Roboto-Light.woff2)
+        format("woff2");
+    font-weight: 300;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: "Roboto";
+    src:
+      local("Roboto Light Italic"),
+      local("Roboto-LightItalic"),
+      url(${unsafeCSS(__STATIC_PATH__)}fonts/roboto/Roboto-LightItalic.woff2)
+        format("woff2");
+    font-weight: 300;
+    font-style: italic;
+  }
+  @font-face {
+    font-family: "Roboto";
+    src:
+      local("Roboto Regular"),
+      local("Roboto-Regular"),
+      url(${unsafeCSS(__STATIC_PATH__)}fonts/roboto/Roboto-Regular.woff2)
+        format("woff2");
+    font-weight: 400;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: "Roboto";
+    src:
+      local("Roboto Italic"),
+      local("Roboto-Italic"),
+      url(${unsafeCSS(__STATIC_PATH__)}fonts/roboto/Roboto-RegularItalic.woff2)
+        format("woff2");
+    font-weight: 400;
+    font-style: italic;
+  }
+  @font-face {
+    font-family: "Roboto";
+    src:
+      local("Roboto Medium"),
+      local("Roboto-Medium"),
+      url(${unsafeCSS(__STATIC_PATH__)}fonts/roboto/Roboto-Medium.woff2)
+        format("woff2");
+    font-weight: 500;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: "Roboto";
+    src:
+      local("Roboto Medium Italic"),
+      local("Roboto-MediumItalic"),
+      url(${unsafeCSS(__STATIC_PATH__)}fonts/roboto/Roboto-MediumItalic.woff2)
+        format("woff2");
+    font-weight: 500;
+    font-style: italic;
+  }
+  @font-face {
+    font-family: "Roboto";
+    src:
+      local("Roboto Bold"),
+      local("Roboto-Bold"),
+      url(${unsafeCSS(__STATIC_PATH__)}fonts/roboto/Roboto-Bold.woff2)
+        format("woff2");
+    font-weight: 700;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: "Roboto";
+    src:
+      local("Roboto Bold Italic"),
+      local("Roboto-BoldItalic"),
+      url(${unsafeCSS(__STATIC_PATH__)}fonts/roboto/Roboto-BoldItalic.woff2)
+        format("woff2");
+    font-weight: 700;
+    font-style: italic;
+  }
+  @font-face {
+    font-family: "Roboto";
+    src:
+      local("Roboto Black"),
+      local("Roboto-Black"),
+      url(${unsafeCSS(__STATIC_PATH__)}fonts/roboto/Roboto-Black.woff2)
+        format("woff2");
+    font-weight: 900;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: "Roboto";
+    src:
+      local("Roboto Black Italic"),
+      local("Roboto-BlackItalic"),
+      url(${unsafeCSS(__STATIC_PATH__)}fonts/roboto/Roboto-BlackItalic.woff2)
+        format("woff2");
+    font-weight: 900;
+    font-style: italic;
+  }
+`.toString();

src/resources/styles-data.ts

@@ -1,3 +1,6 @@
+export const DEFAULT_PRIMARY_COLOR = "#03a9f4" as const;
+export const DEFAULT_ACCENT_COLOR = "#ff9800" as const;
+
 export const darkStyles = {
   "primary-background-color": "#111111",
   "card-background-color": "#1c1c1c",
@@ -50,7 +53,7 @@ export const darkStyles = {
   "map-filter":
     "invert(.9) hue-rotate(170deg) brightness(1.5) contrast(1.2) saturate(.3)",
   "disabled-color": "#464646",
-};
+} as const;
 
 export const derivedStyles = {
   "state-icon-error-color": "var(--error-state-color, var(--error-color))",
@@ -146,4 +149,4 @@ export const derivedStyles = {
   "material-background-color": "var(--card-background-color)",
   "material-secondary-background-color": "var(--secondary-background-color)",
   "material-secondary-text-color": "var(--secondary-text-color)",
-};
+} as const;