Handle outline

Author: devongovett

src/lib.rs

@@ -413,6 +413,42 @@ mod tests {
     });
   }
 
+  #[test]
+  pub fn test_outline() {
+    test(r#"
+      .foo {
+        outline-width: 2px;
+        outline-style: solid;
+        outline-color: blue;
+      }
+    "#, indoc! {r#"
+      .foo {
+        outline: 2px solid #00f;
+      }"#
+    });
+
+    test(r#"
+      .foo {
+        outline: 2px solid blue;
+      }
+    "#, indoc! {r#"
+      .foo {
+        outline: 2px solid #00f;
+      }"#
+    });
+
+    test(r#"
+      .foo {
+        outline: 2px solid red;
+        outline-color: blue;
+      }
+    "#, indoc! {r#"
+      .foo {
+        outline: 2px solid #00f;
+      }"#
+    });
+  }
+
   #[test]
   pub fn test_margin() {
     test(r#"

src/parser.rs

@@ -379,12 +379,13 @@ impl ToCss for StyleRule {
 impl StyleRule {
   pub fn minify(&mut self) {
     use crate::values::border::*;
-    use crate::properties::margin_padding::*;
+    use crate::properties::{margin_padding::*, outline::*};
     use crate::properties::background::BackgroundHandler;
 
     // TODO: somehow macro-ify this
     let mut background_handler = BackgroundHandler::default();
     let mut border_handler = BorderHandler::default();
+    let mut outline_handler = OutlineHandler::default();
     let mut margin_handler = MarginHandler::default();
     let mut padding_handler = PaddingHandler::default();
     let mut scroll_margin_handler = MarginHandler::default();
@@ -394,6 +395,7 @@ impl StyleRule {
     for decl in self.declarations.iter() {
       if !background_handler.handle_property(decl) &&
         !border_handler.handle_property(decl) && 
+        !outline_handler.handle_property(decl) &&
         !margin_handler.handle_property(decl) && 
         !padding_handler.handle_property(decl) &&
         !scroll_margin_handler.handle_property(decl) && 
@@ -405,6 +407,7 @@ impl StyleRule {
 
     decls.extend(background_handler.finalize());
     decls.extend(border_handler.finalize());
+    decls.extend(outline_handler.finalize());
     decls.extend(margin_handler.finalize());
     decls.extend(padding_handler.finalize());
     decls.extend(scroll_margin_handler.finalize());

src/properties/mod.rs

@@ -1,10 +1,12 @@
 mod custom;
 pub mod margin_padding;
 pub mod background;
+pub mod outline;
 
 use cssparser::*;
 use custom::*;
 use background::*;
+use outline::*;
 use crate::values::{image::*, length::*, border::*, border_image::*, border_radius::*, rect::*, color::*};
 use super::values::traits::{Parse, ToCss};
 
@@ -122,6 +124,11 @@ pub enum Property {
   BorderInlineStart(Border),
   BorderInlineEnd(Border),
 
+  Outline(Outline),
+  OutlineColor(CssColor),
+  OutlineStyle(OutlineStyle),
+  OutlineWidth(BorderSideWidth),
+
   MarginTop(LengthPercentageOrAuto),
   MarginBottom(LengthPercentageOrAuto),
   MarginLeft(LengthPercentageOrAuto),
@@ -169,6 +176,9 @@ pub enum Property {
   ScrollPaddingBlock(Size2D<LengthPercentageOrAuto>),
   ScrollPaddingInline(Size2D<LengthPercentageOrAuto>),
   ScrollPadding(Rect<LengthPercentageOrAuto>),
+
+  // shorthands: transitions, animations, columns, font, font-variant, list-style
+  // flex, grid, gap, place-items, place-self, inset
 }
 
 impl Property {
@@ -279,6 +289,10 @@ impl Property {
       "border-end-start-radius" => property!(BorderEndStartRadius, Size2D),
       "border-end-end-radius" => property!(BorderEndEndRadius, Size2D),
       "border-radius" => property!(BorderRadius, BorderRadius),
+      "outline" => property!(Outline, Outline),
+      "outline-color" => property!(OutlineColor, CssColor),
+      "outline-style" => property!(OutlineStyle, OutlineStyle),
+      "outline-width" => property!(OutlineWidth, BorderSideWidth),
       "margin-left" => property!(MarginLeft, LengthPercentageOrAuto),
       "margin-right" => property!(MarginRight, LengthPercentageOrAuto),
       "margin-top" => property!(MarginTop, LengthPercentageOrAuto),
@@ -447,6 +461,10 @@ impl Property {
       BorderEndStartRadius(val) => property!("border-end-start-radius", val),
       BorderEndEndRadius(val) => property!("border-end-end-radius", val),
       BorderRadius(val) => property!("border-radius", val),
+      Outline(val) => property!("outline", val),
+      OutlineColor(val) => property!("outline-color", val),
+      OutlineStyle(val) => property!("outline-style", val),
+      OutlineWidth(val) => property!("outline-width", val),
       MarginLeft(val) => property!("margin-left", val),
       MarginRight(val) => property!("margin-right", val),
       MarginTop(val) => property!("margin-top", val),

src/properties/outline.rs

@@ -0,0 +1,94 @@
+use cssparser::*;
+use crate::values::border::{BorderStyle, GenericBorder, BorderSideWidth};
+use crate::values::traits::{Parse, ToCss, PropertyHandler};
+use crate::values::color::CssColor;
+use super::Property;
+
+#[derive(Debug, Clone, PartialEq)]
+pub enum OutlineStyle {
+  Auto,
+  BorderStyle(BorderStyle)
+}
+
+impl Parse for OutlineStyle {
+  fn parse<'i, 't>(input: &mut Parser<'i, 't>) -> Result<Self, ParseError<'i, ()>> {
+    if let Ok(border_style) = input.try_parse(BorderStyle::parse) {
+      return Ok(OutlineStyle::BorderStyle(border_style))
+    }
+
+    input.expect_ident_matching("auto")?;
+    Ok(OutlineStyle::Auto)
+  }
+}
+
+impl ToCss for OutlineStyle {
+  fn to_css<W>(&self, dest: &mut W) -> std::fmt::Result where W: std::fmt::Write {
+    match self {
+      OutlineStyle::Auto => dest.write_str("auto"),
+      OutlineStyle::BorderStyle(border_style) => border_style.to_css(dest)
+    }
+  }
+}
+
+impl Default for OutlineStyle {
+  fn default() -> OutlineStyle {
+    OutlineStyle::BorderStyle(BorderStyle::None)
+  }
+}
+
+pub type Outline = GenericBorder<OutlineStyle>;
+
+#[derive(Default, Debug)]
+pub struct OutlineHandler {
+  pub width: Option<BorderSideWidth>,
+  pub style: Option<OutlineStyle>,
+  pub color: Option<CssColor>
+}
+
+impl PropertyHandler for OutlineHandler {
+  fn handle_property(&mut self, property: &Property) -> bool {
+    use Property::*;
+
+    match property {
+      OutlineColor(val) => self.color = Some(val.clone()),
+      OutlineStyle(val) => self.style = Some(val.clone()),
+      OutlineWidth(val) => self.width = Some(val.clone()),
+      Outline(val) => {
+        self.color = Some(val.color.clone());
+        self.style = Some(val.style.clone());
+        self.width = Some(val.width.clone());
+      }
+      _ => return false
+    }
+
+    true
+  }
+
+  fn finalize(&mut self) -> Vec<Property> {
+    let mut decls = vec![];
+    let width = std::mem::take(&mut self.width);
+    let style = std::mem::take(&mut self.style);
+    let color = std::mem::take(&mut self.color);
+    if width.is_some() && style.is_some() && color.is_some() {
+      decls.push(Property::Outline(Outline {
+        width: width.unwrap(),
+        style: style.unwrap(),
+        color: color.unwrap()
+      }))
+    } else {
+      if let Some(color) = color {
+        decls.push(Property::OutlineColor(color))
+      }
+
+      if let Some(style) = style {
+        decls.push(Property::OutlineStyle(style))
+      }
+
+      if let Some(width) = width {
+        decls.push(Property::OutlineWidth(width))
+      }
+    }
+
+    decls
+  }
+}

src/values/border.rs

@@ -20,6 +20,12 @@ pub enum BorderSideWidth {
   Length(Length),
 }
 
+impl Default for BorderSideWidth {
+  fn default() -> BorderSideWidth {
+    BorderSideWidth::Medium
+  }
+}
+
 impl Parse for BorderSideWidth {
   fn parse<'i, 't>(input: &mut Parser<'i, 't>) -> Result<Self, ParseError<'i, ()>> {
     if let Ok(length) = input.try_parse(|i| Length::parse(i)) {
@@ -60,24 +66,30 @@ enum_property!(BorderStyle,
   Double
 );
 
+impl Default for BorderStyle {
+  fn default() -> BorderStyle {
+    BorderStyle::None
+  }
+}
+
 #[derive(Debug, Clone, PartialEq)]
-pub struct Border {
+pub struct GenericBorder<S> {
   pub width: BorderSideWidth,
-  pub style: BorderStyle,
+  pub style: S,
   pub color: CssColor
 }
 
-impl Default for Border {
-  fn default() -> Border {
-    Border {
+impl<S: Default> Default for GenericBorder<S> {
+  fn default() -> GenericBorder<S> {
+    GenericBorder {
       width: BorderSideWidth::Medium,
-      style: BorderStyle::None,
+      style: S::default(),
       color: CssColor::current_color()
     }
   }
 }
 
-impl Parse for Border {
+impl<S: Parse + Default> Parse for GenericBorder<S> {
   fn parse<'i, 't>(input: &mut Parser<'i, 't>) -> Result<Self, ParseError<'i, ()>> {
     // Order doesn't matter...
     let mut color = None;
@@ -92,7 +104,7 @@ impl Parse for Border {
             }
         }
         if style.is_none() {
-            if let Ok(value) = input.try_parse(BorderStyle::parse) {
+            if let Ok(value) = input.try_parse(S::parse) {
                 style = Some(value);
                 any = true;
                 continue
@@ -108,9 +120,9 @@ impl Parse for Border {
         break
     }
     if any {
-      Ok(Border {
+      Ok(GenericBorder {
         width: width.unwrap_or(BorderSideWidth::Medium),
-        style: style.unwrap_or(BorderStyle::None),
+        style: style.unwrap_or_default(),
         color: color.unwrap_or_else(|| CssColor::current_color())
       })
     } else {
@@ -119,13 +131,13 @@ impl Parse for Border {
   }
 }
 
-impl ToCss for Border {
+impl<S: ToCss + Default + PartialEq> ToCss for GenericBorder<S> {
   fn to_css<W>(&self, dest: &mut W) -> std::fmt::Result where W: std::fmt::Write {
-    if self.width != BorderSideWidth::Medium {
+    if self.width != BorderSideWidth::default() {
       self.width.to_css(dest)?;
       dest.write_str(" ")?;
     }
-    if self.style != BorderStyle::None {
+    if self.style != S::default() {
       self.style.to_css(dest)?;
       dest.write_str(" ")?;
     }
@@ -136,6 +148,7 @@ impl ToCss for Border {
   }
 }
 
+pub type Border = GenericBorder<BorderStyle>;
 
 #[derive(Default, Debug, PartialEq)]
 pub struct BorderShorthand {

test.js

@@ -12,6 +12,10 @@ css.transform({
   background-position-y: top 20px, 15px;
   background-size: 50px 50px, auto;
   background-repeat: repeat no-repeat, no-repeat;
+  // outline: 2px auto red;
+  outline-color: blue;
+  outline-width: 2px;
+  outline-style: solid;
   // background: url("chess.png") 40% / 10em gray, url(img.png);
   color: blue;
   width: 250px;