clean up implementation
This commit is contained in:
Evan Almloff committed
1 parent
f6fb6e1d1b
commit
2da1d8ab27
1 file changed
+78
-129
@@ -29,6 +29,7 @@
|
|||||||
- [ ] pub aspect_ratio: Number, ----> parsing is done, but taffy doesnt support it
|
- [ ] pub aspect_ratio: Number, ----> parsing is done, but taffy doesnt support it
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
use lightningcss::properties::{align, display, flex, position, size};
|
||||||
use lightningcss::{
|
use lightningcss::{
|
||||||
properties::{align::GapValue, border::BorderSideWidth, Property, PropertyId},
|
properties::{align::GapValue, border::BorderSideWidth, Property, PropertyId},
|
||||||
stylesheet::ParserOptions,
|
stylesheet::ParserOptions,
|
||||||
@@ -51,39 +52,21 @@ pub fn apply_layout_attributes(name: &str, value: &str, style: &mut Style) {
|
|||||||
{
|
{
|
||||||
match property {
|
match property {
|
||||||
Property::Display(display) => match display {
|
Property::Display(display) => match display {
|
||||||
lightningcss::properties::display::Display::Keyword(_) => todo!(),
|
display::Display::Keyword(display::DisplayKeyword::None) => {
|
||||||
lightningcss::properties::display::Display::Pair(pair) => {
|
style.display = Display::None
|
||||||
match pair.outside {
|
}
|
||||||
lightningcss::properties::display::DisplayOutside::Block => {
|
display::Display::Pair(pair) => {
|
||||||
style.display = Display::None
|
if let display::DisplayInside::Flex(_) = pair.inside {
|
||||||
}
|
style.display = Display::Flex
|
||||||
lightningcss::properties::display::DisplayOutside::Inline => todo!(),
|
|
||||||
lightningcss::properties::display::DisplayOutside::RunIn => todo!(),
|
|
||||||
}
|
|
||||||
match pair.inside {
|
|
||||||
lightningcss::properties::display::DisplayInside::Flow => todo!(),
|
|
||||||
lightningcss::properties::display::DisplayInside::FlowRoot => todo!(),
|
|
||||||
lightningcss::properties::display::DisplayInside::Table => todo!(),
|
|
||||||
lightningcss::properties::display::DisplayInside::Flex(_) => {
|
|
||||||
style.display = Display::Flex
|
|
||||||
}
|
|
||||||
lightningcss::properties::display::DisplayInside::Box(_) => todo!(),
|
|
||||||
lightningcss::properties::display::DisplayInside::Grid => todo!(),
|
|
||||||
lightningcss::properties::display::DisplayInside::Ruby => todo!(),
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
_ => (),
|
||||||
},
|
},
|
||||||
Property::Position(position) => {
|
Property::Position(position) => {
|
||||||
style.position_type = match position {
|
style.position_type = match position {
|
||||||
lightningcss::properties::position::Position::Static => todo!(),
|
position::Position::Relative => PositionType::Relative,
|
||||||
lightningcss::properties::position::Position::Relative => {
|
position::Position::Absolute => PositionType::Absolute,
|
||||||
PositionType::Relative
|
_ => return,
|
||||||
}
|
|
||||||
lightningcss::properties::position::Position::Absolute => {
|
|
||||||
PositionType::Absolute
|
|
||||||
}
|
|
||||||
lightningcss::properties::position::Position::Sticky(_) => todo!(),
|
|
||||||
lightningcss::properties::position::Position::Fixed => todo!(),
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Property::Top(top) => style.position.top = convert_length_percentage_or_auto(top),
|
Property::Top(top) => style.position.top = convert_length_percentage_or_auto(top),
|
||||||
@@ -94,6 +77,12 @@ pub fn apply_layout_attributes(name: &str, value: &str, style: &mut Style) {
|
|||||||
Property::Right(right) => {
|
Property::Right(right) => {
|
||||||
style.position.right = convert_length_percentage_or_auto(right)
|
style.position.right = convert_length_percentage_or_auto(right)
|
||||||
}
|
}
|
||||||
|
Property::Inset(inset) => {
|
||||||
|
style.position.top = convert_length_percentage_or_auto(inset.top);
|
||||||
|
style.position.bottom = convert_length_percentage_or_auto(inset.bottom);
|
||||||
|
style.position.left = convert_length_percentage_or_auto(inset.left);
|
||||||
|
style.position.right = convert_length_percentage_or_auto(inset.right);
|
||||||
|
}
|
||||||
Property::BorderTopWidth(width) => {
|
Property::BorderTopWidth(width) => {
|
||||||
style.border.top = convert_border_side_width(width);
|
style.border.top = convert_border_side_width(width);
|
||||||
}
|
}
|
||||||
@@ -134,18 +123,18 @@ pub fn apply_layout_attributes(name: &str, value: &str, style: &mut Style) {
|
|||||||
Property::FlexDirection(flex_direction, _) => {
|
Property::FlexDirection(flex_direction, _) => {
|
||||||
use FlexDirection::*;
|
use FlexDirection::*;
|
||||||
style.flex_direction = match flex_direction {
|
style.flex_direction = match flex_direction {
|
||||||
lightningcss::properties::flex::FlexDirection::Row => Row,
|
flex::FlexDirection::Row => Row,
|
||||||
lightningcss::properties::flex::FlexDirection::RowReverse => RowReverse,
|
flex::FlexDirection::RowReverse => RowReverse,
|
||||||
lightningcss::properties::flex::FlexDirection::Column => Column,
|
flex::FlexDirection::Column => Column,
|
||||||
lightningcss::properties::flex::FlexDirection::ColumnReverse => ColumnReverse,
|
flex::FlexDirection::ColumnReverse => ColumnReverse,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Property::FlexWrap(wrap, _) => {
|
Property::FlexWrap(wrap, _) => {
|
||||||
use FlexWrap::*;
|
use FlexWrap::*;
|
||||||
style.flex_wrap = match wrap {
|
style.flex_wrap = match wrap {
|
||||||
lightningcss::properties::flex::FlexWrap::NoWrap => NoWrap,
|
flex::FlexWrap::NoWrap => NoWrap,
|
||||||
lightningcss::properties::flex::FlexWrap::Wrap => Wrap,
|
flex::FlexWrap::Wrap => Wrap,
|
||||||
lightningcss::properties::flex::FlexWrap::WrapReverse => WrapReverse,
|
flex::FlexWrap::WrapReverse => WrapReverse,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Property::FlexGrow(grow, _) => {
|
Property::FlexGrow(grow, _) => {
|
||||||
@@ -165,108 +154,75 @@ pub fn apply_layout_attributes(name: &str, value: &str, style: &mut Style) {
|
|||||||
Property::AlignContent(align, _) => {
|
Property::AlignContent(align, _) => {
|
||||||
use AlignContent::*;
|
use AlignContent::*;
|
||||||
style.align_content = match align {
|
style.align_content = match align {
|
||||||
lightningcss::properties::align::AlignContent::Normal => todo!(),
|
align::AlignContent::ContentDistribution(distribution) => match distribution {
|
||||||
lightningcss::properties::align::AlignContent::BaselinePosition(_) => {
|
align::ContentDistribution::SpaceBetween => SpaceBetween,
|
||||||
todo!()
|
align::ContentDistribution::SpaceAround => SpaceAround,
|
||||||
}
|
align::ContentDistribution::SpaceEvenly => SpaceEvenly,
|
||||||
lightningcss::properties::align::AlignContent::ContentDistribution(
|
align::ContentDistribution::Stretch => Stretch,
|
||||||
distribution,
|
|
||||||
) => match distribution {
|
|
||||||
lightningcss::properties::align::ContentDistribution::SpaceBetween => {
|
|
||||||
SpaceBetween
|
|
||||||
}
|
|
||||||
lightningcss::properties::align::ContentDistribution::SpaceAround => {
|
|
||||||
SpaceAround
|
|
||||||
}
|
|
||||||
lightningcss::properties::align::ContentDistribution::SpaceEvenly => {
|
|
||||||
SpaceEvenly
|
|
||||||
}
|
|
||||||
lightningcss::properties::align::ContentDistribution::Stretch => Stretch,
|
|
||||||
},
|
},
|
||||||
lightningcss::properties::align::AlignContent::ContentPosition(_, position) => {
|
align::AlignContent::ContentPosition(_, position) => match position {
|
||||||
match position {
|
align::ContentPosition::Center => Center,
|
||||||
lightningcss::properties::align::ContentPosition::Center => Center,
|
align::ContentPosition::Start | align::ContentPosition::FlexStart => {
|
||||||
lightningcss::properties::align::ContentPosition::Start => todo!(),
|
FlexStart
|
||||||
lightningcss::properties::align::ContentPosition::End => todo!(),
|
|
||||||
lightningcss::properties::align::ContentPosition::FlexStart => {
|
|
||||||
FlexStart
|
|
||||||
}
|
|
||||||
lightningcss::properties::align::ContentPosition::FlexEnd => FlexEnd,
|
|
||||||
}
|
}
|
||||||
}
|
align::ContentPosition::End | align::ContentPosition::FlexEnd => FlexEnd,
|
||||||
|
},
|
||||||
|
_ => return,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
Property::JustifyContent(justify, _) => {
|
Property::JustifyContent(justify, _) => {
|
||||||
use JustifyContent::*;
|
use JustifyContent::*;
|
||||||
style.justify_content = match justify {
|
style.justify_content = match justify {
|
||||||
lightningcss::properties::align::JustifyContent::Normal => todo!(),
|
align::JustifyContent::ContentDistribution(distribution) => {
|
||||||
lightningcss::properties::align::JustifyContent::ContentDistribution(
|
match distribution {
|
||||||
distribution,
|
align::ContentDistribution::SpaceBetween => SpaceBetween,
|
||||||
) => match distribution {
|
align::ContentDistribution::SpaceAround => SpaceAround,
|
||||||
lightningcss::properties::align::ContentDistribution::SpaceBetween => {
|
align::ContentDistribution::SpaceEvenly => SpaceEvenly,
|
||||||
SpaceBetween
|
_ => return,
|
||||||
}
|
}
|
||||||
lightningcss::properties::align::ContentDistribution::SpaceAround => {
|
}
|
||||||
SpaceAround
|
align::JustifyContent::ContentPosition(_, position) => match position {
|
||||||
|
align::ContentPosition::Center => Center,
|
||||||
|
// start ignores -reverse flex-direction but there is no way to specify that in Taffy
|
||||||
|
align::ContentPosition::Start | align::ContentPosition::FlexStart => {
|
||||||
|
FlexStart
|
||||||
}
|
}
|
||||||
lightningcss::properties::align::ContentDistribution::SpaceEvenly => {
|
// end ignores -reverse flex-direction but there is no way to specify that in Taffy
|
||||||
SpaceEvenly
|
align::ContentPosition::End | align::ContentPosition::FlexEnd => FlexEnd,
|
||||||
}
|
|
||||||
lightningcss::properties::align::ContentDistribution::Stretch => todo!(),
|
|
||||||
},
|
},
|
||||||
lightningcss::properties::align::JustifyContent::ContentPosition(
|
_ => return,
|
||||||
_,
|
|
||||||
position,
|
|
||||||
) => match position {
|
|
||||||
lightningcss::properties::align::ContentPosition::Center => Center,
|
|
||||||
lightningcss::properties::align::ContentPosition::Start => todo!(),
|
|
||||||
lightningcss::properties::align::ContentPosition::End => todo!(),
|
|
||||||
lightningcss::properties::align::ContentPosition::FlexStart => FlexStart,
|
|
||||||
lightningcss::properties::align::ContentPosition::FlexEnd => FlexEnd,
|
|
||||||
},
|
|
||||||
lightningcss::properties::align::JustifyContent::Left(_) => todo!(),
|
|
||||||
lightningcss::properties::align::JustifyContent::Right(_) => todo!(),
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
Property::AlignSelf(align, _) => {
|
Property::AlignSelf(align, _) => {
|
||||||
use AlignSelf::*;
|
use AlignSelf::*;
|
||||||
style.align_self = match align {
|
style.align_self = match align {
|
||||||
lightningcss::properties::align::AlignSelf::Auto => Auto,
|
align::AlignSelf::Auto => Auto,
|
||||||
lightningcss::properties::align::AlignSelf::Normal => todo!(),
|
align::AlignSelf::Stretch => Stretch,
|
||||||
lightningcss::properties::align::AlignSelf::Stretch => Stretch,
|
align::AlignSelf::BaselinePosition(_) => Baseline,
|
||||||
lightningcss::properties::align::AlignSelf::BaselinePosition(_) => Baseline,
|
align::AlignSelf::SelfPosition(_overflow, position) => match position {
|
||||||
lightningcss::properties::align::AlignSelf::SelfPosition(
|
align::SelfPosition::Center => Center,
|
||||||
_overflow,
|
align::SelfPosition::Start
|
||||||
position,
|
| align::SelfPosition::SelfStart
|
||||||
) => match position {
|
| align::SelfPosition::FlexStart => FlexStart,
|
||||||
lightningcss::properties::align::SelfPosition::Center => Center,
|
align::SelfPosition::End
|
||||||
lightningcss::properties::align::SelfPosition::Start => todo!(),
|
| align::SelfPosition::SelfEnd
|
||||||
lightningcss::properties::align::SelfPosition::End => todo!(),
|
| align::SelfPosition::FlexEnd => FlexEnd,
|
||||||
lightningcss::properties::align::SelfPosition::SelfStart => todo!(),
|
|
||||||
lightningcss::properties::align::SelfPosition::SelfEnd => todo!(),
|
|
||||||
lightningcss::properties::align::SelfPosition::FlexStart => FlexStart,
|
|
||||||
lightningcss::properties::align::SelfPosition::FlexEnd => FlexEnd,
|
|
||||||
},
|
},
|
||||||
|
_ => return,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
Property::AlignItems(align, _) => {
|
Property::AlignItems(align, _) => {
|
||||||
use AlignItems::*;
|
use AlignItems::*;
|
||||||
style.align_items = match align {
|
style.align_items = match align {
|
||||||
lightningcss::properties::align::AlignItems::Normal => todo!(),
|
align::AlignItems::BaselinePosition(_) => Baseline,
|
||||||
lightningcss::properties::align::AlignItems::BaselinePosition(_) => Baseline,
|
align::AlignItems::Stretch => Stretch,
|
||||||
lightningcss::properties::align::AlignItems::Stretch => Stretch,
|
align::AlignItems::SelfPosition(_overflow, position) => match position {
|
||||||
lightningcss::properties::align::AlignItems::SelfPosition(
|
align::SelfPosition::Center => Center,
|
||||||
_overflow,
|
align::SelfPosition::FlexStart => FlexStart,
|
||||||
position,
|
align::SelfPosition::FlexEnd => FlexEnd,
|
||||||
) => match position {
|
_ => return,
|
||||||
lightningcss::properties::align::SelfPosition::Center => Center,
|
|
||||||
lightningcss::properties::align::SelfPosition::Start => todo!(),
|
|
||||||
lightningcss::properties::align::SelfPosition::End => todo!(),
|
|
||||||
lightningcss::properties::align::SelfPosition::SelfStart => todo!(),
|
|
||||||
lightningcss::properties::align::SelfPosition::SelfEnd => todo!(),
|
|
||||||
lightningcss::properties::align::SelfPosition::FlexStart => FlexStart,
|
|
||||||
lightningcss::properties::align::SelfPosition::FlexEnd => FlexEnd,
|
|
||||||
},
|
},
|
||||||
|
_ => return,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
Property::RowGap(row_gap) => {
|
Property::RowGap(row_gap) => {
|
||||||
@@ -345,7 +301,7 @@ fn convert_length_value(length_value: LengthValue) -> Dimension {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
fn convert_dimention_percentage(
|
fn convert_dimension_percentage(
|
||||||
dimension_percentage: DimensionPercentage<LengthValue>,
|
dimension_percentage: DimensionPercentage<LengthValue>,
|
||||||
) -> Dimension {
|
) -> Dimension {
|
||||||
match dimension_percentage {
|
match dimension_percentage {
|
||||||
@@ -361,7 +317,7 @@ fn convert_length_percentage_or_auto(
|
|||||||
match length_percentage_or_auto {
|
match length_percentage_or_auto {
|
||||||
LengthPercentageOrAuto::Auto => Dimension::Auto,
|
LengthPercentageOrAuto::Auto => Dimension::Auto,
|
||||||
LengthPercentageOrAuto::LengthPercentage(percentage) => {
|
LengthPercentageOrAuto::LengthPercentage(percentage) => {
|
||||||
convert_dimention_percentage(percentage)
|
convert_dimension_percentage(percentage)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -378,23 +334,16 @@ fn convert_border_side_width(border_side_width: BorderSideWidth) -> Dimension {
|
|||||||
|
|
||||||
fn convert_gap_value(gap_value: GapValue) -> Dimension {
|
fn convert_gap_value(gap_value: GapValue) -> Dimension {
|
||||||
match gap_value {
|
match gap_value {
|
||||||
GapValue::LengthPercentage(dim) => convert_dimention_percentage(dim),
|
GapValue::LengthPercentage(dim) => convert_dimension_percentage(dim),
|
||||||
GapValue::Normal => Dimension::Auto,
|
GapValue::Normal => Dimension::Auto,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
fn convert_size(size: lightningcss::properties::size::Size) -> Dimension {
|
fn convert_size(size: size::Size) -> Dimension {
|
||||||
match size {
|
match size {
|
||||||
lightningcss::properties::size::Size::Auto => Dimension::Auto,
|
size::Size::Auto => Dimension::Auto,
|
||||||
lightningcss::properties::size::Size::LengthPercentage(length) => {
|
size::Size::LengthPercentage(length) => convert_dimension_percentage(length),
|
||||||
convert_dimention_percentage(length)
|
_ => todo!(),
|
||||||
}
|
|
||||||
lightningcss::properties::size::Size::MinContent(_) => todo!(),
|
|
||||||
lightningcss::properties::size::Size::MaxContent(_) => todo!(),
|
|
||||||
lightningcss::properties::size::Size::FitContent(_) => todo!(),
|
|
||||||
lightningcss::properties::size::Size::FitContentFunction(_) => todo!(),
|
|
||||||
lightningcss::properties::size::Size::Stretch(_) => todo!(),
|
|
||||||
lightningcss::properties::size::Size::Contain => todo!(),
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in new issue
Block a user