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
2026-05-29 17:49:02 +00:00 · 2026-04-30 13:54:49 +02:00
parent f2d355bb2c
commit b0ee6f5323
46 changed files with 351 additions and 166 deletions
@@ -6,13 +6,103 @@ 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 fetchMock from "@fetch-mock/jest";
+
 import getExportCSS from "../../../../src/utils/exportUtils/exportCSS";

 describe("exportCSS", () => {
    describe("getExportCSS", () => {
+        beforeEach(() => {
+            document.head.replaceChildren();
+        });
+
        it("supports documents missing stylesheets", async () => {
            const css = await getExportCSS(new Set());
            expect(css).not.toContain("color-scheme: light");
        });
+
+        it("fetches export stylesheets and filters unused css", async () => {
+            document.head.innerHTML = `
+                <link rel="stylesheet" href="/bundle.css" />
+                <link rel="stylesheet" href="/theme-light.css" />
+                <link rel="stylesheet" href="/theme-dark.css" />
+            `;
+
+            fetchMock.get(
+                "end:/bundle.css",
+                `
+                @font-face { font-family: Inter; src: url(inter.woff2); }
+                body { margin: 0; }
+                .mx_Used { font-family: Inter; color: #111111; }
+                .mx_Code { font-family: Fira Code; }
+                .mx_Unused { color: #123456; }
+                .mx_Empty {}
+                .mx_Used, .mx_UnusedComma { color: #abcdef; }
+                @media screen {
+                    .mx_Used { --cpd-font-family-sans: "Inter"; }
+                    .mx_UnusedNested { color: #654321; }
+                }
+                @supports (display: grid) {
+                    .mx_UnusedSupported { color: #fedcba; }
+                }
+            `,
+            );
+            fetchMock.get("end:/theme-light.css", ".mx_Theme { color: #222222; }");
+
+            const css = await getExportCSS(new Set(["mx_Used", "mx_Code", "mx_Theme"]));
+
+            expect(fetchMock).toHaveFetchedTimes(1, "end:/bundle.css");
+            expect(fetchMock).toHaveFetchedTimes(1, "end:/theme-light.css");
+            expect(fetchMock).not.toHaveFetched("end:/theme-dark.css");
+
+            expect(css).toContain("margin:0");
+            expect(css).toContain("#111");
+            expect(css).toContain("#222");
+            expect(css).toContain("#abcdef");
+
+            expect(css).not.toContain("@font-face");
+            expect(css).not.toContain("#123456");
+            expect(css).not.toContain("#654321");
+            expect(css).not.toContain("#fedcba");
+
+            expect(css).not.toContain("font-family:Inter");
+            expect(css).not.toContain("font-family:Fira Code");
+            expect(css).toContain("BlinkMacSystemFont");
+            expect(css).toContain("Menlo, Consolas");
+        });
+
+        it("keeps export-only css in the app cascade layer after layered font rules", async () => {
+            document.head.innerHTML = `
+                <link rel="stylesheet" href="/bundle.css" />
+            `;
+
+            fetchMock.get(
+                "end:/bundle.css",
+                `
+                @layer compound-tokens, compound-web, shared-components, app-web;
+                @layer compound-web {
+                    .mx_Typography {
+                        font: var(--cpd-font-heading-lg-regular);
+                    }
+                }
+                @layer app-web {
+                    body {
+                        font: var(--cpd-font-body-md-regular) !important;
+                    }
+                }
+            `,
+            );
+
+            const css = await getExportCSS(new Set(["mx_Typography"]));
+
+            expect(css).toContain("@layer compound-web{.mx_Typography{font:var(--cpd-font-heading-lg-regular)}}");
+            expect(css).toContain("@layer app-web{body{font:var(--cpd-font-body-md-regular)!important}}");
+
+            const exportCssLayerIndex = css.indexOf("@layer app-web {");
+            expect(exportCssLayerIndex).toBeGreaterThan(
+                css.indexOf("@layer app-web{body{font:var(--cpd-font-body-md-regular)!important}}"),
+            );
+            expect(css.slice(exportCssLayerIndex)).toBe("@layer app-web {css-file-stub}");
+        });
    });
 });