fix: also add style sheet in shadow dom context

cds-astro · Aug 29, 2024 · 695f3f9 · 695f3f9
1 parent fcefe89
commit 695f3f9
Showing 1 changed file with 39 additions and 1 deletion.
diff --git a/vite.config.ts b/vite.config.ts
@@ -38,7 +38,45 @@ export default defineConfig({
         glsl({
             compress: true,
         }),
-        cssInjectedByJsPlugin(),
+        // make sure that the CSS is also included in ShadowDOMs. 
+        // Extracted from https://github.com/marco-prontera/vite-plugin-css-injected-by-js/issues/128
+        cssInjectedByJsPlugin({
+            styleId: "aladin-css",
+            injectCodeFunction: async function injectCodeCustomRunTimeFunction(cssCode) {
+                function getAladinDiv(divName: string): Promise<Element | null> {
+                    return new Promise((resolve) => {
+                      if (document.querySelector(divName)) {
+                        return resolve(document.querySelector(divName));
+                      }
+                      const observer = new MutationObserver(() => {
+                        if (document.querySelector(divName)) {
+                          observer.disconnect();
+                          resolve(document.querySelector(divName));
+                        }
+                      });
+
+                      observer.observe(document.body, {
+                        childList: true,
+                        subtree: true,
+                      });
+                    });
+                  }
+
+
+                try {
+                    if (typeof document != 'undefined') {
+                        let elementStyle = document.createElement('style');
+                        elementStyle.id = "aladin-css";
+                        elementStyle.appendChild(document.createTextNode(cssCode));
+                        document.head.appendChild(elementStyle);
+                        let aladinDiv = await getAladinDiv("aladin-container")
+                        aladinDiv?.shadowRoot?.appendChild(elementStyle);
+                    }
+                } catch (e) {
+                    console.error('vite-plugin-css-injected-by-js', e);
+                }
+            }
+        }),
     ],
     resolve: {
         alias: [