sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

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

Browse Source 
* 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
This commit is contained in:
rbondesson
2026-04-30 11:54:49 +00:00
committed by GitHub
parent f2d355bb2c
commit b0ee6f5323
46 changed files with 350 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/window-custom-theme-linux.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 56 KiB

After

Width:  |  Height:  |  Size: 56 KiB

apps/web/res/css/_common.pcss
+4 -3
View File
@@ -163,9 +163,10 @@ b {
font-weight: bold;
}
a:hover,
a:link,
a:visited {
/* Keep the legacy link colour without overriding Compound anchors. */
a:where(:not([data-kind])):hover,
a:where(:not([data-kind])):link,
a:where(:not([data-kind])):visited {
color: $accent-alt;
}
apps/web/res/css/_compound.pcss
+5 -2
View File
@@ -1,3 +1,6 @@
/* 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);
@import url("@vector-im/compound-web/dist/style.css");
@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/views/audio_messages/_PlaybackContainer.pcss
+2 -3
View File
@@ -11,9 +11,8 @@ Please see LICENSE files in the repository root for full details.
/* Container for live recording and playback controls */
.mx_MediaBody.mx_VoiceMessagePrimaryContainer {
/* The waveform (right) has a 1px padding on it that we want to account for, otherwise */
/* inherit from mx_MediaBody */
padding-right: 11px;
/* Match mx_MediaBody spacing, offsetting the waveform's 1px internal right padding. */
padding: 6px 11px 6px 12px;
/* Cheat at alignment a bit */
display: flex;
apps/web/res/css/views/auth/_CompleteSecurityBody.pcss
+1 -1
View File
@@ -10,7 +10,7 @@ Please see LICENSE files in the repository root for full details.
.mx_CompleteSecurityBody {
color: $authpage-primary-color;
background-color: $background;
border-radius: 4px;
border-radius: 24px;
padding: 20px 20px 60px 20px;
box-sizing: border-box;
apps/web/res/css/views/messages/_MFileBody.pcss
-1
View File
@@ -7,7 +7,6 @@ Please see LICENSE files in the repository root for full details.
*/
.mx_MFileBody [data-type="download"] {
color: $accent;
height: var(--cpd-space-9x);
& object {
apps/web/res/css/views/messages/_MediaBody.pcss
+3 -1
View File
@@ -17,6 +17,8 @@ Please see LICENSE files in the repository root for full details.
color: $secondary-content;
font: var(--cpd-font-body-md-regular);
line-height: $font-24px;
}
padding: 6px 12px;
.mx_MAudioBody > .mx_MediaBody {
border-radius: var(--MBody-border-radius);
}
apps/web/res/css/views/messages/_TextualEvent.pcss
+9
View File
@@ -19,3 +19,12 @@ Please see LICENSE files in the repository root for full details.
opacity: unset; /* Unset the opacity value specified above on the search results panel */
}
}
.mx_TextualBody_urlPreviews {
/* Let shared-components own preview link colours instead of the app-wide anchor colour. */
a:where(:not([data-kind])):hover,
a:where(:not([data-kind])):link,
a:where(:not([data-kind])):visited {
color: revert-layer;
}
}
apps/web/res/css/views/settings/_ThemeChoicePanel.pcss
+11 -1
View File
@@ -26,12 +26,22 @@ Please see LICENSE files in the repository root for full details.
&.mx_ThemeChoicePanel_themeSelector_disabled {
border-color: var(--cpd-color-border-disabled);
.mx_ThemeChoicePanel_themeSelector_Label {
color: var(--cpd-color-text-disabled);
cursor: not-allowed;
}
}
.mx_ThemeChoicePanel_themeSelector_Label {
color: var(--cpd-color-text-primary);
font: var(--cpd-font-body-md-semibold);
}
&:not(.mx_ThemeChoicePanel_themeSelector_disabled) {
.mx_ThemeChoicePanel_themeSelector_Label {
color: var(--cpd-color-text-primary);
}
}
}
}
apps/web/res/css/views/settings/tabs/_SettingsSection.pcss
+2 -1
View File
@@ -12,7 +12,8 @@ Please see LICENSE files in the repository root for full details.
color: $primary-content;
a {
/* Compound links carry data-kind and provide their own colour. */
a:not([data-kind]) {
color: $links;
}
apps/web/res/css/views/settings/tabs/_SettingsTab.pcss
+2 -1
View File
@@ -10,7 +10,8 @@ Please see LICENSE files in the repository root for full details.
color: $primary-content;
a {
/* Compound links carry data-kind and provide their own colour. */
a:not([data-kind]) {
color: $links;
}
apps/web/res/themes/dark-custom/css/dark-custom.pcss
+10 -8
View File
@@ -1,9 +1,11 @@
@import "../../../../res/css/_font-sizes.pcss";
@import "../../legacy-light/css/_fonts.pcss";
@import "../../legacy-light/css/_legacy-light.pcss";
@import "../../legacy-dark/css/_legacy-dark.pcss";
@import "../../light-custom/css/_custom.pcss";
@import "../../../../res/css/_components.pcss";
@layer compound-tokens, compound-web, shared-components, app-web;
@import "../../../../res/css/_font-sizes.pcss" layer(app-web);
@import "../../legacy-light/css/_fonts.pcss" layer(app-web);
@import "../../legacy-light/css/_legacy-light.pcss" layer(app-web);
@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");
@import url("github-markdown-css/github-markdown-dark.css");
@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
+10 -8
View File
@@ -1,9 +1,11 @@
@import "../../../../res/css/_font-sizes.pcss";
@import "../../light/css/_fonts.pcss";
@import "../../light/css/_light.pcss";
@import "_dark.pcss";
@import "../../light/css/_mods.pcss";
@import "../../../../res/css/_components.pcss";
@layer compound-tokens, compound-web, shared-components, app-web;
@import "../../../../res/css/_font-sizes.pcss" layer(app-web);
@import "../../light/css/_fonts.pcss" layer(app-web);
@import "../../light/css/_light.pcss" layer(app-web);
@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");
@import url("github-markdown-css/github-markdown-dark.css");
@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
+9 -7
View File
@@ -1,8 +1,10 @@
@import "../../../../res/css/_font-sizes.pcss";
@import "../../legacy-light/css/_fonts.pcss";
@import "../../legacy-light/css/_legacy-light.pcss";
@import "_legacy-dark.pcss";
@import "../../../../res/css/_components.pcss";
@layer compound-tokens, compound-web, shared-components, app-web;
@import "../../../../res/css/_font-sizes.pcss" layer(app-web);
@import "../../legacy-light/css/_fonts.pcss" layer(app-web);
@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");
@import url("github-markdown-css/github-markdown-dark.css");
@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
+8 -6
View File
@@ -1,7 +1,9 @@
@import "../../../../res/css/_font-sizes.pcss";
@import "_fonts.pcss";
@import "_legacy-light.pcss";
@import "../../../../res/css/_components.pcss";
@layer compound-tokens, compound-web, shared-components, app-web;
@import "../../../../res/css/_font-sizes.pcss" layer(app-web);
@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");
@import url("github-markdown-css/github-markdown-light.css");
@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/_custom.pcss
+7 -6
View File
@@ -25,16 +25,17 @@ $panels: var(--panels, var(--cpd-color-gray-600));
$panel-actions: var(--panels-actions, var(--cpd-color-gray-300));
/* --timeline-background-color */
$button-secondary-bg-color: var(--timeline-background-color);
$lightbox-border-color: var(--timeline-background-color);
$menu-bg-color: var(--timeline-background-color);
$message-action-bar-bg-color: var(--timeline-background-color);
$background: var(--timeline-background-color);
$custom-theme-background: var(--timeline-background-color, var(--cpd-color-bg-canvas-default));
$button-secondary-bg-color: $custom-theme-background;
$lightbox-border-color: $custom-theme-background;
$menu-bg-color: $custom-theme-background;
$message-action-bar-bg-color: $custom-theme-background;
$background: $custom-theme-background;
$togglesw-ball-color: var(--cpd-color-bg-action-primary-rest);
$togglesw-off-color: var(--togglesw-off-color);
$droptarget-bg-color: var(--timeline-background-color-50pct); /* still needs alpha at .5 */
$authpage-modal-bg-color: var(--timeline-background-color-50pct); /* still needs alpha at .59 */
$roomheader-bg-color: var(--timeline-background-color);
$roomheader-bg-color: $custom-theme-background;
/* --roomlist-highlights-color */
$panel-actions: var(--roomlist-highlights-color);
apps/web/res/themes/light-custom/css/light-custom.pcss
+9 -7
View File
@@ -1,8 +1,10 @@
@import "../../../../res/css/_font-sizes.pcss";
@import "../../legacy-light/css/_fonts.pcss";
@import "../../legacy-light/css/_legacy-light.pcss";
@import "_custom.pcss";
@import "../../../../res/css/_components.pcss";
@layer compound-tokens, compound-web, shared-components, app-web;
@import "../../../../res/css/_font-sizes.pcss" layer(app-web);
@import "../../legacy-light/css/_fonts.pcss" layer(app-web);
@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");
@import url("github-markdown-css/github-markdown-light.css");
@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
+10 -8
View File
@@ -1,9 +1,11 @@
@import "../../../../res/css/_font-sizes.pcss";
@import "../../light/css/_fonts.pcss";
@import "../../light/css/_light.pcss";
@import "_light-high-contrast.pcss";
@import "../../light/css/_mods.pcss";
@import "../../../../res/css/_components.pcss";
@layer compound-tokens, compound-web, shared-components, app-web;
@import "../../../../res/css/_font-sizes.pcss" layer(app-web);
@import "../../light/css/_fonts.pcss" layer(app-web);
@import "../../light/css/_light.pcss" layer(app-web);
@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");
@import url("github-markdown-css/github-markdown-light.css");
@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
+9 -7
View File
@@ -1,8 +1,10 @@
@import "../../../../res/css/_font-sizes.pcss";
@import "_fonts.pcss";
@import "_light.pcss";
@import "_mods.pcss";
@import "../../../../res/css/_components.pcss";
@layer compound-tokens, compound-web, shared-components, app-web;
@import "../../../../res/css/_font-sizes.pcss" layer(app-web);
@import "_fonts.pcss" layer(app-web);
@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");
@import url("github-markdown-css/github-markdown-light.css");
@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/components/views/messages/TextualBodyFactory.tsx
+1 -1
View File
@@ -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
+4 -3
View File
@@ -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
+19 -9
View File
@@ -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
-5
View File
@@ -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 {
apps/web/test/unit-tests/__snapshots__/theme-test.ts.snap
+1 -1
View File
@@ -1,3 +1,3 @@
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
exports[`theme setTheme applies a custom Compound theme 1`] = `"@layer compound.custom { :root, [class*="cpd-theme-"] { --cpd-color-icon-accent-tertiary: var(--cpd-color-blue-800); --cpd-color-text-action-accent: var(--cpd-color-blue-900); } }"`;
exports[`theme setTheme applies a custom Compound theme 1`] = `"@layer compound-tokens { :root, [class*="cpd-theme-"] { --cpd-color-icon-accent-tertiary: var(--cpd-color-blue-800); --cpd-color-text-action-accent: var(--cpd-color-blue-900); } }"`;
apps/web/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap
+2 -2
View File
@@ -237,7 +237,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
class="_content_n7ud0_38"
>
<p
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _title_1xryk_24"
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _title_mcq5y_24"
id="_r_1cl_"
>
Could not start a chat with this user
@@ -247,7 +247,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
class="_actions_n7ud0_61"
>
<button
class="_button_1nw83_8 _primaryAction_1xryk_20 _has-icon_1nw83_60"
class="_button_1nw83_8 _primaryAction_mcq5y_20 _has-icon_1nw83_60"
data-kind="primary"
data-size="md"
role="button"
apps/web/test/unit-tests/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap
+8 -8
View File
@@ -89,13 +89,13 @@ exports[`<MessageEditHistory /> should match the snapshot 1`] = `
<div
aria-label="Message Actions"
aria-live="off"
class="_flex_4dswl_9 mx_ThreadActionBar mx_HistoryActionBar _toolbar_1ax4y_8"
class="_flex_4dswl_9 mx_ThreadActionBar mx_HistoryActionBar _toolbar_1ksun_8"
role="toolbar"
style="--mx-flex-display: inline-flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<button
aria-label="Remove"
class="_button_1nw83_8 _toolbar_item_1ax4y_14"
class="_button_1nw83_8 _toolbar_item_1ksun_14"
data-kind="tertiary"
data-presentation="label"
data-size="md"
@@ -236,13 +236,13 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
<div
aria-label="Message Actions"
aria-live="off"
class="_flex_4dswl_9 mx_ThreadActionBar mx_HistoryActionBar _toolbar_1ax4y_8"
class="_flex_4dswl_9 mx_ThreadActionBar mx_HistoryActionBar _toolbar_1ksun_8"
role="toolbar"
style="--mx-flex-display: inline-flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<button
aria-label="Remove"
class="_button_1nw83_8 _toolbar_item_1ax4y_14"
class="_button_1nw83_8 _toolbar_item_1ksun_14"
data-kind="tertiary"
data-presentation="label"
data-size="md"
@@ -298,13 +298,13 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
<div
aria-label="Message Actions"
aria-live="off"
class="_flex_4dswl_9 mx_ThreadActionBar mx_HistoryActionBar _toolbar_1ax4y_8"
class="_flex_4dswl_9 mx_ThreadActionBar mx_HistoryActionBar _toolbar_1ksun_8"
role="toolbar"
style="--mx-flex-display: inline-flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<button
aria-label="Remove"
class="_button_1nw83_8 _toolbar_item_1ax4y_14"
class="_button_1nw83_8 _toolbar_item_1ksun_14"
data-kind="tertiary"
data-presentation="label"
data-size="md"
@@ -342,13 +342,13 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
<div
aria-label="Message Actions"
aria-live="off"
class="_flex_4dswl_9 mx_ThreadActionBar mx_HistoryActionBar _toolbar_1ax4y_8"
class="_flex_4dswl_9 mx_ThreadActionBar mx_HistoryActionBar _toolbar_1ksun_8"
role="toolbar"
style="--mx-flex-display: inline-flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<button
aria-label="Remove"
class="_button_1nw83_8 _toolbar_item_1ax4y_14"
class="_button_1nw83_8 _toolbar_item_1ksun_14"
data-kind="tertiary"
data-presentation="label"
data-size="md"
apps/web/test/unit-tests/components/views/messages/__snapshots__/MBodyFactory-test.tsx.snap
+3 -3
View File
@@ -3,7 +3,7 @@
exports[`MBodyFactory renderMBody fallback shows m.audio generic placeholder when showFileInfo is true 1`] = `
<div>
<span
class="_content_f1s5h_8 mx_MFileBody"
class="_content_1t2mx_8 mx_MFileBody"
>
<div
class="mx_MediaBody _mediaBody_rgndh_8"
@@ -44,7 +44,7 @@ exports[`MBodyFactory renderMBody fallback shows m.audio generic placeholder whe
exports[`MBodyFactory renderMBody fallback shows m.file generic placeholder when showFileInfo is true 1`] = `
<div>
<span
class="_content_f1s5h_8 mx_MFileBody"
class="_content_1t2mx_8 mx_MFileBody"
>
<div
class="mx_MediaBody _mediaBody_rgndh_8"
@@ -82,7 +82,7 @@ exports[`MBodyFactory renderMBody fallback shows m.file generic placeholder when
exports[`MBodyFactory renderMBody renders download button for m.file in file rendering type 1`] = `
<div>
<span
class="_content_f1s5h_8 mx_MFileBody"
class="_content_1t2mx_8 mx_MFileBody"
>
<div
data-type="download"
apps/web/test/unit-tests/components/views/messages/__snapshots__/MImageBody-test.tsx.snap
+2 -2
View File
@@ -93,7 +93,7 @@ exports[`<MImageBody/> should open ImageView using thumbnail for encrypted svg 1
</div>
<a
aria-live="off"
class="mx_MessageTimestamp _content_kc5mt_8"
class="mx_MessageTimestamp _content_1r034_8"
href="https://matrix.to/#/!room:server/undefined"
>
Thu, Jan 15, 1970, 06:56
@@ -300,7 +300,7 @@ exports[`<MImageBody/> should open ImageView using thumbnail for encrypted svg 1
exports[`<MImageBody/> should render MFileBody for svg with no thumbnail 1`] = `
<DocumentFragment>
<span
class="_content_f1s5h_8 mx_MFileBody"
class="_content_1t2mx_8 mx_MFileBody"
>
<div
class="mx_MediaBody _mediaBody_rgndh_8"
apps/web/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListSearch-test.tsx.snap
+4 -4
View File
@@ -3,13 +3,13 @@
exports[`<RoomListSearch /> renders 1`] = `
<DocumentFragment>
<div
class="_flex_4dswl_9 _view_z7ks9_8"
class="_flex_4dswl_9 _view_zk0ja_8"
data-testid="room-list-search"
role="search"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<button
class="_button_1nw83_8 _search_z7ks9_16 _has-icon_1nw83_60"
class="_button_1nw83_8 _search_zk0ja_16 _has-icon_1nw83_60"
data-kind="secondary"
data-size="md"
id="room-list-search-button"
@@ -29,11 +29,11 @@ exports[`<RoomListSearch /> renders 1`] = `
/>
</svg>
<span
class="_flex_4dswl_9 _search_container_z7ks9_29"
class="_flex_4dswl_9 _search_container_zk0ja_28"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<span
class="_search_text_z7ks9_41"
class="_search_text_zk0ja_40"
>
Search
</span>
apps/web/test/unit-tests/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap
+1 -1
View File
File diff suppressed because one or more lines are too long
apps/web/test/unit-tests/utils/exportUtils/exportCSS-test.ts
+90
View File
@@ -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}");
});
});
});