From e45946d7af2f7450dc41ffb5ae5ab00d6c32b986 Mon Sep 17 00:00:00 2001
From: Dominic Kempf <dominic.kempf@iwr.uni-heidelberg.de>
Date: Thu, 19 Sep 2024 18:23:38 +0200
Subject: [PATCH] Experiments on having tailwindcss in the shadow DOM

---
 rollup.config.js                       | 22 +++++++++++++---------
 src/components/EasyDBDetailView.svelte | 21 ++++++++++++++++++++-
 2 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/rollup.config.js b/rollup.config.js
index 8131e2b..b086afd 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -24,18 +24,22 @@ export default {
         customElement: true
       }
     }),
-    replace({
-      values: {
-        "this.attachShadow({ mode: 'open' });": ""
-      },
-      delimiters: ['', '']
-    }),
-    postcss(),
+    // replace({
+    //   values: {
+    //     "this.attachShadow({ mode: 'open' });": ""
+    //   },
+    //   delimiters: ['', '']
+    // }),
+    postcss(
+      {
+        extract: 'bundle.css'
+      }
+    ),
     resolve({
       browser: true,
       dedupe: ['svelte', 'flowbite-svelte']
     }),
-    commonjs(),
-    terser()
+    commonjs()//,
+    // terser()
   ]
 };
\ No newline at end of file
diff --git a/src/components/EasyDBDetailView.svelte b/src/components/EasyDBDetailView.svelte
index 62527fc..076a5b5 100644
--- a/src/components/EasyDBDetailView.svelte
+++ b/src/components/EasyDBDetailView.svelte
@@ -1,6 +1,7 @@
 <svelte:options customElement='easydb-detail-view' />
 
 <script>
+    import { onMount } from 'svelte';
   import '../app.pcss';
 
   import { pregen_instance } from "../lib/easydbPregen";
@@ -21,6 +22,22 @@
   $: easydbInstanceStore.set(easydbInstance);
   $: userGivenMasksToRenderStore.set(masksToRender)
   $: uuidStore.set([uuid]);
+
+  let component;
+
+  onMount(() => {
+    fetch('bundle.css')
+      .then(response => response.text())
+      .then(css => {
+        // Create a <style> tag and append it to the shadow DOM
+        let styleSheet = document.createElement('style');
+        styleSheet.textContent = css;
+        // Attach to shadow root
+        if (component.shadowRoot) {
+          component.shadowRoot.appendChild(styleSheet);
+        }
+      });
+  });
 </script>
 
 {#if !$easydbInstanceDataStore }
@@ -28,5 +45,7 @@
     Accessing the EasyDB instance...
   </Waiting>
 {:else}
-  <DetailViewImpl mask={mask}/>
+  <div bind:this={component}>
+    <DetailViewImpl mask={mask}/>
+  </div>
 {/if}
\ No newline at end of file