Use `-webkit-linear-gradient` instead of `-webkit-gradient` when the `linear-gradient` contains `var(...)`.

INPUT

// Set browserlist to 'last 2 versions'
.foo {
  background: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c);
}

.bar {
  --value: 0.25turn, #3f87a6, #ebf8e1, #f69d3c;
  background-image: linear-gradient(var(--value));
}

GOT

.foo {
  background: -webkit-gradient(linear, left top, right top, from(#3f87a6), color-stop(#ebf8e1), to(#f69d3c));
  background: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c);
}

.bar {
  --value: 0.25turn, #3f87a6, #ebf8e1, #f69d3c;
  /* V--- BUG: Bad CSS when expanding CSS variable. ---V */
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--value)));
  background-image: linear-gradient(var(--value));
}

WANT

In these cases, it is safer to use -webkit-linear-gradient instead of -webkit-gradient:

.foo {
  background: -webkit-gradient(linear, left top, right top, from(#3f87a6), color-stop(#ebf8e1), to(#f69d3c));
  background: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c);
}

.bar {
  --value: 0.25turn, #3f87a6, #ebf8e1, #f69d3c;
  /* V--- NO BUG ---V */
  background-image: -webkit-linear--gradient(var(--value));
  background-image: linear-gradient(var(--value));
}