Polyfill: Fall back to first color value when color-mix(…) contains unresolvable var(…)

[philipp-spiess]

This PR further improves the color-mix(…) polyfill to create a reasonable fallback if dynamic values that can not statically be resolved are used. This refers to either the use of currentcolor or any variables that are not static theme variables.

Here are two examples that now generate a reasonable fallback instead of not showing any color at all:

.text-\\(--my-color\\)\\/\\(--my-opacity\\) {
  color: var(--my-color);
}
@supports (color: color-mix(in lab, red, red)) {
  .text-\\(--my-color\\)\\/\\(--my-opacity\\) {
    color: color-mix(in oklab, var(--my-color) var(--my-opacity), transparent);
  }
}

.text-current\\/50 {
  color: currentColor;
}

@supports (color: color-mix(in lab, red, red)) {
  .text-current\\/50 {
    color: color-mix(in oklab, currentColor 50%, transparent);
  }
}

Test plan

• Made sure the test diffs are looking reasonable
• Tested this on a production site with <p className="text-shadow-lg/50 [--my-color:red] text-shadow-(color:--my-color)">shadow test</p>
  • Browsers that do not support color-mix(…) will properly show a red shadow now albeit with 100% opacity: iOS 15.5 and Chrome 110
  • Browsers that I have tested to make sure it still works there with opacity: Firefox 127, Firefox 128, Latest Chrome, Safari, Firefox
  • Browsers that do show a black shadow because of var(…)var(…) being chained with no space by lightningcss: Chrome 111

[philipp-spiess]

This looks a bit silly because we already have an @supports query in preflight and now we chain another one but when you think about it, the first one only makes sure that Safari versions that crash are gated out. Older versions of Chrome/Firefox _that do not support color-mix(…) would still not have a default in that case so this is a small improvement maybe?

In the future we might be able to clean this up if we use a different pass for applying that polyfill that has access to the parent path and then we can bail if this is already inside an @supprots or so.