rrweb
rrweb copied to clipboard
rrweb-io
[Bug]: CSS `all: unset` incorrectly expands in `events.json` recording
Preflight Checklist
- [X] I have searched the issue tracker for a bug report that matches the one I want to file, without success.
What package is this bug report for?
rrweb
Version
v2.0.0-alpha.11
Expected Behavior
When all:unset is set, I expect no change to my rendered webpage.
Actual Behavior
When all:unset is encountered, the css class marks every element as unset except for those set
e.g. if we have
.class1 {
all: unset;
padding: 10px;
}
becomes this in the events.json snapshot (making the replayer show an inaccurate screenshot):
.class1 {
color-scheme: unset;
forced-color-adjust: unset;
mask: unset;
math-depth: unset;
position: unset;
position-anchor: unset;
/* ...truncated... */
padding: 10px; // this is set
padding-inline: unset; // this is "unset", which incorrectly overwrites the above
/* ...truncated ...*/
}
which overrides padding-left and padding-right incorrectly compared to the original css. If the all:unset was done in order (i.e. insert all variables as unset, then not resort them into alphabetical order), it would've been correct.
Steps to Reproduce
Run rrweb snapshot on the following webpage, and then run it through the replayer:
<html>
<head>
<style>
.class1 {
all: unset;
padding: 4px; border: 1px solid black;
}
</style>
</head>
<body>
<div class="class1">
Hello
</div>
</body>
</html>
it should look like this:
but the replayer shows (notice the padding + border removed):
this is because the all:unset expands incorrectly with padding-inline: unset overriding padding: 4px for padding-left/padding-right and border-inline: unset overriding border: 1px for border-left/right:
Testcase Gist URL
https://rrwebdebug.com/play/index.html?url=https%3A%2F%2Fgist.github.com%2Fotan%2F334b83336c7872c750bb5ef3357435fb&version=2.0.0-alpha.11&virtual-dom=on&play=on
Additional Information
No response
