feat: move modal css to an independent file

libs/plugins-runtime/src/index.ts

@@ -1,5 +1,5 @@
 import 'ses';
-import './lib/plugin-modal';
+import './lib/modal/plugin-modal';
 
 import { ɵloadPlugin, setContext } from './lib/load-plugin.js';
 import * as api from './lib/api/index.js';

libs/plugins-runtime/src/lib/api/index.ts

@@ -17,7 +17,7 @@ import { Manifest, Permissions } from '../models/manifest.model.js';
 import { OpenUIOptions } from '../models/open-ui-options.model.js';
 import openUIApi from './openUI.api.js';
 import { z } from 'zod';
-import type { PluginModalElement } from '../plugin-modal.js';
+import type { PluginModalElement } from '../modal/plugin-modal.js';
 
 type Callback<T> = (message: T) => void;
 

libs/plugins-runtime/src/lib/create-modal.ts

@@ -1,6 +1,6 @@
 import type { OpenUIOptions } from './models/open-ui-options.model.js';
 import type { PenpotTheme } from '@penpot/plugin-types';
-import type { PluginModalElement } from './plugin-modal.js';
+import type { PluginModalElement } from './modal/plugin-modal.js';
 
 export function createModal(
   name: string,

libs/plugins-runtime/src/lib/modal/plugin-modal.ts

@@ -2,7 +2,8 @@ const closeSvg = `
 <svg width="16"  height="16"xmlns="http://www.w3.org/2000/svg" fill="none"><g class="fills"><rect rx="0" ry="0" width="16" height="16" class="frame-background"/></g><g class="frame-children"><path d="M11.997 3.997 8 8l-3.997 4.003m-.006-8L8 8l4.003 3.997" class="fills"/><g class="strokes"><path d="M11.997 3.997 8 8l-3.997 4.003m-.006-8L8 8l4.003 3.997" style="fill: none; stroke-width: 1; stroke: rgb(143, 157, 163); stroke-opacity: 1; stroke-linecap: round;" class="stroke-shape"/></g></g></svg>`;
 
 import type { PenpotTheme } from '@penpot/plugin-types';
-import { dragHandler } from './drag-handler.js';
+import { dragHandler } from '../drag-handler.js';
+import modalCss from './plugin.modal.css?inline';
 
 export class PluginModalElement extends HTMLElement {
   constructor() {
@@ -39,6 +40,9 @@ export class PluginModalElement extends HTMLElement {
 
     this.#wrapper = document.createElement('div');
     this.#wrapper.classList.add('wrapper');
+    this.#wrapper.style.inlineSize = `${width}px`;
+    this.#wrapper.style.blockSize = `${height}px`;
+
     this.#dragEvents = dragHandler(this.#wrapper);
 
     const header = document.createElement('div');
@@ -93,78 +97,7 @@ export class PluginModalElement extends HTMLElement {
     this.#wrapper.appendChild(iframe);
 
     const style = document.createElement('style');
-    style.textContent = `
+    style.textContent = modalCss;
-        :host {
-          --spacing-4: 0.25rem;
-          --spacing-8: calc(var(--spacing-4) * 2);
-          --spacing-12: calc(var(--spacing-4) * 3);
-          --spacing-16: calc(var(--spacing-4) * 4);
-          --spacing-20: calc(var(--spacing-4) * 5);
-          --spacing-24: calc(var(--spacing-4) * 6);
-          --spacing-28: calc(var(--spacing-4) * 7);
-          --spacing-32: calc(var(--spacing-4) * 8);
-          --spacing-36: calc(var(--spacing-4) * 9);
-          --spacing-40: calc(var(--spacing-4) * 10);
-
-          --font-weight-regular: 400;
-          --font-weight-bold: 500;
-          --font-line-height-s: 1.2;
-          --font-line-height-m: 1.4;
-          --font-line-height-l: 1.5;
-          --font-size-s: 12px;
-          --font-size-m: 14px;
-          --font-size-l: 16px;
-        }
-
-        [data-theme] {
-          background-color: var(--color-background-primary);
-          color: var(--color-foreground-secondary);
-        }
-
-        .wrapper {
-          display: flex;
-          flex-direction: column;
-          position: fixed;
-          inset-block-end: 10px;
-          inset-inline-start: 10px;
-          z-index: 1000;
-          padding: 25px;
-          border-radius: 15px;
-          box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
-          inline-size: ${width}px;
-          block-size: ${height}px;
-        }
-
-        .header {
-          align-items: center;
-          display: flex;
-          justify-content: space-between;
-          border-block-end: 2px solid var(--color-background-quaternary);
-          padding-block-end: var(--spacing-4);
-          margin-block-end: var(--spacing-20);
-        }
-
-        button {
-          background: transparent;
-          border: 0;
-          cursor: pointer;
-          padding: 0;
-        }
-
-        h1 {
-          font-size: var(--font-size-s);
-          font-weight: var(--font-weight-bold);
-          margin: 0;
-          margin-inline-end: var(--spacing-4);
-          user-select: none;
-        }
-
-        iframe {
-          border: none;
-          inline-size: 100%;
-          block-size: 100%;
-        }
-    `;
 
     this.shadowRoot.appendChild(style);
   }

libs/plugins-runtime/src/lib/modal/plugin.modal.css

@@ -0,0 +1,68 @@
+:host {
+  --spacing-4: 0.25rem;
+  --spacing-8: calc(var(--spacing-4) * 2);
+  --spacing-12: calc(var(--spacing-4) * 3);
+  --spacing-16: calc(var(--spacing-4) * 4);
+  --spacing-20: calc(var(--spacing-4) * 5);
+  --spacing-24: calc(var(--spacing-4) * 6);
+  --spacing-28: calc(var(--spacing-4) * 7);
+  --spacing-32: calc(var(--spacing-4) * 8);
+  --spacing-36: calc(var(--spacing-4) * 9);
+  --spacing-40: calc(var(--spacing-4) * 10);
+
+  --font-weight-regular: 400;
+  --font-weight-bold: 500;
+  --font-line-height-s: 1.2;
+  --font-line-height-m: 1.4;
+  --font-line-height-l: 1.5;
+  --font-size-s: 12px;
+  --font-size-m: 14px;
+  --font-size-l: 16px;
+}
+
+[data-theme] {
+  background-color: var(--color-background-primary);
+  color: var(--color-foreground-secondary);
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  inset-block-end: 10px;
+  inset-inline-start: 10px;
+  z-index: 1000;
+  padding: 25px;
+  border-radius: 15px;
+  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
+}
+
+.header {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  border-block-end: 2px solid var(--color-background-quaternary);
+  padding-block-end: var(--spacing-4);
+  margin-block-end: var(--spacing-20);
+}
+
+button {
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  padding: 0;
+}
+
+h1 {
+  font-size: var(--font-size-s);
+  font-weight: var(--font-weight-bold);
+  margin: 0;
+  margin-inline-end: var(--spacing-4);
+  user-select: none;
+}
+
+iframe {
+  border: none;
+  inline-size: 100%;
+  block-size: 100%;
+}