refactor: extract message styles into reusable CSS literal (#8242)

vaadin · Nov 29, 2024 · c63be0f · c63be0f
1 parent 0430bb1
commit c63be0f
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 38 deletions.
diff --git a/packages/message-list/src/vaadin-message-styles.d.ts b/packages/message-list/src/vaadin-message-styles.d.ts
@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2024 Vaadin Ltd..
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export const messageStyles: CSSResult;
diff --git a/packages/message-list/src/vaadin-message-styles.js b/packages/message-list/src/vaadin-message-styles.js
@@ -0,0 +1,43 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from 'lit';
+
+export const messageStyles = css`
+  :host {
+    display: flex;
+    flex-direction: row;
+    outline: none;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  [part='content'] {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+  }
+
+  [part='header'] {
+    align-items: baseline;
+    display: flex;
+    flex-flow: row wrap;
+  }
+
+  [part='name'] {
+    font-weight: 500;
+  }
+
+  [part='message'] {
+    white-space: pre-wrap;
+  }
+
+  ::slotted([slot='avatar']) {
+    --vaadin-avatar-outline-width: 0;
+    flex-shrink: 0;
+  }
+`;
diff --git a/packages/message-list/src/vaadin-message.js b/packages/message-list/src/vaadin-message.js
@@ -7,8 +7,11 @@ import '@vaadin/avatar/src/vaadin-avatar.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { MessageMixin } from './vaadin-message-mixin.js';
+import { messageStyles } from './vaadin-message-styles.js';
+
+registerStyles('vaadin-message', messageStyles, { moduleId: 'vaadin-message-styles' });
 
 /**
  * `<vaadin-message>` is a Web Component for showing a single message with an author, message and time.
@@ -48,43 +51,6 @@ import { MessageMixin } from './vaadin-message-mixin.js';
 class Message extends MessageMixin(ElementMixin(ThemableMixin(PolymerElement))) {
   static get template() {
     return html`
-      <style>
-        :host {
-          display: flex;
-          flex-direction: row;
-          outline: none;
-        }
-
-        :host([hidden]) {
-          display: none !important;
-        }
-
-        [part='content'] {
-          display: flex;
-          flex-direction: column;
-          flex-grow: 1;
-        }
-
-        [part='header'] {
-          align-items: baseline;
-          display: flex;
-          flex-direction: row;
-          flex-wrap: wrap;
-        }
-
-        [part='name'] {
-          font-weight: 500;
-        }
-
-        [part='message'] {
-          white-space: pre-wrap;
-        }
-
-        ::slotted([slot='avatar']) {
-          --vaadin-avatar-outline-width: 0px;
-          flex-shrink: 0;
-        }
-      </style>
       <slot name="avatar"></slot>
       <div part="content">
         <div part="header">