Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: implement CSS columns #304

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,5 @@ dist/
.parcel-cache
node/*.flow
artifacts
npm
npm
.idea
9 changes: 7 additions & 2 deletions selectors/parser.rs
Original file line number Diff line number Diff line change
Expand Up @@ -1107,7 +1107,7 @@ pub enum Component<'i, Impl: SelectorImpl<'i>> {
Scope,
NthChild(i32, i32),
NthLastChild(i32, i32),
NthCol(i32, i32), // https://www.w3.org/TR/selectors-4/#the-nth-col-pseudo
NthCol(i32, i32), // https://www.w3.org/TR/selectors-4/#the-nth-col-pseudo
NthLastCol(i32, i32), // https://www.w3.org/TR/selectors-4/#the-nth-last-col-pseudo
NthOfType(i32, i32),
NthLastOfType(i32, i32),
Expand Down Expand Up @@ -1606,7 +1606,12 @@ impl<'i, Impl: SelectorImpl<'i>> ToCss for Component<'i, Impl> {
FirstOfType => dest.write_str(":first-of-type"),
LastOfType => dest.write_str(":last-of-type"),
OnlyOfType => dest.write_str(":only-of-type"),
NthChild(a, b) | NthLastChild(a, b) | NthOfType(a, b) | NthLastOfType(a, b) | NthCol(a, b) | NthLastCol(a, b) => {
NthChild(a, b)
| NthLastChild(a, b)
| NthOfType(a, b)
| NthLastOfType(a, b)
| NthCol(a, b)
| NthLastCol(a, b) => {
match *self {
NthChild(_, _) => dest.write_str(":nth-child(")?,
NthLastChild(_, _) => dest.write_str(":nth-last-child(")?,
Expand Down
5 changes: 5 additions & 0 deletions src/declaration.rs
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ use crate::properties::{
animation::AnimationHandler,
background::BackgroundHandler,
border::BorderHandler,
columns::ColumnsHandler,
contain::ContainerHandler,
display::DisplayHandler,
flex::FlexHandler,
Expand Down Expand Up @@ -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>,
Expand Down Expand Up @@ -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(),
Expand Down Expand Up @@ -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)
}
Expand Down Expand Up @@ -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);
}
Expand Down
68 changes: 68 additions & 0 deletions src/lib.rs
Original file line number Diff line number Diff line change
Expand Up @@ -5982,6 +5982,71 @@ 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 { columns: 200px; column-count: 2; }", ".foo{columns:200px 2}");
minify_test(
".foo { columns: 200px; column-count: 99999988888; }",
".foo{columns:200px 2147483647}",
);
minify_test(".foo { columns: auto; column-count: 3; }", ".foo{columns:3}");
minify_test(".foo { column-count: auto; columns: 200px; }", ".foo{columns:200px}");
minify_test(".foo { column-count: auto; columns: 3; }", ".foo{columns:3}");
minify_test(
".foo { column-count: auto; columns: 100px 3; }",
".foo{columns:100px 3}",
);
minify_test(".foo { column-width: 300px; columns: 2 auto; }", ".foo{columns:2}");
minify_test(".foo { column-width: 300px; columns: 2; }", ".foo{columns:2}");

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(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)}",
);

minify_test(".foo { column-count: auto; }", ".foo{column-count:auto}");
minify_test(".foo { column-count: 1; }", ".foo{column-count:1}");

// 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}",
);

// TODO: Supprot calc
// minify_test(".foo { column-count: min(10, 3); }", ".foo{column-count:3}");
// minify_test(".foo { column-count: calc(10 / 5); }", ".foo{column-count:2}");
// minify_test(".foo { column-count: calc(2 * 3); }", ".foo{column-count:6}");
// minify_test(".foo { column-count: calc(infinity * 1); }", ".foo{column-count:2147483647}");

// Invalid values
// minify_test(".foo { column-count: 1.4; }", ".foo{column-count:1.4}");
// minify_test(".foo { column-count: 1.5; }", ".foo{column-count:1.5}");
}

#[test]
fn test_calc() {
minify_test(".foo { width: calc(20px * 2) }", ".foo{width:40px}");
Expand Down Expand Up @@ -21926,6 +21991,9 @@ mod tests {
minify_test(".foo { z-index: 999999 }", ".foo{z-index:999999}");
minify_test(".foo { z-index: 9999999 }", ".foo{z-index:9999999}");
minify_test(".foo { z-index: -9999999 }", ".foo{z-index:-9999999}");
minify_test(".foo { z-index: calc(10 * 2) }", ".foo{z-index:calc(10*2)}");
minify_test(".foo { z-index: 2147483647 }", ".foo{z-index:2147483647}");
minify_test(".foo { z-index: auto }", ".foo{z-index:auto}");
}

#[test]
Expand Down
109 changes: 109 additions & 0 deletions src/properties/columns.rs
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
//! CSS properties related to Multi-column Layout.
//! https://www.w3.org/TR/css-multicol-1/

use super::{Property, PropertyId};
use crate::context::PropertyHandlerContext;
use crate::declaration::{DeclarationBlock, DeclarationList};
use crate::error::{ParserError, PrinterError};
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::{IntegerOrAuto, Length, LengthOrAuto, LengthValue};
use cssparser::*;
use std::ops::Not;

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 {
/// 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 state = input.state();
let with_or_count = LengthOrAuto::parse(input)?;

if let LengthOrAuto::Length(Length::Value(LengthValue::Unitless(..))) = with_or_count {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Rather than parsing as a unitless length, you could instead first try parsing the column count, and if that fails, try parsing the length. When parsing shorthands where order doesn't matter, it can be useful to structure the code using a loop, trying to parse each property until values are found. There are many examples, here's one.

// first is unitless, so it must be column-count
// reparse with column-count
input.reset(&state);
let count = IntegerOrAuto::parse(input)?;
let width = input.try_parse(|input| LengthOrAuto::parse(input)).unwrap_or_default();

return Ok(Columns { width, count });
} else if matches!(with_or_count, LengthOrAuto::Auto).not()
&& matches!(
with_or_count,
LengthOrAuto::Length(Length::Value(LengthValue::Unitless(..)))
)
.not()
{
// first is neither unitless nor auto, so it must be column-width
let count = input.try_parse(|input| IntegerOrAuto::parse(input)).unwrap_or_default();

return Ok(Columns {
width: with_or_count,
count,
});
}

// first is auto, check second
let state = input.state();
let count = input.try_parse(|input| LengthOrAuto::parse(input)).unwrap_or_default();

if let LengthOrAuto::Auto = count {
// second is auto, so first must be column-width
Ok(Columns {
width: LengthOrAuto::Auto,
count: IntegerOrAuto::Auto,
})
} else if matches!(count, LengthOrAuto::Length(Length::Value(LengthValue::Unitless(..)))).not() {
// second is not unitless, so first must be column-count
// reparse with column-with
Ok(Columns {
width: count,
count: IntegerOrAuto::Auto,
})
} else {
// second is unitless, so first must be column-width
input.reset(&state);
let count = IntegerOrAuto::parse(input)?;

Ok(Columns {
width: with_or_count,
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),
});
7 changes: 7 additions & 0 deletions src/properties/mod.rs
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,7 @@ pub mod border;
pub mod border_image;
pub mod border_radius;
pub mod box_shadow;
pub mod columns;
pub mod contain;
pub mod css_modules;
pub mod custom;
Expand Down Expand Up @@ -143,6 +144,7 @@ use border::*;
use border_image::*;
use border_radius::*;
use box_shadow::*;
use columns::*;
use contain::*;
use css_modules::*;
use cssparser::*;
Expand Down Expand Up @@ -789,6 +791,11 @@ define_properties! {
"overflow": Overflow(Overflow) shorthand: true,
"overflow-x": OverflowX(OverflowKeyword),
"overflow-y": OverflowY(OverflowKeyword),

"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,

// https://www.w3.org/TR/2020/WD-css-position-3-20200519
Expand Down
4 changes: 2 additions & 2 deletions src/properties/text.rs
Original file line number Diff line number Diff line change
Expand Up @@ -1300,11 +1300,11 @@ impl ToCss for TextShadow {
dest.write_char(' ')?;
self.y_offset.to_css(dest)?;

if self.blur != Length::zero() || self.spread != Length::zero() {
if !self.blur.is_zero() || !self.spread.is_zero() {
dest.write_char(' ')?;
self.blur.to_css(dest)?;

if self.spread != Length::zero() {
if !self.spread.is_zero() {
dest.write_char(' ')?;
self.spread.to_css(dest)?;
}
Expand Down
Loading