From 1271e5f0ac0cf2c1cbf492e10f0b7e8f4e0200e0 Mon Sep 17 00:00:00 2001 From: Matthieu Baumann Date: Thu, 12 Sep 2024 16:53:06 +0200 Subject: [PATCH] remove inject css vite plugin to manually insert the content of aladin.css in js inside the aladin lite div container --- CHANGELOG.md | 1 + examples/al-in-shadow-dom.html | 39 ++++++++++++++++++++++++++++++++ package.json | 1 - src/js/A.js | 10 +++++++-- src/js/gui/Box/StackBox.js | 2 +- vite.config.ts | 41 +--------------------------------- 6 files changed, 50 insertions(+), 44 deletions(-) create mode 100644 examples/al-in-shadow-dom.html diff --git a/CHANGELOG.md b/CHANGELOG.md index f14e4f54..b54475c5 100644 --- 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 new file mode 100644 index 00000000..5b53bf20 --- /dev/null +++ b/examples/al-in-shadow-dom.html @@ -0,0 +1,39 @@ + + + + + + +
+ + + + + + \ No newline at end of file diff --git a/package.json b/package.json index 8e60be58..e7ca0a1d 100644 --- 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 index 5bfb5b9a..57a17ab8 100644 --- 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 index e35a2b4e..12a5a654 100644 --- 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 index 65da88aa..9a19e43b 100644 --- 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 { - 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: [