Skip to content

Commit

Permalink
Fix logical shorthand compatibility
Browse files Browse the repository at this point in the history 
Fixes #171
  • Loading branch information
@devongovett
devongovett committed May 10, 2022
1 parent 1b947b4 commit 0d7e4c6
Show file tree
Hide file tree
Showing 5 changed files with 225 additions and 6 deletions.
3 changes: 3 additions & 0 deletions scripts/build-prefixes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -212,9 +212,12 @@ let mdnFeatures = {
mediaRangeSyntax: mdn.css['at-rules'].media.range_syntax.__compat.support,
mediaIntervalSyntax: {}, // currently no browsers
logicalBorders: mdn.css.properties['border-inline-start'].__compat.support,
logicalBorderShorthand: mdn.css.properties['border-inline'].__compat.support,
logicalBorderRadius: mdn.css.properties['border-start-start-radius'].__compat.support,
logicalMargin: mdn.css.properties['margin-inline-start'].__compat.support,
logicalMarginShorthand: mdn.css.properties['margin-inline'].__compat.support,
logicalPadding: mdn.css.properties['padding-inline-start'].__compat.support,
logicalPaddingShorthand: mdn.css.properties['padding-inline'].__compat.support,
logicalInset: mdn.css.properties['inset-inline-start'].__compat.support,
logicalSize: mdn.css.properties['inline-size'].__compat.support,
logicalTextAlign: mdn.css.properties['text-align']['flow_relative_values_start_and_end'].__compat.support,
Expand Down
48 changes: 48 additions & 0 deletions src/compat.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,10 +41,13 @@ pub enum Feature {
LabColors,
LangList,
LogicalBorderRadius,
LogicalBorderShorthand,
LogicalBorders,
LogicalInset,
LogicalMargin,
LogicalMarginShorthand,
LogicalPadding,
LogicalPaddingShorthand,
LogicalSize,
LogicalTextAlign,
MediaIntervalSyntax,
Expand Down Expand Up @@ -1547,6 +1550,51 @@ impl Feature {
return false;
}
}
Feature::LogicalBorderShorthand | Feature::LogicalMarginShorthand | Feature::LogicalPaddingShorthand => {
if let Some(version) = browsers.chrome {
if version < 5701632 {
return false;
}
}
if let Some(version) = browsers.edge {
if version < 5701632 {
return false;
}
}
if let Some(version) = browsers.firefox {
if version < 4325376 {
return false;
}
}
if let Some(version) = browsers.opera {
if version < 3145728 {
return false;
}
}
if let Some(version) = browsers.safari {
if version < 917760 {
return false;
}
}
if let Some(version) = browsers.ios_saf {
if version < 918784 {
return false;
}
}
if let Some(version) = browsers.samsung {
if version < 917504 {
return false;
}
}
if let Some(version) = browsers.android {
if version < 5701632 {
return false;
}
}
if browsers.ie.is_some() {
return false;
}
}
Feature::LogicalBorderRadius => {
if let Some(version) = browsers.chrome {
if version < 5832704 {
Expand Down
154 changes: 154 additions & 0 deletions src/lib.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1425,6 +1425,45 @@ mod tests {
..Browsers::default()
},
);

prefix_test(
r#"
.foo {
border-inline-start: 2px solid red;
border-inline-end: 2px solid red;
}
"#,
indoc! {r#"
.foo {
border-inline-start: 2px solid red;
border-inline-end: 2px solid red;
}
"#
},
Browsers {
safari: Some(13 << 16),
..Browsers::default()
},
);

prefix_test(
r#"
.foo {
border-inline-start: 2px solid red;
border-inline-end: 2px solid red;
}
"#,
indoc! {r#"
.foo {
border-inline: 2px solid red;
}
"#
},
Browsers {
safari: Some(15 << 16),
..Browsers::default()
},
);
}

#[test]
Expand Down Expand Up @@ -2535,6 +2574,82 @@ mod tests {
..Browsers::default()
},
);

prefix_test(
r#"
.foo {
margin-inline-start: 2px;
margin-inline-end: 2px;
}
"#,
indoc! {r#"
.foo {
margin-inline-start: 2px;
margin-inline-end: 2px;
}
"#
},
Browsers {
safari: Some(13 << 16),
..Browsers::default()
},
);

prefix_test(
r#"
.foo {
margin-inline: 2px;
}
"#,
indoc! {r#"
.foo {
margin-inline-start: 2px;
margin-inline-end: 2px;
}
"#
},
Browsers {
safari: Some(13 << 16),
..Browsers::default()
},
);

prefix_test(
r#"
.foo {
margin-inline-start: 2px;
margin-inline-end: 2px;
}
"#,
indoc! {r#"
.foo {
margin-inline: 2px;
}
"#
},
Browsers {
safari: Some(15 << 16),
..Browsers::default()
},
);

prefix_test(
r#"
.foo {
margin-inline: 2px;
}
"#,
indoc! {r#"
.foo {
margin-inline: 2px;
}
"#
},
Browsers {
safari: Some(15 << 16),
..Browsers::default()
},
);
}

#[test]
Expand Down Expand Up @@ -2751,6 +2866,45 @@ mod tests {
..Browsers::default()
},
);

prefix_test(
r#"
.foo {
padding-inline-start: 2px;
padding-inline-end: 2px;
}
"#,
indoc! {r#"
.foo {
padding-inline-start: 2px;
padding-inline-end: 2px;
}
"#
},
Browsers {
safari: Some(13 << 16),
..Browsers::default()
},
);

prefix_test(
r#"
.foo {
padding-inline-start: 2px;
padding-inline-end: 2px;
}
"#,
indoc! {r#"
.foo {
padding-inline: 2px;
}
"#
},
Browsers {
safari: Some(15 << 16),
..Browsers::default()
},
);
}

#[test]
Expand Down
14 changes: 12 additions & 2 deletions src/properties/border.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1106,7 +1106,12 @@ impl<'i> BorderHandler<'i> {

if $is_logical && $block_start == $block_end && $block_start.is_valid() {
if logical_supported {
prop!(BorderBlock => $block_start.to_border());
if (context.is_supported(Feature::LogicalBorderShorthand)) {
prop!(BorderBlock => $block_start.to_border());
} else {
prop!(BorderBlockStart => $block_start.to_border());
prop!(BorderBlockEnd => $block_start.to_border());
}
} else {
prop!(BorderTop => $block_start.to_border());
prop!(BorderBottom => $block_start.to_border());
Expand All @@ -1124,7 +1129,12 @@ impl<'i> BorderHandler<'i> {

if $is_logical && $inline_start == $inline_end && $inline_start.is_valid() {
if logical_supported {
prop!(BorderInline => $inline_start.to_border());
if (context.is_supported(Feature::LogicalBorderShorthand)) {
prop!(BorderInline => $inline_start.to_border());
} else {
prop!(BorderInlineStart => $inline_start.to_border());
prop!(BorderInlineEnd => $inline_start.to_border());
}
} else {
prop!(BorderLeft => $inline_start.to_border());
prop!(BorderRight => $inline_start.to_border());
Expand Down
12 changes: 8 additions & 4 deletions src/properties/margin_padding.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,7 @@ size_shorthand! {
}

macro_rules! side_handler {
($name: ident, $top: ident, $bottom: ident, $left: ident, $right: ident, $block_start: ident, $block_end: ident, $inline_start: ident, $inline_end: ident, $shorthand: ident, $block_shorthand: ident, $inline_shorthand: ident, $logical_shorthand: literal $(, $feature: ident)?) => {
($name: ident, $top: ident, $bottom: ident, $left: ident, $right: ident, $block_start: ident, $block_end: ident, $inline_start: ident, $inline_end: ident, $shorthand: ident, $block_shorthand: ident, $inline_shorthand: ident, $logical_shorthand: literal $(, $feature: ident, $shorthand_feature: ident)?) => {
#[derive(Debug, Default)]
pub(crate) struct $name<'i> {
top: Option<LengthPercentageOrAuto>,
Expand Down Expand Up @@ -303,7 +303,8 @@ macro_rules! side_handler {

macro_rules! logical_side {
($start: ident, $end: ident, $shorthand_prop: ident, $start_prop: ident, $end_prop: ident) => {
if let (Some(Property::$start_prop(start)), Some(Property::$end_prop(end))) = (&$start, &$end) {
let shorthand_supported = logical_supported $(&& context.is_supported(Feature::$shorthand_feature))?;
if let (Some(Property::$start_prop(start)), Some(Property::$end_prop(end)), true) = (&$start, &$end, shorthand_supported) {
dest.push(Property::$shorthand_prop($shorthand_prop {
$start: start.clone(),
$end: end.clone()
Expand Down Expand Up @@ -391,7 +392,8 @@ side_handler!(
MarginBlock,
MarginInline,
false,
LogicalMargin
LogicalMargin,
LogicalMarginShorthand
);

side_handler!(
Expand All @@ -408,7 +410,8 @@ side_handler!(
PaddingBlock,
PaddingInline,
false,
LogicalPadding
LogicalPadding,
LogicalPaddingShorthand
);

side_handler!(
Expand Down Expand Up @@ -457,5 +460,6 @@ side_handler!(
InsetBlock,
InsetInline,
true,
LogicalInset,
LogicalInset
);

0 comments on commit 0d7e4c6

Please sign in to comment.