styling: using var() splits a rule in two with different specificities, causes problems with shorthands

[justinfagnani]

* {
  --border-color: blue;
}
foo {
  border: solid var(--border-color);
  border-width: 1px 0;
}

gets split into:

.my-host-0 foo.my-host {
  border: solid blue;
}
foo.my-host {
  border-width: 1px 0;
}

Because .my-host-0 foo.my-host has higher specificity than foo.my-host the border-width property is overridden by the shorthand border property. In this example this results in the border width being the default from the user style sheet (3px).

[sorvell]

Fixed via #1948

[sorvell]

The fix in #1948 was reverted because it was incomplete and caused some breakage.

This issue can be addressed either by interleaving property and static rules or making sure property sheets include all static rules.

[sorvell]

Fixed in 1.3.0.

[justinfagnani]

what PR fixed this?

[sorvell]

#3413

[justinfagnani]

thanks!