remove inject css vite plugin to manually insert the content of aladi…

…n.css in js inside the aladin lite div container
cds-astro · Sep 12, 2024 · cbfe278 · cbfe278
1 parent 914f296
commit cbfe278
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 44 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,7 @@
 * [test] Add support of playwright. Instructions in the readme for running the test matching snapshots [PR #176]
 * [fixed] Order of overlays in the stack now matches the addMOC/addCatalog/addOverlay calls ordering
 * [doc] Expose the API of Coo class
+* [fix] Insert aladin css inside the aladin lite so that it should be compliant with the use of shadow DOMs [cds-astro/ipyaladin#113], [marimo-team/marimo#2106]
 
 ## 3.5.0-beta
 

diff --git a/examples/al-in-shadow-dom.html b/examples/al-in-shadow-dom.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html>
+    <head>
+    </head>
+<body>
+
+<div class="shadow-host"></div>
+
+<script type="text/javascript" src="./../dist/aladin.umd.cjs" charset="utf-8"></script>
+<script type="text/javascript">
+const shadowEl = document.querySelector(".shadow-host");
+const shadow = shadowEl.attachShadow({mode: 'open'});
+
+let aladinLiteEl = document.createElement('div');
+aladinLiteEl.id = "aladin-lite-div"
+aladinLiteEl.style = "width: 768px; height: 512px";
+shadow.appendChild(aladinLiteEl)
+console.log(aladinLiteEl.getRootNode() instanceof ShadowRoot)
+    A.init.then(() => {
+        let aladin = A.aladin(
+            aladinLiteEl,
+            {
+                survey: 'P/allWISE/color', // set initial image survey
+                projection: 'AIT', // set a projection
+                fov: 1.5, // initial field of view in degrees
+                target: 'orion', // initial target
+            }
+        );
+
+        //aladin.removeHiPSFromFavorites('CDS/P/allWISE/color')
+    });
+</script>
+<style>
+    .aladin-cat-browser-box {
+        width: 600px;
+    }
+</style>
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -51,7 +51,6 @@
     "@playwright/test": "^1.47.0",
     "jsdoc": "^4.0.2",
     "vite": "^4.3.8",
-    "vite-plugin-css-injected-by-js": "^3.1.1",
     "vite-plugin-glsl": "^1.1.2",
     "vite-plugin-top-level-await": "^1.4.1",
     "vite-plugin-wasm": "^3.2.2",

diff --git a/src/js/A.js b/src/js/A.js
@@ -51,8 +51,7 @@ import { Sesame } from "./Sesame.js";
 import init, * as module from './../core/pkg';
 
 // Import aladin css inside the project
-import './../css/aladin.css';
-
+import aladinCSS from './../css/aladin.css?inline';
 
 ///////////////////////////////
 /////// Aladin Lite API ///////
@@ -97,6 +96,13 @@ A.aladin = function (divSelector, options) {
     } else {
         divElement = divSelector;
     }
+
+    // Associate the CSS inside the div
+    var cssStyleSheet = document.createElement('style')
+    cssStyleSheet.classList.add("aladin-css");
+    cssStyleSheet.innerHTML = aladinCSS;
+    divElement.appendChild(cssStyleSheet)
+
     return new Aladin(divElement, options);
 };
 

diff --git a/src/js/gui/Box/StackBox.js b/src/js/gui/Box/StackBox.js
@@ -768,7 +768,7 @@ export class OverlayStackBox extends Box {
         );
         layout = layout.concat(this._createSurveysList());
 
-        return Layout.vertical({ layout, classList: ["content"] });
+        return Layout.vertical({ layout });
     }
 
     _createOverlaysList() {

diff --git a/vite.config.ts b/vite.config.ts
@@ -10,7 +10,7 @@ import wasmPack from 'vite-plugin-wasm-pack';
 // To include and minify glsl into the bundle
 import glsl from 'vite-plugin-glsl';
 // To include css into the bundle
-import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
+//import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
 
 export default defineConfig({
     build: {
@@ -38,45 +38,6 @@ export default defineConfig({
         glsl({
             compress: true,
         }),
-        // 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: [