Minify position keywords to percentages if possible

Author: devongovett

src/lib.rs

@@ -1030,6 +1030,8 @@ mod tests {
       }
     "#
     });
+
+    minify_test(".foo { background-position: bottom left }", ".foo{background-position:0% 100%}");
   }
 
   #[test]
@@ -3485,11 +3487,11 @@ mod tests {
     );
     minify_test(
       ".foo { background: radial-gradient(at top left, yellow, blue) }",
-      ".foo{background:radial-gradient(at left top,#ff0,#00f)}"
+      ".foo{background:radial-gradient(at 0% 0%,#ff0,#00f)}"
     );
     minify_test(
       ".foo { background: radial-gradient(5em circle at top left, yellow, blue) }",
-      ".foo{background:radial-gradient(5em at left top,#ff0,#00f)}"
+      ".foo{background:radial-gradient(5em at 0% 0%,#ff0,#00f)}"
     );
     minify_test(
       ".foo { background: radial-gradient(circle at 100%, #333, #333 50%, #eee 75%, #333 75%) }",
@@ -3862,8 +3864,8 @@ mod tests {
       indoc! {r#"
       .foo {
         background-image: -webkit-gradient(radial, left top, 0, left top, 20, from(red), to(#00f));
-        background-image: -webkit-radial-gradient(20px at left top, red, #00f);
-        background-image: radial-gradient(20px at left top, red, #00f);
+        background-image: -webkit-radial-gradient(20px at 0% 0%, red, #00f);
+        background-image: radial-gradient(20px at 0% 0%, red, #00f);
       }
       "#},
       Browsers {
@@ -3892,13 +3894,13 @@ mod tests {
       r#"
       .foo {
         background-image: -webkit-gradient(radial, left top, 0, left top, 20, from(red), to(#00f));
-        background-image: -webkit-radial-gradient(20px at left top, red, #00f);
-        background-image: radial-gradient(20px at left top, red, #00f);
+        background-image: -webkit-radial-gradient(20px at 0% 0%, red, #00f);
+        background-image: radial-gradient(20px at 0% 0%, red, #00f);
       }
       "#,
       indoc! {r#"
       .foo {
-        background-image: radial-gradient(20px at left top, red, #00f);
+        background-image: radial-gradient(20px at 0% 0%, red, #00f);
       }
       "#},
       Browsers {
@@ -3910,13 +3912,13 @@ mod tests {
       r#"
       .foo {
         background: -webkit-gradient(radial, left top, 0, left top, 20, from(red), to(#00f));
-        background: -webkit-radial-gradient(20px at left top, red, #00f);
-        background: radial-gradient(20px at left top, red, #00f);
+        background: -webkit-radial-gradient(20px at 0% 0%, red, #00f);
+        background: radial-gradient(20px at 0% 0%, red, #00f);
       }
       "#,
       indoc! {r#"
       .foo {
-        background: radial-gradient(20px at left top, red, #00f);
+        background: radial-gradient(20px at 0% 0%, red, #00f);
       }
       "#},
       Browsers {

src/values/position.rs

@@ -150,10 +150,11 @@ impl ToCss for Position {
         x_lp.to_css(dest)
       },
       (
-        x_pos @ &HorizontalPosition::Side(_, None),
+        &HorizontalPosition::Side(side, None),
         &VerticalPosition::Center,
       ) => {
-        x_pos.to_css(dest)
+        let p: Percentage = side.into();
+        p.to_css(dest)
       },
       (
         &HorizontalPosition::Center,
@@ -169,17 +170,28 @@ impl ToCss for Position {
         x_lp.to_css(dest)
       },
       (
-        x_pos @ &HorizontalPosition::Side(_, None),
+        &HorizontalPosition::Side(side, None),
         &VerticalPosition::Length(LengthPercentage::Percentage(Percentage(y_lp))),
       ) if y_lp == 0.5 => {
-        x_pos.to_css(dest)
+        let p: Percentage = side.into();
+        p.to_css(dest)
       },
       (
         &HorizontalPosition::Length(LengthPercentage::Percentage(Percentage(x_lp))),
         y_pos @ &VerticalPosition::Side(_, None),
       ) if x_lp == 0.5 => {
         y_pos.to_css(dest)
       },
+      (
+        &HorizontalPosition::Side(x, None),
+        &VerticalPosition::Side(y, None)
+      ) => {
+        let x: Percentage = x.into();
+        let y: Percentage = y.into();
+        x.to_css(dest)?;
+        dest.write_str(" ")?;
+        y.to_css(dest)
+      },
       (x_pos, y_pos) => {
         x_pos.to_css(dest)?;
         dest.write_str(" ")?;