feat: implement columns shorthand

src/declaration.rs

@@ -15,6 +15,7 @@ use crate::properties::{
  background::BackgroundHandler,
  border::BorderHandler,
  contain::ContainerHandler,
+ columns::ColumnsHandler,
  display::DisplayHandler,
  flex::FlexHandler,
  font::FontHandler,
@@ -463,6 +464,7 @@ pub(crate) struct DeclarationHandler<'i> {
  box_shadow: BoxShadowHandler,
  mask: MaskHandler<'i>,
  container: ContainerHandler<'i>,
+ columns: ColumnsHandler,
  fallback: FallbackHandler,
  prefix: PrefixHandler,
  decls: DeclarationList<'i>,
@@ -495,6 +497,7 @@ impl<'i> DeclarationHandler<'i> {
  box_shadow: BoxShadowHandler::new(targets),
  mask: MaskHandler::default(),
  container: ContainerHandler::default(),
+ columns: ColumnsHandler::default(),
  fallback: FallbackHandler::new(targets),
  prefix: PrefixHandler::new(targets),
  decls: DeclarationList::new(),
@@ -536,6 +539,7 @@ impl<'i> DeclarationHandler<'i> {
  || self.box_shadow.handle_property(property, &mut self.decls, context)
  || self.mask.handle_property(property, &mut self.decls, context)
  || self.container.handle_property(property, &mut self.decls, context)
+ || self.columns.handle_property(property, &mut self.decls, context)
  || self.fallback.handle_property(property, &mut self.decls, context)
  || self.prefix.handle_property(property, &mut self.decls, context)
  }
@@ -565,6 +569,7 @@ impl<'i> DeclarationHandler<'i> {
  self.box_shadow.finalize(&mut self.decls, context);
  self.mask.finalize(&mut self.decls, context);
  self.container.finalize(&mut self.decls, context);
+ self.columns.finalize(&mut self.decls, context);
  self.fallback.finalize(&mut self.decls, context);
  self.prefix.finalize(&mut self.decls, context);
  }

src/lib.rs

@@ -5984,9 +5984,16 @@ mod tests {
 
  #[test]
  fn test_columns() {
+ // columns shorthand
+ minify_test(".foo { column-width: 200px; column-count: 2 }", ".foo{columns:200px 2}");
+ minify_test(".foo { column-width: auto; column-count: 3 }", ".foo{columns:3}");
+ minify_test(".foo { column-width: 10em; column-count: auto }", ".foo{columns:10em}");
+ minify_test(".foo { column-width: calc(80px * 2); column-count: auto }", ".foo{columns:160px}");
+ minify_test(".foo { column-count: auto; column-width: 20vw; }", ".foo{columns:20vw}");
+
  minify_test(".foo { column-width: auto; }", ".foo{column-width:auto}");
  minify_test(".foo { column-width: 0px; }", ".foo{column-width:0}");
- minify_test(".foo { column-width: calc(20px * 2); }", ".foo{column-width:40px}");
+ minify_test(".foo { column-width: calc(80px * 2); }", ".foo{column-width:160px}");
  minify_test(".foo { column-width: calc(100% - 30px); }", ".foo{column-width:calc(100% - 30px)}");
  minify_test(".foo { column-width: clamp(1em, 2px, 4vh); }", ".foo{column-width:clamp(1em,2px,4vh)}");
 
@@ -5996,7 +6003,6 @@ mod tests {
  // Test minimum and maximum values: Chrome/Safari is 65535, Firefox is 1000.
  minify_test(".foo { column-count: 123456789000; }", ".foo{column-count:2147483647}");
  minify_test(".foo { column-count: -123456789000; }", ".foo{column-count:-2147483648}");
- // minify_test("@supports ( column-width: 0px ) { .bar { column-width: 0px; } }", "@supports (column-width: 0px){.bar{column-width:0}}");
 
  // TODO: Supprot calc
  // minify_test(".foo { column-count: min(10, 3); }", ".foo{column-count:3}");
@@ -8409,7 +8415,6 @@ mod tests {
  minify_test(".foo { animation: none, none }", ".foo{animation:none,none}");
  minify_test(".foo { animation: \"none\" none }", ".foo{animation:\"none\"}");
  minify_test(".foo { animation: none none }", ".foo{animation:none}");
- minify_test(".foo { animation: none none .3s }", ".foo{animation:none none .3s}");
 
  // Test animation-name + animation-fill-mode
  minify_test(

src/properties/border.rs

@@ -19,24 +19,6 @@ use crate::values::rect::Rect;
 use crate::values::size::Size2D;
 use cssparser::*;
 
-
-enum_property! {
- /// A [`<border-collapse>`](https://www.w3.org/TR/CSS22/tables.html#propdef-border-collapse)
- /// property.
- pub enum BorderCollapse {
- /// The `collapse` value.
- Collapse,
- /// The `separate` value.
- Separate,
- }
-}
-
-impl Default for BorderCollapse {
- fn default() -> BorderCollapse {
- BorderCollapse::Separate
- }
-}
-
 /// A value for the [border-width](https://www.w3.org/TR/css-backgrounds-3/#border-width) property.
 #[derive(Debug, Clone, PartialEq)]
 #[cfg_attr(

src/properties/columns.rs

@@ -2,23 +2,60 @@
 //! https://www.w3.org/TR/css-multicol-1/
 
 use super::{Property, PropertyId};
-use crate::compat::Feature;
 use crate::context::PropertyHandlerContext;
 use crate::declaration::{DeclarationBlock, DeclarationList};
 use crate::error::{ParserError, PrinterError};
-use crate::macros::{define_shorthand, enum_property};
+use crate::macros::{define_shorthand, shorthand_handler};
 use crate::printer::Printer;
 use crate::targets::Browsers;
 use crate::traits::{Parse, PropertyHandler, Shorthand, ToCss};
+use crate::values::length::{LengthOrAuto, IntegerOrAuto};
 use cssparser::*;
 
 define_shorthand! {
  /// A value for the [columns](https://www.w3.org/TR/css-multicol-1/#columns) shorthand property.
  /// columns = <'column-width'> || <'column-count'>
  pub struct Columns {
- /// column-width
- a: ColumnWidth(),
- /// column-count
- b: ColumnCount(),
+ /// The column-width property.
+ width: ColumnWidth(LengthOrAuto),
+ /// The column-count property.
+ count: ColumnCount(IntegerOrAuto),
  }
 }
+
+impl<'i> Parse<'i> for Columns {
+ fn parse<'t>(input: &mut Parser<'i, 't>) -> Result<Self, ParseError<'i, ParserError<'i>>> {
+ let width = LengthOrAuto::parse(input)?;
+ let count = if input.try_parse(|input| IntegerOrAuto::parse(input)).is_ok() {
+ IntegerOrAuto::parse(input)?
+ } else {
+ IntegerOrAuto::default()
+ };
+ Ok(Columns { width, count })
+ }
+}
+
+impl<'i> ToCss for Columns {
+ fn to_css<W>(&self, dest: &mut Printer<W>) -> Result<(), PrinterError>
+ where
+ W: std::fmt::Write,
+ {
+ if self.width != LengthOrAuto::default() {
+ self.width.to_css(dest)?;
+ }
+
+ if self.width != LengthOrAuto::default() && self.count != IntegerOrAuto::default() {
+ dest.write_str(" ")?;
+ }
+
+ if self.count != IntegerOrAuto::default() {
+ self.count.to_css(dest)?;
+ }
+ Ok(())
+ }
+}
+
+shorthand_handler!(ColumnsHandler -> Columns {
+ width: ColumnWidth(LengthOrAuto),
+ count: ColumnCount(IntegerOrAuto),
+});

src/properties/mod.rs

@@ -110,6 +110,7 @@ pub mod list;
 pub(crate) mod margin_padding;
 pub mod masking;
 pub mod outline;
+pub mod columns;
 pub mod overflow;
 pub mod position;
 pub(crate) mod prefix_handler;
@@ -157,6 +158,7 @@ use list::*;
 use margin_padding::*;
 use masking::*;
 use outline::*;
+use columns::*;
 use overflow::*;
 use size::*;
 use smallvec::{smallvec, SmallVec};
@@ -790,10 +792,9 @@ define_properties! {
  "overflow-x": OverflowX(OverflowKeyword),
  "overflow-y": OverflowY(OverflowKeyword),
 
- // TODO: `columns` shorthand
- // "columns": Columns(Columns) shorthand: true,
- "column-width": ColumnWidth(LengthOrAuto), // "auto | <length [0,∞]>"
- "column-count": ColumnCount(IntegerOrAuto), // "auto | <integer [1,∞]>"
+ "columns": Columns(Columns) shorthand: true, // columns = <'column-width'> || <'column-count'>
+ "column-width": ColumnWidth(LengthOrAuto), // auto | <length [0,∞]>
+ "column-count": ColumnCount(IntegerOrAuto), // auto | <integer [1,∞]>
 
  "text-overflow": TextOverflow(TextOverflow, VendorPrefix) / O,
 
@@ -812,7 +813,6 @@ define_properties! {
  "inset": Inset(Inset) shorthand: true,
 
  "border-spacing": BorderSpacing(Size2D<Length>),
- // "border-collapse": BorderCollapse(BorderCollapse),
 
  "border-top-color": BorderTopColor(CssColor) [logical_group: BorderColor, category: Physical],
  "border-bottom-color": BorderBottomColor(CssColor) [logical_group: BorderColor, category: Physical],