From c63be0f5baad51ccf722a4c6052a358163be9dff Mon Sep 17 00:00:00 2001
From: Serhii Kulykov <iamkulykov@gmail.com>
Date: Fri, 29 Nov 2024 12:47:09 +0200
Subject: [PATCH] refactor: extract message styles into reusable CSS literal
 (#8242)

---
 .../src/vaadin-message-styles.d.ts            |  8 ++++
 .../message-list/src/vaadin-message-styles.js | 43 +++++++++++++++++++
 packages/message-list/src/vaadin-message.js   | 42 ++----------------
 3 files changed, 55 insertions(+), 38 deletions(-)
 create mode 100644 packages/message-list/src/vaadin-message-styles.d.ts
 create mode 100644 packages/message-list/src/vaadin-message-styles.js

diff --git a/packages/message-list/src/vaadin-message-styles.d.ts b/packages/message-list/src/vaadin-message-styles.d.ts
new file mode 100644
index 0000000000..9906065d4b
--- /dev/null
+++ 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
new file mode 100644
index 0000000000..95791a8511
--- /dev/null
+++ 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
index d935b383c3..28573d8a5b 100644
--- 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">