Experiments on having tailwindcss in the shadow DOM

ssciwr · Sep 19, 2024 · e45946d · e45946d
1 parent d9885d6
commit e45946d
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 10 deletions.
diff --git 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()
   ]
 };
diff --git 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,12 +22,30 @@
   $: 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 }
   <Waiting>
     Accessing the EasyDB instance...
   </Waiting>
 {:else}
-  <DetailViewImpl mask={mask}/>
+  <div bind:this={component}>
+    <DetailViewImpl mask={mask}/>
+  </div>
 {/if}