Better conversion CSS linear-gradient()

[yisibl]

Now

Input:

.foo {
  background-image: linear-gradient(to bottom, #f8f8f8, #eeeeee);
}

Output:

.foo {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#eeeeee));
  background-image: -webkit-linear-gradient(top, #f8f8f8, #eeeeee);
  background-image: -moz-linear-gradient(top, #f8f8f8, #eeeeee);
  background-image: -o-linear-gradient(top, #f8f8f8, #eeeeee);
  background-image: linear-gradient(to bottom, #f8f8f8, #eeeeee);
}

But

Input:

.foo {
  background-image: linear-gradient(180deg, #f8f8f8, #eeeeee);
}

Output:

.foo {
  background-image: -webkit-linear-gradient(top, #f8f8f8, #eeeeee);
  background-image: -moz-linear-gradient(top, #f8f8f8, #eeeeee);
  background-image: -o-linear-gradient(top, #f8f8f8, #eeeeee);
  background-image: linear-gradient(to bottom, #f8f8f8, #eeeeee);
}

Lost:

  background-image: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#eeeeee));

We need to support 0deg, 90deg,180deg, 270deg, 360deg, converted to WebKit's oldest syntax.

That is to say:

to bottom = 180deg = top = left top, left bottom

If the argument is to top, to right, to bottom, or to left, the angle of the gradient line is 0deg, 90deg, 180deg, or 270deg, respectively.
https://drafts.csswg.org/css-images/#linear-gradients

[ai]

Done 3f12f38

[yisibl]

Also we must be support other CSS Angle Units

For example, a right angle is 90deg or 100grad or 0.25turn or approximately 1.57rad.

[ai]

@yisibl ouh :( wait a second.

[ai]

@yisibl other angles are finished too 1bbaf47

Wait a second for -90deg → 270deg support.

[yisibl]

@ai Nice!

[ai]

@yisibl -90deg → 270deg convertation done 0b755a3

[ai]

Released in 6.2 version