Fix loading compound

modules/banner/element-web/package.json

@@ -12,6 +12,7 @@
         "test": "echo no tests yet"
     },
     "devDependencies": {
+        "@arcmantle/vite-plugin-import-css-sheet": "^1.0.12",
         "@element-hq/element-web-module-api": "^1.0.0",
         "@types/node": "^22.10.7",
         "@types/react": "^19",

modules/banner/element-web/src/index.tsx

@@ -6,6 +6,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { ThemeProvider } from "styled-components";
+import compound from "@vector-im/compound-web/dist/style.css" with { type: "css" };
 
 import type { Module, Api, ModuleFactory } from "@element-hq/element-web-module-api";
 import Translations from "./translations.json";
@@ -21,6 +22,8 @@ class BannerModule implements Module {
     public constructor(private api: Api) {}
 
     public async load(): Promise<void> {
+        document.adoptedStyleSheets.push(compound);
+
         this.api.i18n.register(Translations);
 
         try {

modules/banner/element-web/src/vite-env.d.ts

@@ -6,3 +6,4 @@ Please see LICENSE files in the repository root for full details.
 */
 
 /// <reference types="vite-plugin-svgr/client" />
+/// <reference types="@arcmantle/vite-plugin-import-css-sheet/client" />

modules/banner/element-web/vite.config.ts

@@ -12,6 +12,7 @@ import react from "@vitejs/plugin-react";
 import { nodePolyfills } from "vite-plugin-node-polyfills";
 import externalGlobals from "rollup-plugin-external-globals";
 import svgr from "vite-plugin-svgr";
+import { importCSSSheet } from "@arcmantle/vite-plugin-import-css-sheet";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
@@ -31,6 +32,7 @@ export default defineConfig({
         },
     },
     plugins: [
+        importCSSSheet(),
         react(),
         svgr(),
         nodePolyfills({

modules/restricted-guests/element-web/package.json

@@ -12,6 +12,7 @@
         "test": "echo no tests yet"
     },
     "devDependencies": {
+        "@arcmantle/vite-plugin-import-css-sheet": "^1.0.12",
         "@element-hq/element-web-module-api": "^1.0.0",
         "@types/node": "^22.10.7",
         "@types/react": "^19",

modules/restricted-guests/element-web/src/index.tsx

@@ -5,6 +5,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
+import compound from "@vector-im/compound-web/dist/style.css" with { type: "css" };
+
 import type { Module, Api, ModuleFactory } from "@element-hq/element-web-module-api";
 import Translations from "./translations.json";
 import { ModuleConfig, CONFIG_KEY } from "./config";
@@ -28,6 +30,8 @@ class RestrictedGuestsModule implements Module {
     public constructor(private api: Api) {}
 
     public async load(): Promise<void> {
+        document.adoptedStyleSheets.push(compound);
+
         this.api.i18n.register(Translations);
 
         try {

modules/restricted-guests/element-web/src/vite-env.d.ts

@@ -0,0 +1,9 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+/// <reference types="vite-plugin-svgr/client" />
+/// <reference types="@arcmantle/vite-plugin-import-css-sheet/client" />

modules/restricted-guests/element-web/vite.config.ts

@@ -11,6 +11,7 @@ import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import { nodePolyfills } from "vite-plugin-node-polyfills";
 import externalGlobals from "rollup-plugin-external-globals";
+import { importCSSSheet } from "@arcmantle/vite-plugin-import-css-sheet";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
@@ -30,6 +31,7 @@ export default defineConfig({
         },
     },
     plugins: [
+        importCSSSheet(),
         react(),
         nodePolyfills({
             include: ["events"],