empathyco · davidglezz · May 14, 2025 · Feb 26, 2026 · May 14, 2025 · Feb 26, 2026
@@ -1,11 +1,5 @@
 export const rollupCssInjectorConfig = {
-  replace: {
-    // Replace X CSS injector by our custom one.
-    'export default injectCss':
-      'export default (css) => window.xCSSInjector.addStyle({ source: css });',
-    delimiters: ['', ''],
-  },
   styles: {
-    mode: ['inject', (varname: string) => `window.xCSSInjector.addStyle({ source: ${varname} });`],
+    mode: ['inject', (varname: string) => `(window.xCSSInjector ??= []).push(${varname});`],
   },
 }
@@ -0,0 +1,17 @@
+/**
+ * This plugin add a custom block to Vue SFC files that injects the css styles using the global xCSSInjector.
+ */
+export function viteCssInjectorPlugin() {
+  return {
+    name: 'css-injector-plugin',
+    //enforce: 'pre',
+    transform(code: string, id: string) {
+      if (!id.endsWith('.vue') || !code.includes('</style>')) return
+      return `${code}
+        <x-inject-css type="text/javascript" lang="js">
+          export default component => Promise.resolve(component).then(comp => (window.xCSSInjector ??= []).push(...comp.styles));
+        </x-inject-css>
+      `
+    },
+  }
+}
@@ -1,6 +1,4 @@
 export * from './build/rollup/rollup.config'
 export * from './build/webpack/webpack.config'
-export * from './css-injector/css-injector'
-export * from './css-injector/css-injector.types'
 export * from './i18n/i18n.plugin'
 export * from './i18n/i18n.types'
@@ -81,13 +81,7 @@ export const rollupConfig: RollupOptions = {
     }) as Plugin,
     styles({
       minimize: true,
-      mode: [
-        'inject',
-        varname => {
-          const pathInjector = path.resolve('./tools/inject-css.js')
-          return `import injectCss from '${pathInjector}';injectCss(${varname});`
-        },
-      ],
+      mode: ['inject', varname => `(window.xCSSInjector ??= []).push(${varname});`],
     }),
     vueDocs,
     generateEntryFiles({ buildPath, jsOutputDir, typesOutputDir }),

@@ -15,7 +15,6 @@
     />
   </head>
   <body dir="ltr">
-    <div id="app"></div>
     <!-- built files will be auto injected -->
     <script type="module" src="./src/main.ts"></script>
   </body>

@@ -116,6 +116,7 @@
     "ts-node": "10.9.2",
     "typescript": "5.9.3",
     "vite": "6.4.1",
+    "vite-plugin-css-injected-by-js": "4.0.1",
     "vite-plugin-vue-inspector": "5.3.2",
     "vue": "3.5.28",
     "vue-docgen-cli": "4.79.0",

@@ -16,6 +16,7 @@ import {
   watch,
   watchEffect,
 } from 'vue'
+import { cssInjector } from '../utils/css-injector/css-injector'
 
 export default defineComponent({
   name: 'BaseTeleport',
@@ -71,7 +72,7 @@ export default defineComponent({
 
     onUnmounted(() => {
       if (isIsolated && teleportHost.value) {
-        ;(window as any).xCSSInjector.removeHost(teleportHost.value.shadowRoot)
+        cssInjector.removeHost(teleportHost.value.shadowRoot!)
       }
     })
 
@@ -158,7 +159,7 @@ export default defineComponent({
       isIsolated = instance?.appContext.app._container instanceof ShadowRoot
       if (isIsolated) {
         teleportHost.value.attachShadow({ mode: 'open' })
-        ;(window as any).xCSSInjector.addHost(teleportHost.value.shadowRoot)
+        cssInjector.addHost(teleportHost.value.shadowRoot!)
       }
     }
 

@@ -1,8 +1,13 @@
+/* eslint-disable perfectionist/sort-imports */
+// It must be the first, it setups the global cssInjector used by the styles injection system
+import './utils/css-injector/css-injector'
+import type { SnippetConfig } from './x-installer'
+
 import type { App } from 'vue'
-// eslint-disable-next-line import/no-named-default
-import { default as AppComponent } from './App.vue'
+import AppComponent from './App.vue'
 import { setupDevtools } from './plugins/devtools/devtools.plugin'
 import router from './router'
+import { createXRoot } from './utils/create-x-root'
 import { baseInstallXOptions, baseSnippetConfig } from './views/base-config'
 import { XInstaller } from './x-installer/x-installer/x-installer'
 import { FilterEntityFactory } from './x-modules/facets/entities/filter-entity.factory'
@@ -24,21 +29,19 @@ FilterEntityFactory.instance.registerModifierByFilterModelName(
   SingleSelectModifier as any,
 )
 
+const snippetConfig = retrieveSnippetConfig()
+
 const installer = new XInstaller({
   ...baseInstallXOptions,
   rootComponent: AppComponent,
-  domElement: '#app',
+  domElement: createXRoot(snippetConfig),
   onCreateApp: initDevtools,
   installExtraPlugins({ app }) {
     app.use(router)
   },
 })
 
-if (window.initX) {
-  void installer.init()
-} else {
-  void installer.init(baseSnippetConfig)
-}
+void installer.init(snippetConfig)
 
 /**
  * If an app is provided, initialise the devtools.
@@ -51,5 +54,17 @@ function initDevtools(app: App): void {
     setupDevtools(app)
   }
 }
+/**
+ * Tries to retrieve the snippet config from the window.initX function or object.
+ */
+function retrieveSnippetConfig(): SnippetConfig {
+  if (typeof window.initX === 'function') {
+    return window.initX()
+  }
+  if (typeof window.initX === 'object') {
+    return window.initX
+  }
+  return baseSnippetConfig
+}
 
 /* eslint-enable ts/no-unsafe-argument */