Intelligently deduplicating rules for function values

[kof]

In case where a property {width: () => 10} is used for many elements, we currently generate many rules, despite the fact that the value is always the same. We can optimize that.

// Lets say we have rule "a" and rule "b"
// Their initial value is the same.
a.width = 10
b.width = 10

// We can generate one rule and use both classes:
.a, .b {
  width: 10
}

// Now "b" changes:
b.width = 20

// We remove the class "b" from the initial rule:
.a {
  width: 10
}
// We create a new rule with the new value for b:
.b {
  width: 20
}

[kof]

I am thinking of a virtual StyleRule concept. When StyleRule is constructed, it is given a virtual: true flag. Flag virtual is true when there has been an exact same rule (host rule) already in the RuleList based on props + values and that rule has function values. The virtual StyleRule will not be rendered, but it's selector will be added to the rule which is rendered, so that it's selector is fully functional for the user but does not has a separate CSS Rule rendered. Once the rule is updated and at least one value doesn't matches the host rule value, rule becomes non-virtual. It removes its selector from the host rule and renders itself into CSSOM.

Most of it can be done outside of StyleRule, for e.g. inside of RuleList.