Add CSS cascade layers for Compound, shared components, and app/web styles (#33302)

* Layer Compound and shared component CSS

* Layer app theme CSS

* Remove !important flags from ActionBarView

* Remove unnecessary !important statements from shared components

* Avoid dead code errors for *.pcss just because layer is specified after @import url

* Remove unnecessary !important styling

* Override Banner defaults in RoomStatusBarView

* Updated snaps

* Updated snaps

* Fix styling of media body in app/web

* Fix styling for Compound anchors

* Fix styling issues in app/web

* More styling fixes

* Fix a problem extracting css for HTMLExport

* Revert changes

* Fix for theme styling

* Add test to improve coverage

* Prettier

* Fix styling issues

* Add data-kind attribute to avoid global styling override

* Update screenshot that now is correct

* Revert data-kind attribute

* Handle LinkPreview styling in .pcss

* Fix flaky test: Avoid racing the lazy-loaded ManageEventIndexDialog

* Take care of review comments

* Updated snaps

* Updated snaps again after merge

* Remove !important from RoomStatusBar

packages/shared-components/vite.config.ts

@@ -6,12 +6,36 @@
  *
  */
 
+import { readFileSync, writeFileSync } from "node:fs";
 import { dirname, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
-import { defineConfig, esmExternalRequirePlugin } from "vite";
+import { defineConfig, esmExternalRequirePlugin, type Plugin } from "vite";
 import dts from "unplugin-dts/vite";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
+const cssLayerOrder = "@layer compound-tokens, compound-web, shared-components, app-web;";
+const sharedComponentsLayer = "shared-components";
+
+function layerCssAssets(): Plugin {
+    return {
+        name: "element-web-shared-components-css-layer",
+        writeBundle(_options, bundle): void {
+            for (const asset of Object.values(bundle)) {
+                if (asset.type !== "asset" || asset.fileName !== "element-web-shared-components.css") {
+                    continue;
+                }
+
+                const cssPath = resolve(__dirname, "dist", asset.fileName);
+                const source = readFileSync(cssPath, "utf-8");
+                if (source.startsWith(cssLayerOrder)) {
+                    continue;
+                }
+
+                writeFileSync(cssPath, `${cssLayerOrder}\n@layer ${sharedComponentsLayer} {\n${source}\n}\n`);
+            }
+        },
+    };
+}
 
 export default defineConfig({
     build: {
@@ -50,6 +74,7 @@ export default defineConfig({
         },
     },
     plugins: [
+        layerCssAssets(),
         dts({
             bundleTypes: true,
             include: ["src/**/*.{ts,tsx}"],