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

apps/web/src/components/views/messages/TextualBodyFactory.tsx

@@ -210,7 +210,7 @@ export function TextualBodyFactory(props: Readonly<IBodyProps>): JSX.Element {
             vm={textualBodyVm}
             body={<EventContentBodyView vm={eventContentBodyVm} as={willHaveWrapper ? "span" : "div"} />}
             bodyRef={contentRef}
-            urlPreviews={<UrlPreviewGroupView vm={urlPreviewVm} />}
+            urlPreviews={<UrlPreviewGroupView vm={urlPreviewVm} className="mx_TextualBody_urlPreviews" />}
             className={getTextualBodyClassName(content.msgtype as MsgType | undefined)}
         />
     );

apps/web/src/theme.ts

@@ -207,9 +207,10 @@ function generateCustomCompoundCSS(theme: CompoundTheme): string {
     for (const [token, value] of Object.entries(theme))
         if (COMPOUND_TOKEN.test(token)) properties.push(`${token}: ${value};`);
         else logger.warn(`'${token}' is not a valid Compound token`);
-    // Insert the design token overrides into the 'custom' cascade layer as
-    // documented at https://compound.element.io/?path=/docs/develop-theming--docs
-    return `@layer compound.custom { :root, [class*="cpd-theme-"] { ${properties.join(" ")} } }`;
+    // Insert the design token overrides into the existing Compound tokens
+    // layer so custom themes win over the imported default tokens by source
+    // order without creating a lower-priority nested layer.
+    return `@layer compound-tokens { :root, [class*="cpd-theme-"] { ${properties.join(" ")} } }`;
 }
 
 /**

apps/web/src/utils/exportUtils/exportCSS.ts

@@ -6,11 +6,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import type { Rule, StyleSheet } from "css-tree";
+import type { CssNode, Rule, StyleSheet } from "css-tree";
 
 import customCSS from "!!raw-loader!./exportCustomCSS.css";
 
 const cssSelectorTextClassesRegex = /\.[\w-]+/g;
+const appLayerName = "app-web";
 
 function mutateCssText(css: string): string {
     // replace used fonts so that we don't have to bundle Inter & Fira Code
@@ -41,6 +42,21 @@ function includeRule(rule: Rule, usedClasses: Set<string>): boolean {
     return true;
 }
 
+function includeNode(node: CssNode, usedClasses: Set<string>): boolean {
+    if (node.type === "Atrule") {
+        if (node.name === "font-face") {
+            return false;
+        }
+
+        if (node.block) {
+            node.block.children = node.block.children.filter((child) => includeNode(child, usedClasses));
+            return !node.block.children.isEmpty;
+        }
+    }
+
+    return node.type !== "Rule" || includeRule(node, usedClasses);
+}
+
 // naively culls unused css rules based on which classes are present in the html,
 // doesn't cull rules which won't apply due to the full selector not matching but gets rid of a LOT of cruft anyway.
 // We cannot use document.styleSheets as it does not handle variables in shorthand properties sanely,
@@ -69,13 +85,7 @@ const getExportCSS = async (usedClasses: Set<string>): Promise<string> => {
         }) as StyleSheet;
 
         for (const rule of ast.children) {
-            if (rule.type === "Atrule") {
-                if (rule.name === "font-face") {
-                    continue;
-                }
-            }
-
-            if (rule.type === "Rule" && !includeRule(rule, usedClasses)) {
+            if (!includeNode(rule, usedClasses)) {
                 continue;
             }
 
@@ -83,7 +93,7 @@ const getExportCSS = async (usedClasses: Set<string>): Promise<string> => {
         }
     }
 
-    return css + customCSS;
+    return `${css}@layer ${appLayerName} {${customCSS}}`;
 };
 
 export default getExportCSS;

apps/web/src/utils/exportUtils/exportCustomCSS.css

@@ -60,11 +60,6 @@ body {
 
 a.mx_reply_anchor {
     cursor: pointer;
-    color: #238cf5;
-}
-
-a.mx_reply_anchor:hover {
-    text-decoration: underline;
 }
 
 @-webkit-keyframes mx_snackbar_fadein {