Grid placement shorthands

Author: devongovett

src/lib.rs

@@ -6280,6 +6280,27 @@ mod tests {
     minify_test(".foo { grid-row-end: span 1 some-line }", ".foo{grid-row-end:span some-line}");
     minify_test(".foo { grid-column-start: span 1 some-line }", ".foo{grid-column-start:span some-line}");
     minify_test(".foo { grid-column-end: span 1 some-line }", ".foo{grid-column-end:span some-line}");
+
+    minify_test(".foo { grid-row: 1 }", ".foo{grid-row:1}");
+    minify_test(".foo { grid-row: 1 / auto }", ".foo{grid-row:1}");
+    minify_test(".foo { grid-row: 1 / 1 }", ".foo{grid-row:1/1}");
+    minify_test(".foo { grid-row: 1 / 3 }", ".foo{grid-row:1/3}");
+    minify_test(".foo { grid-row: 1 / span 2 }", ".foo{grid-row:1/span 2}");
+    minify_test(".foo { grid-row: main-start }", ".foo{grid-row:main-start}");
+    minify_test(".foo { grid-row: main-start / main-end }", ".foo{grid-row:main-start/main-end}");
+    minify_test(".foo { grid-row: main-start / main-start }", ".foo{grid-row:main-start}");
+    minify_test(".foo { grid-column: 1 / auto }", ".foo{grid-column:1}");
+
+    minify_test(".foo { grid-area: a }", ".foo{grid-area:a}");
+    minify_test(".foo { grid-area: a / a / a / a }", ".foo{grid-area:a}");
+    minify_test(".foo { grid-area: a / b / a / b }", ".foo{grid-area:a/b}");
+    minify_test(".foo { grid-area: a / b / c / b }", ".foo{grid-area:a/b/c}");
+    minify_test(".foo { grid-area: a / b / c / d }", ".foo{grid-area:a/b/c/d}");
+
+    minify_test(".foo { grid-area: auto / auto / auto / auto }", ".foo{grid-area:auto}");
+    minify_test(".foo { grid-area: 1 / auto }", ".foo{grid-area:1}");
+    minify_test(".foo { grid-area: 1 / 2 / 3 / 4 }", ".foo{grid-area:1/2/3/4}");
+    minify_test(".foo { grid-area: 1 / 1 / 1 / 1 }", ".foo{grid-area:1/1/1/1}");
   }
 
   #[test]

src/properties/grid.rs

@@ -1024,3 +1024,143 @@ impl ToCss for GridLine {
     }
   }
 }
+
+impl GridLine {
+  fn default_end_value(&self) -> GridLine {
+    if matches!(self, GridLine::Ident(_)) {
+      self.clone()
+    } else {
+      GridLine::Auto
+    }
+  }
+
+  fn can_omit_end(&self, end: &GridLine) -> bool {
+    if let GridLine::Ident(start_id) = &self {
+      matches!(end, GridLine::Ident(end_id) if end_id == start_id)
+    } else if matches!(end, GridLine::Auto) {
+      true
+    } else {
+      false
+    }
+  }
+}
+
+/// https://drafts.csswg.org/css-grid-2/#placement-shorthands
+#[derive(Debug, Clone, PartialEq)]
+pub struct GridPlacement {
+  start: GridLine,
+  end: GridLine
+}
+
+impl Parse for GridPlacement {
+  fn parse<'i, 't>(input: &mut Parser<'i, 't>) -> Result<Self, ParseError<'i, ()>> {
+    let start = GridLine::parse(input)?;
+    let end = if input.try_parse(|input| input.expect_delim('/')).is_ok() {
+      GridLine::parse(input)?
+    } else {
+      start.default_end_value()
+    };
+
+    Ok(GridPlacement {
+      start,
+      end
+    })
+  }
+}
+
+impl ToCss for GridPlacement {
+  fn to_css<W>(&self, dest: &mut Printer<W>) -> std::fmt::Result where W: std::fmt::Write {
+    self.start.to_css(dest)?;
+
+    if !self.start.can_omit_end(&self.end) {
+      dest.delim('/', true)?;
+      self.end.to_css(dest)?;
+    }
+    Ok(())
+  }
+}
+
+/// https://drafts.csswg.org/css-grid-2/#propdef-grid-area
+#[derive(Debug, Clone, PartialEq)]
+pub struct GridArea {
+  row_start: GridLine,
+  column_start: GridLine,
+  row_end: GridLine,
+  column_end: GridLine
+}
+
+impl Parse for GridArea {
+  fn parse<'i, 't>(input: &mut Parser<'i, 't>) -> Result<Self, ParseError<'i, ()>> {
+    let row_start = GridLine::parse(input)?;
+    let column_start = if input.try_parse(|input| input.expect_delim('/')).is_ok() {
+      GridLine::parse(input)?
+    } else {
+      let opposite = row_start.default_end_value();
+      return Ok(GridArea {
+        row_start,
+        column_start: opposite.clone(),
+        row_end: opposite.clone(),
+        column_end: opposite
+      })
+    };
+
+    let row_end = if input.try_parse(|input| input.expect_delim('/')).is_ok() {
+      GridLine::parse(input)?
+    } else {
+      let row_end = row_start.default_end_value();
+      let column_end = column_start.default_end_value();
+      return Ok(GridArea {
+        row_start,
+        column_start,
+        row_end,
+        column_end
+      })
+    };
+
+    let column_end = if input.try_parse(|input| input.expect_delim('/')).is_ok() {
+      GridLine::parse(input)?
+    } else {
+      let column_end = column_start.default_end_value();
+      return Ok(GridArea {
+        row_start,
+        column_start,
+        row_end,
+        column_end
+      })
+    };
+
+    Ok(GridArea {
+      row_start,
+      column_start,
+      row_end,
+      column_end
+    })
+  }
+}
+
+impl ToCss for GridArea {
+  fn to_css<W>(&self, dest: &mut Printer<W>) -> std::fmt::Result where W: std::fmt::Write {
+    self.row_start.to_css(dest)?;
+
+    let can_omit_column_end = self.column_start.can_omit_end(&self.column_end);
+    let can_omit_row_end = can_omit_column_end && self.row_start.can_omit_end(&self.row_end);
+    let can_omit_column_start = can_omit_row_end && self.row_start.can_omit_end(&self.column_start);
+
+    if !can_omit_column_start {
+      dest.delim('/', true)?;
+      self.column_start.to_css(dest)?;
+    }
+
+    if !can_omit_row_end {
+      dest.delim('/', true)?;
+      self.row_end.to_css(dest)?;
+    }
+
+    if !can_omit_column_end {
+      dest.delim('/', true)?;
+      self.column_end.to_css(dest)?;
+    }
+
+    Ok(())
+  }
+}

src/properties/mod.rs

@@ -423,6 +423,12 @@ define_properties! {
   "grid-column-start": GridColumnStart(GridLine),
   #[cfg(feature = "grid")]
   "grid-column-end": GridColumnEnd(GridLine),
+  #[cfg(feature = "grid")]
+  "grid-row": GridRow(GridPlacement),
+  #[cfg(feature = "grid")]
+  "grid-column": GridColumn(GridPlacement),
+  #[cfg(feature = "grid")]
+  "grid-area": GridArea(GridArea),
 
   "margin-top": MarginTop(LengthPercentageOrAuto),
   "margin-bottom": MarginBottom(LengthPercentageOrAuto),