Fix CSS variables in gradients (#1515)

[serger777]

Fix CSS variables in gradients (#1515)

Problem

When CSS variables are present in linear gradients like linear-gradient(var(--config)),
autoprefixer generates invalid -webkit-gradient() syntax that breaks when the variable
contains comma-separated values.

Solution

Added detection for var() in gradient strings. When CSS variables are found,
skip old webkit gradient conversion and use only -webkit-linear-gradient().

[ai]

Can you show an example of input CSS, current output and output after the fix?

I am not sure that I understood the use case right.

[serger777]

Can you show an example of input CSS, current output and output after the fix?

I am not sure that I understood the use case right.

Input CSS:

   --colors: 45deg, red, blue, green;                                                                                                                                                                                                         
  .example { background: linear-gradient(var(--colors)); }   

Before Fix:

  background: -webkit-gradient(linear, left top, left bottom, from(var(--colors)));

When browser substitutes variable → Invalid CSS:

  -webkit-gradient(linear, left top, left bottom, from(45deg, red, blue, green))

from() only accepts one color, not multiple values.

After Fix:

  background: -webkit-linear-gradient(var(--colors));

When browser substitutes variable → Valid CSS:

  -webkit-linear-gradient(45deg, red, blue, green)

[ai]

Thanks. Released in 10.4.25.