Fix linear-gradient direction conversion for legacy vendor-prefixed values#936
Conversation
| indoc! { r#" | ||
| .foo { | ||
| background: -webkit-linear-gradient(#ff0f0e, #7773ff); | ||
| background: -webkit-linear-gradient(top, #ff0f0e, #7773ff); |
There was a problem hiding this comment.
Some test results include an extra top keyword in vendor-prefixed linear-gradient values because the original input omits the direction. When unspecified, the new syntax defaults to to bottom, which is converted to top in legacy syntax.
c0231b9 to
38b1855
Compare
38b1855 to
b30f0d3
Compare
|
There are more test cases in Autoprefixer, and I think it would be nice to be able to synchronize them here for testing. |
|
Good idea! I’ll add more cases from https://github.com/postcss/autoprefixer/blob/main/test/cases/gradient.css |
to keyword conversion| .foo { | ||
| background-image: -webkit-gradient(linear, 0 0, 100% 0, from(red), to(#00f)); | ||
| background-image: -webkit-linear-gradient(90deg, red, #00f); | ||
| background-image: -webkit-linear-gradient(0deg, red, #00f); |
There was a problem hiding this comment.
The new angle conversion works quite well. Take these test cases for example:
background-image: linear-gradient(90deg, red, blue);
-
Before (angle unchanged):
-webkit-linear-gradient(90deg, red, #00f);
-
After
background-image: -webkit-linear-gradient(0deg, red, #00f);
background: linear-gradient(350.5deg, white, black)
from the first test case ported from Autoprefixer
-
Before (angle unchanged):
background: -webkit-linear-gradient(350.5deg, #fff, #000);
-
After
background: -webkit-linear-gradient(99.5deg, #fff, #000)
There was a problem hiding this comment.
Great, more bugs in lightningcss can be fixed with more comprehensive test cases.
src/values/gradient.rs
Outdated
| let number = (number * 1000.0).round() / 1000.0; | ||
| LineDirection::Angle(Angle::Deg(number)) | ||
| } | ||
| Angle::Rad(_) | Angle::Grad(_) | Angle::Turn(_) => LineDirection::Angle(angle), |
There was a problem hiding this comment.
Do we need to adjust these angles as well?
There was a problem hiding this comment.
You're right. I’ll look into fixing the angle conversion for those.
| .grad { | ||
| background: -webkit-linear-gradient(89.1deg, #fff, #000); | ||
| background: -o-linear-gradient(89.1deg, #fff, #000); | ||
| background: linear-gradient(1grad, #fff, #000); | ||
| } | ||
|
|
||
| .rad { | ||
| background: -webkit-linear-gradient(32.704deg, #fff, #000); | ||
| background: -o-linear-gradient(32.704deg, #fff, #000); | ||
| background: linear-gradient(57.2958deg, #fff, #000); | ||
| } | ||
|
|
||
| .turn { | ||
| background: -webkit-linear-gradient(342deg, #fff, #000); | ||
| background: -o-linear-gradient(342deg, #fff, #000); | ||
| background: linear-gradient(.3turn, #fff, #000); | ||
| } |
There was a problem hiding this comment.
Angle conversion now handles grad, rad, and turn.
background: linear-gradient(1grad, white, black);
Output background: -webkit-linear-gradient(89.1deg, #fff, #000);
background: linear-gradient(1rad, white, black);
Output background: -webkit-linear-gradient(32.704deg, #fff, #000);
background: linear-gradient(0.3turn, white, black);
Output background: -webkit-linear-gradient(342deg, #fff, #000);
tokeyword conversion error #918