⚠️ No Changeset found

Latest commit: 2d21d1e

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

I think this is the relevant spec issue:

w3c/csswg-drafts#2515

Similarly the following would exhibit the problem:

.gradient {
  background: rgb(var(--color-background));
  background: var(--gradient-background);
  background-attachment: fixed;
}

There is a possibility to fix this when we have access to the raw .innerText of the style;

• we could construct an artificial Stylesheet using CSSStyleSheet
• then compare the rules with the derived rules from .sheet

If they are the same, that means we can trust the .innerText as being up-to-date (not mutated by .insertRule etc)
In that case we just use the .innerText as the serialization.

For external stylesheets (<link> elements) we can fetch the raw contents and do the comparison that way (fetch should be from cache).

This will all be possible in an async manner after #1475

Hat-tip: CSSStylesheet idea was from https://github.com/rrweb-io/rrweb/pull/1357/files#diff-c61c2c2a3a84e2ee30a603d8363a994acce4caef8827931eb5b7317f08b53cb1R588

This also happens to padding and margin shorthands.
More info: https://issues.chromium.org/issues/40771479#comment13
And for both comedy and even more information, you get to see me getting yelled at here: https://issues.chromium.org/issues/40771479#comment14

Edit: Looks like part of this is fixed, the rest is related to w3c/csswg-drafts#2515 as mentioned above.