Message HTML export produces a ~1MB CSS file

Steps to reproduce

When exporting 1MB of messages from a room through the 'Export chat' button in the sidebar, the resulting export ends up being 40KB of message history, 180KB of images and 884KB of CSS.

> ls
css  js  messages.html  room.png  users
> du -hd 1 *
884K	css
4.0K	js
40K	    messages.html
4.0K	room.png
180K	users

Outcome

What did you expect?

More messages, less CSS.

What happened instead?

I only noticed this when trying to debug #19436, going into the CSS file and being met with a very large file, one that dwarfs the others in my chat export.

Going out on a limb, I'm guessing this may be because the chat export feature simply takes the resulting CSS bundle from Element and simply exports that? I suppose that works and is low maintenance, but is does mean the export format will change occasionally and not deliberately.

Operating system

Arch Linux

Application version

Element Nightly version: 2021100901, Olm version: 3.2.3

How did you install the app?

The AUR

Homeserver

No response

Will you send logs?

No

# Firefox on a local development webpack build
# !!! This is faulty and is missing the majority of the required styling
t3chguy@Michaels-MacBook-Pro ~/D/Element - Chat Export - 08-12-2021 at 16-42-45> du -hd 1 *
 28K	css
4.0K	js
 12K	messages.html
 12K	users

# Firefox on develop.element.io
t3chguy@Michaels-MacBook-Pro ~/D/Element - Chat Export - 08-12-2021 at 16-51-01> du -hd 1 *
1.0M	css
4.0K	js
 44K	messages.html
4.0K	room.png
 24K	users

# Firefox on app.element.io
t3chguy@Michaels-MacBook-Pro ~/D/Element - Chat Export - 08-12-2021 at 16-53-06> du -hd 1 *
572K	css
4.0K	js
 48K	messages.html
4.0K	room.png
 24K	users

# Element Nightly
t3chguy@Michaels-MacBook-Pro ~/D/Element Nightly - Chat Export - 08-12-2021 at 16-45-45> du -hd 1 *
1.0M	css
4.0K	js
 48K	messages.html
 12K	room.png
 48K	users

So this problem looks specific to the build type, develop being the worst, app being meh, local being ~~best~~ broken.

Going to try a naive approach to strip unused classes and minify the CSS to see how smol we can make it

Naive approach attempt 1 output a stylesheet of 68KB without compression but it seems to over-strip some classes and thus lose some styling.

Getting a bit closer but still broken

Alright, with a functional export we are up to 74KB unminified/uncompressed

Merge tag 'v1.9.8' into build

Merge tag 'v1.9.8' into sc

Merge tag 'v3.37.0' into sc

Merge tag 'v1.9.8' into sc

Navigation Menu

Repository navigation

Message HTML export produces a ~1MB CSS file #19441

Steps to reproduce

Outcome

What did you expect?

What happened instead?

Operating system

Application version

How did you install the app?

Homeserver

Will you send logs?

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Message HTML export produces a ~1MB CSS file #19441

Description

Steps to reproduce

Outcome

What did you expect?

What happened instead?

Operating system

Application version

How did you install the app?

Homeserver

Will you send logs?

Activity

t3chguy commented on Dec 8, 2021

t3chguy commented on Dec 8, 2021

t3chguy commented on Dec 8, 2021

t3chguy commented on Dec 8, 2021

t3chguy commented on Dec 8, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions