fix(sasjs-tests): construct stylesheets

sasjs-tests/src/components/LoginForm.ts

@@ -1,11 +1,18 @@
 import { appContext } from '../core/AppContext'
+import styles from './LoginForm.css?inline'
 
 export class LoginForm extends HTMLElement {
+  private static styleSheet = new CSSStyleSheet()
   private shadow: ShadowRoot
 
+  static {
+    this.styleSheet.replaceSync(styles)
+  }
+
   constructor() {
     super()
     this.shadow = this.attachShadow({ mode: 'open' })
+    this.shadow.adoptedStyleSheets = [LoginForm.styleSheet]
   }
 
   connectedCallback() {
@@ -15,10 +22,6 @@ export class LoginForm extends HTMLElement {
 
   render() {
     this.shadow.innerHTML = `
-      <link rel="stylesheet" href="${new URL(
-        './LoginForm.css',
-        import.meta.url
-      )}">
       <h1>SASjs Tests</h1>
       <form id="login-form">
         <label for="username">Username</label>

sasjs-tests/src/components/RequestsModal.ts

@@ -1,13 +1,20 @@
-import { appContext } from '../core/AppContext'
 import type { SASjsRequest } from '@sasjs/adapter'
+import { appContext } from '../core/AppContext'
+import styles from './RequestsModal.css?inline'
 
 export class RequestsModal extends HTMLElement {
+  private static styleSheet = new CSSStyleSheet()
   private shadow: ShadowRoot
   private dialog: HTMLDialogElement | null = null
 
+  static {
+    this.styleSheet.replaceSync(styles)
+  }
+
   constructor() {
     super()
     this.shadow = this.attachShadow({ mode: 'open' })
+    this.shadow.adoptedStyleSheets = [RequestsModal.styleSheet]
   }
 
   connectedCallback() {
@@ -17,10 +24,6 @@ export class RequestsModal extends HTMLElement {
 
   render() {
     this.shadow.innerHTML = `
-      <link rel="stylesheet" href="${new URL(
-        './RequestsModal.css',
-        import.meta.url
-      )}">
       <dialog id="requests-dialog">
         <div class="modal-header">
           <h2 id="modal-title"></h2>

sasjs-tests/src/components/TestCard.ts

@@ -1,10 +1,16 @@
-import type { TestStatus } from '../types'
 import type { CompletedTest } from '../core/TestRunner'
+import type { TestStatus } from '../types'
+import styles from './TestCard.css?inline'
 
 export class TestCard extends HTMLElement {
+  private static styleSheet = new CSSStyleSheet()
   private shadow: ShadowRoot
   private _testData: CompletedTest | null = null
 
+  static {
+    this.styleSheet.replaceSync(styles)
+  }
+
   static get observedAttributes() {
     return ['status', 'execution-time']
   }
@@ -12,6 +18,7 @@ export class TestCard extends HTMLElement {
   constructor() {
     super()
     this.shadow = this.attachShadow({ mode: 'open' })
+    this.shadow.adoptedStyleSheets = [TestCard.styleSheet]
   }
 
   connectedCallback() {
@@ -44,10 +51,6 @@ export class TestCard extends HTMLElement {
     const statusIcon = this.getStatusIcon(status)
 
     this.shadow.innerHTML = `
-      <link rel="stylesheet" href="${new URL(
-        './TestCard.css',
-        import.meta.url
-      )}">
       <div class="header">
         <span class="status-icon ${status}">${statusIcon}</span>
         <h3>${test.title}</h3>

sasjs-tests/src/components/TestSuite.ts

@@ -1,14 +1,21 @@
 import type { CompletedTestSuite } from '../core/TestRunner'
 import { TestCard } from './TestCard'
+import styles from './TestSuite.css?inline'
 
 export class TestSuiteElement extends HTMLElement {
+  private static styleSheet = new CSSStyleSheet()
   private shadow: ShadowRoot
   private _suiteData: CompletedTestSuite | null = null
   private _suiteIndex: number = 0
 
+  static {
+    this.styleSheet.replaceSync(styles)
+  }
+
   constructor() {
     super()
     this.shadow = this.attachShadow({ mode: 'open' })
+    this.shadow.adoptedStyleSheets = [TestSuiteElement.styleSheet]
   }
 
   connectedCallback() {
@@ -75,10 +82,6 @@ export class TestSuiteElement extends HTMLElement {
     const running = completedTests.filter((t) => t.status === 'running').length
 
     this.shadow.innerHTML = `
-      <link rel="stylesheet" href="${new URL(
-        './TestSuite.css',
-        import.meta.url
-      )}">
       <div class="header">
         <h2>${name}</h2>
         <div class="stats">Passed: ${passed} | Failed: ${failed} | Running: ${running}</div>

sasjs-tests/src/components/TestsView.ts

@@ -1,17 +1,24 @@
+import { appContext } from '../core/AppContext'
 import { TestRunner, type CompletedTestSuite } from '../core/TestRunner'
 import type { TestSuite } from '../types'
-import { appContext } from '../core/AppContext'
 import { TestSuiteElement } from './TestSuite'
+import styles from './TestsView.css?inline'
 
 export class TestsView extends HTMLElement {
+  private static styleSheet = new CSSStyleSheet()
   private shadow: ShadowRoot
   private testRunner: TestRunner | null = null
   private _testSuites: TestSuite[] = []
   private debugMode: boolean = false
 
+  static {
+    this.styleSheet.replaceSync(styles)
+  }
+
   constructor() {
     super()
     this.shadow = this.attachShadow({ mode: 'open' })
+    this.shadow.adoptedStyleSheets = [TestsView.styleSheet]
   }
 
   connectedCallback() {
@@ -30,10 +37,6 @@ export class TestsView extends HTMLElement {
 
   render() {
     this.shadow.innerHTML = `
-      <link rel="stylesheet" href="${new URL(
-        './TestsView.css',
-        import.meta.url
-      )}">
       <div class="header">
         <h1>SASjs Adapter Tests</h1>
         <div class="header-controls">