Skip to content

Commit 0d7e4c6

Browse files
devongovettdevongovett
committed
Fix logical shorthand compatibility
Fixes parcel-bundler#171
1 parent 1b947b4 commit 0d7e4c6

File tree

5 files changed

+225
-6
lines changed

5 files changed

+225
-6
lines changed

‎scripts/build-prefixes.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -212,9 +212,12 @@ let mdnFeatures = {
212212
mediaRangeSyntax: mdn.css['at-rules'].media.range_syntax.__compat.support,
213213
mediaIntervalSyntax: {}, // currently no browsers
214214
logicalBorders: mdn.css.properties['border-inline-start'].__compat.support,
215+
logicalBorderShorthand: mdn.css.properties['border-inline'].__compat.support,
215216
logicalBorderRadius: mdn.css.properties['border-start-start-radius'].__compat.support,
216217
logicalMargin: mdn.css.properties['margin-inline-start'].__compat.support,
218+
logicalMarginShorthand: mdn.css.properties['margin-inline'].__compat.support,
217219
logicalPadding: mdn.css.properties['padding-inline-start'].__compat.support,
220+
logicalPaddingShorthand: mdn.css.properties['padding-inline'].__compat.support,
218221
logicalInset: mdn.css.properties['inset-inline-start'].__compat.support,
219222
logicalSize: mdn.css.properties['inline-size'].__compat.support,
220223
logicalTextAlign: mdn.css.properties['text-align']['flow_relative_values_start_and_end'].__compat.support,

‎src/compat.rs‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,10 +41,13 @@ pub enum Feature {
4141
LabColors,
4242
LangList,
4343
LogicalBorderRadius,
44+
LogicalBorderShorthand,
4445
LogicalBorders,
4546
LogicalInset,
4647
LogicalMargin,
48+
LogicalMarginShorthand,
4749
LogicalPadding,
50+
LogicalPaddingShorthand,
4851
LogicalSize,
4952
LogicalTextAlign,
5053
MediaIntervalSyntax,
@@ -1547,6 +1550,51 @@ impl Feature {
15471550
return false;
15481551
}
15491552
}
1553+
Feature::LogicalBorderShorthand | Feature::LogicalMarginShorthand | Feature::LogicalPaddingShorthand => {
1554+
if let Some(version) = browsers.chrome {
1555+
if version < 5701632 {
1556+
return false;
1557+
}
1558+
}
1559+
if let Some(version) = browsers.edge {
1560+
if version < 5701632 {
1561+
return false;
1562+
}
1563+
}
1564+
if let Some(version) = browsers.firefox {
1565+
if version < 4325376 {
1566+
return false;
1567+
}
1568+
}
1569+
if let Some(version) = browsers.opera {
1570+
if version < 3145728 {
1571+
return false;
1572+
}
1573+
}
1574+
if let Some(version) = browsers.safari {
1575+
if version < 917760 {
1576+
return false;
1577+
}
1578+
}
1579+
if let Some(version) = browsers.ios_saf {
1580+
if version < 918784 {
1581+
return false;
1582+
}
1583+
}
1584+
if let Some(version) = browsers.samsung {
1585+
if version < 917504 {
1586+
return false;
1587+
}
1588+
}
1589+
if let Some(version) = browsers.android {
1590+
if version < 5701632 {
1591+
return false;
1592+
}
1593+
}
1594+
if browsers.ie.is_some() {
1595+
return false;
1596+
}
1597+
}
15501598
Feature::LogicalBorderRadius => {
15511599
if let Some(version) = browsers.chrome {
15521600
if version < 5832704 {

‎src/lib.rs‎

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1425,6 +1425,45 @@ mod tests {
14251425
..Browsers::default()
14261426
},
14271427
);
1428+
1429+
prefix_test(
1430+
r#"
1431+
.foo {
1432+
border-inline-start: 2px solid red;
1433+
border-inline-end: 2px solid red;
1434+
}
1435+
"#,
1436+
indoc! {r#"
1437+
.foo {
1438+
border-inline-start: 2px solid red;
1439+
border-inline-end: 2px solid red;
1440+
}
1441+
"#
1442+
},
1443+
Browsers {
1444+
safari: Some(13 << 16),
1445+
..Browsers::default()
1446+
},
1447+
);
1448+
1449+
prefix_test(
1450+
r#"
1451+
.foo {
1452+
border-inline-start: 2px solid red;
1453+
border-inline-end: 2px solid red;
1454+
}
1455+
"#,
1456+
indoc! {r#"
1457+
.foo {
1458+
border-inline: 2px solid red;
1459+
}
1460+
"#
1461+
},
1462+
Browsers {
1463+
safari: Some(15 << 16),
1464+
..Browsers::default()
1465+
},
1466+
);
14281467
}
14291468

14301469
#[test]
@@ -2535,6 +2574,82 @@ mod tests {
25352574
..Browsers::default()
25362575
},
25372576
);
2577+
2578+
prefix_test(
2579+
r#"
2580+
.foo {
2581+
margin-inline-start: 2px;
2582+
margin-inline-end: 2px;
2583+
}
2584+
"#,
2585+
indoc! {r#"
2586+
.foo {
2587+
margin-inline-start: 2px;
2588+
margin-inline-end: 2px;
2589+
}
2590+
"#
2591+
},
2592+
Browsers {
2593+
safari: Some(13 << 16),
2594+
..Browsers::default()
2595+
},
2596+
);
2597+
2598+
prefix_test(
2599+
r#"
2600+
.foo {
2601+
margin-inline: 2px;
2602+
}
2603+
"#,
2604+
indoc! {r#"
2605+
.foo {
2606+
margin-inline-start: 2px;
2607+
margin-inline-end: 2px;
2608+
}
2609+
"#
2610+
},
2611+
Browsers {
2612+
safari: Some(13 << 16),
2613+
..Browsers::default()
2614+
},
2615+
);
2616+
2617+
prefix_test(
2618+
r#"
2619+
.foo {
2620+
margin-inline-start: 2px;
2621+
margin-inline-end: 2px;
2622+
}
2623+
"#,
2624+
indoc! {r#"
2625+
.foo {
2626+
margin-inline: 2px;
2627+
}
2628+
"#
2629+
},
2630+
Browsers {
2631+
safari: Some(15 << 16),
2632+
..Browsers::default()
2633+
},
2634+
);
2635+
2636+
prefix_test(
2637+
r#"
2638+
.foo {
2639+
margin-inline: 2px;
2640+
}
2641+
"#,
2642+
indoc! {r#"
2643+
.foo {
2644+
margin-inline: 2px;
2645+
}
2646+
"#
2647+
},
2648+
Browsers {
2649+
safari: Some(15 << 16),
2650+
..Browsers::default()
2651+
},
2652+
);
25382653
}
25392654

25402655
#[test]
@@ -2751,6 +2866,45 @@ mod tests {
27512866
..Browsers::default()
27522867
},
27532868
);
2869+
2870+
prefix_test(
2871+
r#"
2872+
.foo {
2873+
padding-inline-start: 2px;
2874+
padding-inline-end: 2px;
2875+
}
2876+
"#,
2877+
indoc! {r#"
2878+
.foo {
2879+
padding-inline-start: 2px;
2880+
padding-inline-end: 2px;
2881+
}
2882+
"#
2883+
},
2884+
Browsers {
2885+
safari: Some(13 << 16),
2886+
..Browsers::default()
2887+
},
2888+
);
2889+
2890+
prefix_test(
2891+
r#"
2892+
.foo {
2893+
padding-inline-start: 2px;
2894+
padding-inline-end: 2px;
2895+
}
2896+
"#,
2897+
indoc! {r#"
2898+
.foo {
2899+
padding-inline: 2px;
2900+
}
2901+
"#
2902+
},
2903+
Browsers {
2904+
safari: Some(15 << 16),
2905+
..Browsers::default()
2906+
},
2907+
);
27542908
}
27552909

27562910
#[test]

‎src/properties/border.rs‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1106,7 +1106,12 @@ impl<'i> BorderHandler<'i> {
11061106

11071107
if $is_logical && $block_start == $block_end && $block_start.is_valid() {
11081108
if logical_supported {
1109-
prop!(BorderBlock => $block_start.to_border());
1109+
if (context.is_supported(Feature::LogicalBorderShorthand)) {
1110+
prop!(BorderBlock => $block_start.to_border());
1111+
} else {
1112+
prop!(BorderBlockStart => $block_start.to_border());
1113+
prop!(BorderBlockEnd => $block_start.to_border());
1114+
}
11101115
} else {
11111116
prop!(BorderTop => $block_start.to_border());
11121117
prop!(BorderBottom => $block_start.to_border());
@@ -1124,7 +1129,12 @@ impl<'i> BorderHandler<'i> {
11241129

11251130
if $is_logical && $inline_start == $inline_end && $inline_start.is_valid() {
11261131
if logical_supported {
1127-
prop!(BorderInline => $inline_start.to_border());
1132+
if (context.is_supported(Feature::LogicalBorderShorthand)) {
1133+
prop!(BorderInline => $inline_start.to_border());
1134+
} else {
1135+
prop!(BorderInlineStart => $inline_start.to_border());
1136+
prop!(BorderInlineEnd => $inline_start.to_border());
1137+
}
11281138
} else {
11291139
prop!(BorderLeft => $inline_start.to_border());
11301140
prop!(BorderRight => $inline_start.to_border());

‎src/properties/margin_padding.rs‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -161,7 +161,7 @@ size_shorthand! {
161161
}
162162

163163
macro_rules! side_handler {
164-
($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)?) => {
164+
($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)?) => {
165165
#[derive(Debug, Default)]
166166
pub(crate) struct $name<'i> {
167167
top: Option<LengthPercentageOrAuto>,
@@ -303,7 +303,8 @@ macro_rules! side_handler {
303303

304304
macro_rules! logical_side {
305305
($start: ident, $end: ident, $shorthand_prop: ident, $start_prop: ident, $end_prop: ident) => {
306-
if let (Some(Property::$start_prop(start)), Some(Property::$end_prop(end))) = (&$start, &$end) {
306+
let shorthand_supported = logical_supported $(&& context.is_supported(Feature::$shorthand_feature))?;
307+
if let (Some(Property::$start_prop(start)), Some(Property::$end_prop(end)), true) = (&$start, &$end, shorthand_supported) {
307308
dest.push(Property::$shorthand_prop($shorthand_prop {
308309
$start: start.clone(),
309310
$end: end.clone()
@@ -391,7 +392,8 @@ side_handler!(
391392
MarginBlock,
392393
MarginInline,
393394
false,
394-
LogicalMargin
395+
LogicalMargin,
396+
LogicalMarginShorthand
395397
);
396398

397399
side_handler!(
@@ -408,7 +410,8 @@ side_handler!(
408410
PaddingBlock,
409411
PaddingInline,
410412
false,
411-
LogicalPadding
413+
LogicalPadding,
414+
LogicalPaddingShorthand
412415
);
413416

414417
side_handler!(
@@ -457,5 +460,6 @@ side_handler!(
457460
InsetBlock,
458461
InsetInline,
459462
true,
463+
LogicalInset,
460464
LogicalInset
461465
);

0 commit comments

Comments
 (0)