build(css-injector): add vite-plugin-css-injected-by-js for CSS injection

Signed-off-by: davidglezz <davidg@empathy.co>

Author: davidglezz

packages/x-components/package.json

@@ -129,6 +129,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",

packages/x-components/src/views/base-config.ts

@@ -7,6 +7,7 @@ export const baseSnippetConfig: SnippetConfig = {
   lang: 'en',
   env: 'staging',
   scope: 'x-components-development',
+  // isolate: false,
 }
 
 // eslint-disable-next-line ts/no-unsafe-assignment

packages/x-components/vite.config.ts

@@ -3,6 +3,7 @@ import vue from '@vitejs/plugin-vue'
 import { defineConfig } from 'vite'
 import Inspector from 'vite-plugin-vue-inspector'
 import { viteCssInjectorPlugin } from '../x-archetype-utils/src/build/vite/css-injector-plugin'
+import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
 
 export const vueDocsPlugin = {
   name: 'vue-docs',
@@ -23,7 +24,13 @@ export default defineConfig({
       },
     }),
     vueDocsPlugin,
-    Inspector(),
+    cssInjectedByJsPlugin({
+      enableDev: true,
+      removeStyleCodeFunction(id: string) {},
+      injectCode: (css: string, options: InjectCodeOptions) =>
+        `window.xCSSInjector.addStyle([${css}]);`,
+    }),
+    //Inspector(),
   ],
   resolve: {
     alias: {