[ShadyCSS] Re-declaring same custom CSS property crashes IE11

[web-padawan]

Description

We have this CSS configuring custom CSS properties for a component:

:host([theme~="xlarge"]) {
  --vaadin-avatar-group-overlap: 12px;
  --vaadin-avatar-group-overlap-border: 3px;
}

:host([theme~="large"]) {
  --vaadin-avatar-group-overlap: 10px;
  --vaadin-avatar-group-overlap-border: 3px;
}

:host([theme~="small"]) {
  --vaadin-avatar-group-overlap: 6px;
  --vaadin-avatar-group-overlap-border: 2px;
}

:host([theme~="xsmall"]) {
  --vaadin-avatar-group-overlap: 4px;
  --vaadin-avatar-group-overlap-border: 2px;
}

This code leads to SyntaxError in IE11 and as a result the component does not render correctly.

While it's a known scoping shim limitation (and we do not expect it to work in IE11), it probably shouldn't crash.

Example

Here is a code that we needed to mitigate the issue https://github.com/vaadin/vaadin-avatar/pull/60/commits/91f22be7df88a230697c8a8354d97385dee770f9

Expected behavior

No error is thrown.

Actual behavior

SyntaxError and component not rendering properly.

Version

Happens for 1.x and 2.x latest versions.

Browsers affected

• [ ] Chrome
• [ ] Firefox
• [ ] Edge
• [ ] Safari
• [X] IE 11

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[web-padawan]

I'm not sure if anyone is going to fix this issue, but it might be a problem for someone else, so let's keep it open for now.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.