Update vector-im

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,8 @@
+/*
+Copyright 2025 Element Creations 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="@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"],

package.json

@@ -21,7 +21,7 @@
         "test:playwright": "playwright test",
         "test:playwright:open": "yarn test:playwright --ui",
         "test:playwright:screenshots": "playwright-screenshots",
-        "prepare": "husky && yarn workspaces run prepare"
+        "prepare": "patch-package && husky && yarn workspaces run prepare"
     },
     "devDependencies": {
         "@action-validator/cli": "^0.6.0",
@@ -48,6 +48,7 @@
         "husky": "^9.1.7",
         "knip": "^5.43.5",
         "lint-staged": "^16.0.0",
+        "patch-package": "^8.0.1",
         "prettier": "^3.4.2",
         "typescript": "^5.7.3"
     },

patches/@arcmantle+vite-plugin-import-css-sheet+1.0.12.patch

@@ -0,0 +1,10 @@
+diff --git a/node_modules/@arcmantle/vite-plugin-import-css-sheet/client.d.ts b/node_modules/@arcmantle/vite-plugin-import-css-sheet/client.d.ts
+index d884a7e..533850e 100644
+--- a/node_modules/@arcmantle/vite-plugin-import-css-sheet/client.d.ts
++++ b/node_modules/@arcmantle/vite-plugin-import-css-sheet/client.d.ts
+@@ -1,3 +1,4 @@
+ declare module '*.css' {
+-	export default styles as CSSStyleSheet;
++    const styles: CSSStyleSheet;
++	export default styles;
+ }