Move style inside component

home-assistant · Sep 25, 2023 · d2851ac · d2851ac
1 parent cec3cbb
commit d2851ac
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 44 deletions.
diff --git a/src/auth/ha-auth-flow.ts b/src/auth/ha-auth-flow.ts
@@ -1,3 +1,4 @@
+/* eslint-disable lit/prefer-static-styles */
 import "@material/mwc-button";
 import { genClientId } from "home-assistant-js-websocket";
 import { CSSResultGroup, html, LitElement, nothing, PropertyValues } from "lit";
@@ -74,7 +75,19 @@ export class HaAuthFlow extends LitElement {
   }
 
   protected render() {
-    return html` <form>${this._renderForm()}</form> `;
+    return html`
+      <style>
+        ha-auth-flow .action {
+          margin: 24px 0 8px;
+          text-align: center;
+        }
+        ha-auth-flow .store-token {
+          margin-top: 10px;
+          margin-left: -16px;
+        }
+      </style>
+      <form>${this._renderForm()}</form>
+    `;
   }
 
   protected firstUpdated(changedProps: PropertyValues) {
@@ -379,7 +392,7 @@ export class HaAuthFlow extends LitElement {
   }
 
   static get styles(): CSSResultGroup {
-    // No shadow dom, styles should be in authorize.html.template
+    // No shadow dom, styles should be in <style> tag inside render
     return [];
   }
 }

diff --git a/src/auth/ha-auth-form.ts b/src/auth/ha-auth-form.ts
@@ -1,4 +1,5 @@
-import { CSSResultGroup } from "lit";
+/* eslint-disable lit/prefer-static-styles */
+import { CSSResultGroup, html } from "lit";
 import { customElement } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { HaForm } from "../components/ha-form/ha-form";
@@ -33,8 +34,25 @@ export class HaAuthForm extends HaForm {
     return this;
   }
 
+  protected render() {
+    return html`
+      <style>
+        ha-auth-form .root > * {
+          display: block;
+        }
+        ha-auth-form .root > *:not([own-margin]):not(:last-child) {
+          margin-bottom: 24px;
+        }
+        ha-auth-form ha-alert[own-margin] {
+          margin-bottom: 4px;
+        }
+      </style>
+      ${super.render()}
+    `;
+  }
+
   static get styles(): CSSResultGroup {
-    // No shadow dom, styles should be in authorize.html.template
+    // No shadow dom, styles should be in <style> tag inside render
     return [];
   }
 }

diff --git a/src/auth/ha-authorize.ts b/src/auth/ha-authorize.ts
@@ -1,3 +1,4 @@
+/* eslint-disable lit/prefer-static-styles */
 import { CSSResultGroup, html, LitElement, nothing, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import punycode from "punycode";
@@ -54,13 +55,27 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
 
   protected render() {
     if (this._error) {
-      return html`<ha-alert alert-type="error"
-        >${this._error} ${this.redirectUri}</ha-alert
-      >`;
+      return html`
+        <style>
+          ha-authorize ha-alert {
+            display: block;
+            margin: 16px 0;
+          }
+        </style>
+        <ha-alert alert-type="error"
+          >${this._error} ${this.redirectUri}</ha-alert
+        >
+      `;
     }
 
     if (!this._authProviders) {
       return html`
+        <style>
+          ha-authorize p {
+            font-size: 14px;
+            line-height: 20px;
+          }
+        </style>
         <p>${this.localize("ui.panel.page-authorize.initializing")}</p>
       `;
     }
@@ -72,6 +87,25 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
     const app = this.clientId && this.clientId in appNames;
 
     return html`
+      <style>
+        ha-authorize ha-pick-auth-provider {
+          display: block;
+          margin-top: 48px;
+        }
+        ha-authorize ha-auth-flow {
+          display: block;
+          margin-top: 24px;
+        }
+        ha-authorize ha-alert {
+          display: block;
+          margin: 16px 0;
+        }
+        ha-authorize p {
+          font-size: 14px;
+          line-height: 20px;
+        }
+      </style>
+
       ${!this._ownInstance
         ? html`<ha-alert .alertType=${app ? "info" : "warning"}>
             ${app
@@ -216,7 +250,7 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
   }
 
   static get styles(): CSSResultGroup {
-    // No shadow dom, styles should be in authorize.html.template
+    // No shadow dom, styles should be in <style> tag inside render
     return [];
   }
 }
diff --git a/src/html/authorize.html.template b/src/html/authorize.html.template
@@ -28,42 +28,6 @@
           color: #e1e1e1;
         }
       }
-
-      ha-auth-flow .action {
-        margin: 24px 0 8px;
-        text-align: center;
-      }
-      ha-auth-flow .store-token {
-        margin-top: 10px;
-        margin-left: -16px;
-      }
-
-      ha-auth-form .root > * {
-        display: block;
-      }
-      ha-auth-form .root > *:not([own-margin]):not(:last-child) {
-        margin-bottom: 24px;
-      }
-      ha-auth-form ha-alert[own-margin] {
-        margin-bottom: 4px;
-      }
-
-      ha-authorize ha-pick-auth-provider {
-        display: block;
-        margin-top: 48px;
-      }
-      ha-authorize ha-auth-flow {
-        display: block;
-        margin-top: 24px;
-      }
-      ha-authorize ha-alert {
-        display: block;
-        margin: 16px 0;
-      }
-      ha-authorize p {
-        font-size: 14px;
-        line-height: 20px;
-      }
     </style>
   </head>
   <body>