Prevent shorthand of text-decoration?

[kabforks]

Hello!

Parcel CSS combining text-decoration properties is giving me some trouble in Safari.

Given:

  text-decoration: underline;
  text-decoration-thickness: 8%;
  text-underline-offset: 1px;

This is combined into:

    text-underline-offset: 1px;
    text-decoration: underline 8%; // <-- fails to be interpreted in unsupported browsers

Safari 15.4 supports text-decoration-thickness in percent, but Safari 15.3 does not. Since Parcel combines this into a shorthand statement it causes the entire CSS-line to short circut, and I'm left with no text-decoration at all. I tried this fallback:

  text-decoration: underline;
  text-decoration-thickness: 1px; // Safari supports this
  text-decoration-thickness: 8%;
  text-underline-offset: 1px;

...thinking that maybe Safari would interpret "1px" and ingore "8%". But no. Parcel CSS combines this, and renders my fallback useless. It's combined into:

    text-underline-offset: 1px;
    text-decoration: underline 8%; // fails

I simply want text-decoration: underline to be preserved. Is this possible?

[devongovett]

Thanks for the bug report. I think we can do two things here:

1. Not compile text-decoration-thickness into the shorthand property when not supported. MDN has data for this: https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration.
2. Compile percentage values in text-decoration-thickness to a calc, e.g. calc(1em * .08) when percentages aren't fully supported.

[yisibl]

https://trac.webkit.org/changeset/290756/webkit/