Message HTML export produces a ~1MB CSS file

[anoadragon453]

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

[t3chguy]

# 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.

[t3chguy]

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

[t3chguy]

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

[t3chguy]

Getting a bit closer but still broken

[t3chguy]

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