No support for color-mix – add fallback?

[eliasu]

Hey there,

first of all, thank you for this wonderful plugin. Its really helping a lot!

On older versions of iOS/Safari I guess the color-mix property is not supported. The problem is: adding a fallback will fail because of the var inside this line: color-mix(in srgb,var(--colors-p),transparent calc(100% - 100% * var(--tw-bg-opacity)))

The var basically validates the whole line of CSS as written here:

If a property contains one or more var() functions, and those functions are syntactically valid, the entire property’s grammar must be assumed to be valid at parse time. It is only syntax-checked at computed-value time, after var() functions have been substituted. ref

In your case, the property will fail at computed-value time and fallback to initial (transparent background)

A declaration can be invalid at computed-value time if it contains a var() that references a custom property with the guaranteed-invalid value, as explained above, or if it uses a valid custom property, but the property value, after substituting its var() functions, is invalid. When this happens, the computed value is one of the following depending on the property’s type:

...

Either the property’s inherited value or its initial value depending on whether the property is inherited or not, respectively, as if the property’s value had been specified as the unset keyword. ref

So: this would work due to normal CSS validation and a regular fallback solution:

But this does not work, due to the vars:

I could reproduce the issue on xCode Simulator with iPhoneX and iOs 15.0.

Is there a way to easily implement a fallback? Do you have something in mind? Thanks!