Tweak CSS bundling to dedupe more styles (#34371)

* Tweak CSS bundling to dedupe more styles

Previously all of compound-web & compound-design-tokens were duplicated amongst all the themes rather than just being in `bundle.css`.

* Fix highlight.js & github-markdown-css dark/light

* Fix highlight.js & github-markdown-css dark/light

* Iterate

apps/web/res/css/_common.pcss

@@ -12,7 +12,6 @@ Please see LICENSE files in the repository root for full details.
 @import "./_font-sizes.pcss";
 @import "./_animations.pcss";
 @import "./_spacing.pcss";
-@import url("maplibre-gl/dist/maplibre-gl.css");
 
 :root {
     --container-border-width: 8px;

apps/web/res/css/_compound.pcss

@@ -1,6 +0,0 @@
-/* Shared cascade order: Compound tokens, Compound Web, shared components, then app overrides. */
-@layer compound-tokens, compound-web, shared-components, app-web;
-
-/* Modules bundled with compound apply compound lastly. In order to catch issue due to css class ordering, we put compound at the end */
-@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css") layer(compound-tokens);
-@import url("@vector-im/compound-web/dist/style.css") layer(compound-web);

apps/web/res/css/_index.pcss

@@ -0,0 +1,13 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+@layer compound-tokens, compound-web, shared-components, app-web;
+
+@import url("maplibre-gl/dist/maplibre-gl.css") layer(app-web);
+@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css") layer(compound-tokens);
+@import url("@vector-im/compound-web/dist/style.css") layer(compound-web);
+@import url("@element-hq/web-shared-components/dist/element-web-shared-components.css") layer(shared-components);

apps/web/res/css/rethemendex.sh

@@ -8,7 +8,7 @@ cd `dirname $0`
     # we used to have exclude /themes from the find at this point.
     # as themes are no longer a spurious subdirectory of css/, we don't
     # need it any more.
-    find . -iname _\*.pcss | fgrep -v _components.pcss | fgrep -v _compound.pcss | LC_ALL=C sort |
+    find . -iname _\*.pcss | fgrep -v _components.pcss | fgrep -v _index.pcss | LC_ALL=C sort |
         while read i; do
             echo "@import \"$i\";"
         done

apps/web/res/themes/dark-custom/css/dark-custom.pcss

@@ -6,6 +6,5 @@
 @import "../../legacy-dark/css/_legacy-dark.pcss" layer(app-web);
 @import "../../light-custom/css/_custom.pcss" layer(app-web);
 @import "../../../../res/css/_components.pcss" layer(app-web);
-@import "../../../../res/css/_compound.pcss";
 @import url("highlight.js/styles/atom-one-light.min.css") layer(app-web);
 @import url("github-markdown-css/github-markdown-dark.css") layer(app-web);

apps/web/res/themes/dark/css/dark.pcss

@@ -6,6 +6,5 @@
 @import "_dark.pcss" layer(app-web);
 @import "../../light/css/_mods.pcss" layer(app-web);
 @import "../../../../res/css/_components.pcss" layer(app-web);
-@import "../../../../res/css/_compound.pcss";
 @import url("highlight.js/styles/atom-one-dark.min.css") layer(app-web);
 @import url("github-markdown-css/github-markdown-dark.css") layer(app-web);

apps/web/res/themes/legacy-dark/css/legacy-dark.pcss

@@ -5,6 +5,5 @@
 @import "../../legacy-light/css/_legacy-light.pcss" layer(app-web);
 @import "_legacy-dark.pcss" layer(app-web);
 @import "../../../../res/css/_components.pcss" layer(app-web);
-@import "../../../../res/css/_compound.pcss";
 @import url("highlight.js/styles/atom-one-dark.min.css") layer(app-web);
 @import url("github-markdown-css/github-markdown-dark.css") layer(app-web);

apps/web/res/themes/legacy-light/css/legacy-light.pcss

@@ -4,6 +4,5 @@
 @import "_fonts.pcss" layer(app-web);
 @import "_legacy-light.pcss" layer(app-web);
 @import "../../../../res/css/_components.pcss" layer(app-web);
-@import "../../../../res/css/_compound.pcss";
 @import url("highlight.js/styles/atom-one-light.min.css") layer(app-web);
 @import url("github-markdown-css/github-markdown-light.css") layer(app-web);

apps/web/res/themes/light-custom/css/light-custom.pcss

@@ -5,6 +5,5 @@
 @import "../../legacy-light/css/_legacy-light.pcss" layer(app-web);
 @import "_custom.pcss" layer(app-web);
 @import "../../../../res/css/_components.pcss" layer(app-web);
-@import "../../../../res/css/_compound.pcss";
 @import url("highlight.js/styles/atom-one-light.min.css") layer(app-web);
 @import url("github-markdown-css/github-markdown-light.css") layer(app-web);

apps/web/res/themes/light-high-contrast/css/light-high-contrast.pcss

@@ -6,6 +6,5 @@
 @import "_light-high-contrast.pcss" layer(app-web);
 @import "../../light/css/_mods.pcss" layer(app-web);
 @import "../../../../res/css/_components.pcss" layer(app-web);
-@import "../../../../res/css/_compound.pcss";
 @import url("highlight.js/styles/atom-one-light.min.css") layer(app-web);
 @import url("github-markdown-css/github-markdown-light.css") layer(app-web);

apps/web/res/themes/light/css/light.pcss

@@ -5,6 +5,5 @@
 @import "_light.pcss" layer(app-web);
 @import "_mods.pcss" layer(app-web);
 @import "../../../../res/css/_components.pcss" layer(app-web);
-@import "../../../../res/css/_compound.pcss";
 @import url("highlight.js/styles/atom-one-light.min.css") layer(app-web);
 @import url("github-markdown-css/github-markdown-light.css") layer(app-web);

apps/web/src/vector/index.ts

@@ -18,9 +18,7 @@ import { parseAppUrl } from "./url_utils";
 import "./modernizr.cjs";
 import { polyfillTouchEvent } from "../@types/polyfill";
 
-// Import shared components CSS
-import "@element-hq/web-shared-components/dist/element-web-shared-components.css";
-
+import "../../res/css/_index.pcss";
 // Require common CSS here; this will make webpack process it into bundle.css.
 // Our own CSS (which is themed) is imported via separate webpack entry points
 // in webpack.config.js