diff --git a/packages/native-core/src/layout_attributes.rs b/packages/native-core/src/layout_attributes.rs index de5acbe5b..7d722d5de 100644 --- a/packages/native-core/src/layout_attributes.rs +++ b/packages/native-core/src/layout_attributes.rs @@ -29,6 +29,7 @@ - [ ] pub aspect_ratio: Number, ----> parsing is done, but taffy doesnt support it */ +use lightningcss::properties::{align, display, flex, position, size}; use lightningcss::{ properties::{align::GapValue, border::BorderSideWidth, Property, PropertyId}, stylesheet::ParserOptions, @@ -51,39 +52,21 @@ pub fn apply_layout_attributes(name: &str, value: &str, style: &mut Style) { { match property { Property::Display(display) => match display { - lightningcss::properties::display::Display::Keyword(_) => todo!(), - lightningcss::properties::display::Display::Pair(pair) => { - match pair.outside { - lightningcss::properties::display::DisplayOutside::Block => { - style.display = Display::None - } - 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!(), + display::Display::Keyword(display::DisplayKeyword::None) => { + style.display = Display::None + } + display::Display::Pair(pair) => { + if let display::DisplayInside::Flex(_) = pair.inside { + style.display = Display::Flex } } + _ => (), }, Property::Position(position) => { style.position_type = match position { - lightningcss::properties::position::Position::Static => todo!(), - lightningcss::properties::position::Position::Relative => { - PositionType::Relative - } - lightningcss::properties::position::Position::Absolute => { - PositionType::Absolute - } - lightningcss::properties::position::Position::Sticky(_) => todo!(), - lightningcss::properties::position::Position::Fixed => todo!(), + position::Position::Relative => PositionType::Relative, + position::Position::Absolute => PositionType::Absolute, + _ => return, } } 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) => { 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) => { 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, _) => { use FlexDirection::*; style.flex_direction = match flex_direction { - lightningcss::properties::flex::FlexDirection::Row => Row, - lightningcss::properties::flex::FlexDirection::RowReverse => RowReverse, - lightningcss::properties::flex::FlexDirection::Column => Column, - lightningcss::properties::flex::FlexDirection::ColumnReverse => ColumnReverse, + flex::FlexDirection::Row => Row, + flex::FlexDirection::RowReverse => RowReverse, + flex::FlexDirection::Column => Column, + flex::FlexDirection::ColumnReverse => ColumnReverse, } } Property::FlexWrap(wrap, _) => { use FlexWrap::*; style.flex_wrap = match wrap { - lightningcss::properties::flex::FlexWrap::NoWrap => NoWrap, - lightningcss::properties::flex::FlexWrap::Wrap => Wrap, - lightningcss::properties::flex::FlexWrap::WrapReverse => WrapReverse, + flex::FlexWrap::NoWrap => NoWrap, + flex::FlexWrap::Wrap => Wrap, + flex::FlexWrap::WrapReverse => WrapReverse, } } Property::FlexGrow(grow, _) => { @@ -165,108 +154,75 @@ pub fn apply_layout_attributes(name: &str, value: &str, style: &mut Style) { Property::AlignContent(align, _) => { use AlignContent::*; style.align_content = match align { - lightningcss::properties::align::AlignContent::Normal => todo!(), - lightningcss::properties::align::AlignContent::BaselinePosition(_) => { - todo!() - } - lightningcss::properties::align::AlignContent::ContentDistribution( - 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, + align::AlignContent::ContentDistribution(distribution) => match distribution { + align::ContentDistribution::SpaceBetween => SpaceBetween, + align::ContentDistribution::SpaceAround => SpaceAround, + align::ContentDistribution::SpaceEvenly => SpaceEvenly, + align::ContentDistribution::Stretch => Stretch, }, - lightningcss::properties::align::AlignContent::ContentPosition(_, 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, + align::AlignContent::ContentPosition(_, position) => match position { + align::ContentPosition::Center => Center, + align::ContentPosition::Start | align::ContentPosition::FlexStart => { + FlexStart } - } + align::ContentPosition::End | align::ContentPosition::FlexEnd => FlexEnd, + }, + _ => return, }; } Property::JustifyContent(justify, _) => { use JustifyContent::*; style.justify_content = match justify { - lightningcss::properties::align::JustifyContent::Normal => todo!(), - lightningcss::properties::align::JustifyContent::ContentDistribution( - distribution, - ) => match distribution { - lightningcss::properties::align::ContentDistribution::SpaceBetween => { - SpaceBetween + align::JustifyContent::ContentDistribution(distribution) => { + match distribution { + align::ContentDistribution::SpaceBetween => SpaceBetween, + align::ContentDistribution::SpaceAround => SpaceAround, + align::ContentDistribution::SpaceEvenly => SpaceEvenly, + _ => 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 => { - SpaceEvenly - } - lightningcss::properties::align::ContentDistribution::Stretch => todo!(), + // end ignores -reverse flex-direction but there is no way to specify that in Taffy + align::ContentPosition::End | align::ContentPosition::FlexEnd => FlexEnd, }, - lightningcss::properties::align::JustifyContent::ContentPosition( - _, - 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!(), + _ => return, }; } Property::AlignSelf(align, _) => { use AlignSelf::*; style.align_self = match align { - lightningcss::properties::align::AlignSelf::Auto => Auto, - lightningcss::properties::align::AlignSelf::Normal => todo!(), - lightningcss::properties::align::AlignSelf::Stretch => Stretch, - lightningcss::properties::align::AlignSelf::BaselinePosition(_) => Baseline, - lightningcss::properties::align::AlignSelf::SelfPosition( - _overflow, - position, - ) => match position { - 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, + align::AlignSelf::Auto => Auto, + align::AlignSelf::Stretch => Stretch, + align::AlignSelf::BaselinePosition(_) => Baseline, + align::AlignSelf::SelfPosition(_overflow, position) => match position { + align::SelfPosition::Center => Center, + align::SelfPosition::Start + | align::SelfPosition::SelfStart + | align::SelfPosition::FlexStart => FlexStart, + align::SelfPosition::End + | align::SelfPosition::SelfEnd + | align::SelfPosition::FlexEnd => FlexEnd, }, + _ => return, }; } Property::AlignItems(align, _) => { use AlignItems::*; style.align_items = match align { - lightningcss::properties::align::AlignItems::Normal => todo!(), - lightningcss::properties::align::AlignItems::BaselinePosition(_) => Baseline, - lightningcss::properties::align::AlignItems::Stretch => Stretch, - lightningcss::properties::align::AlignItems::SelfPosition( - _overflow, - position, - ) => match position { - 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, + align::AlignItems::BaselinePosition(_) => Baseline, + align::AlignItems::Stretch => Stretch, + align::AlignItems::SelfPosition(_overflow, position) => match position { + align::SelfPosition::Center => Center, + align::SelfPosition::FlexStart => FlexStart, + align::SelfPosition::FlexEnd => FlexEnd, + _ => return, }, + _ => return, }; } 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, ) -> Dimension { match dimension_percentage { @@ -361,7 +317,7 @@ fn convert_length_percentage_or_auto( match length_percentage_or_auto { LengthPercentageOrAuto::Auto => Dimension::Auto, 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 { match gap_value { - GapValue::LengthPercentage(dim) => convert_dimention_percentage(dim), + GapValue::LengthPercentage(dim) => convert_dimension_percentage(dim), GapValue::Normal => Dimension::Auto, } } -fn convert_size(size: lightningcss::properties::size::Size) -> Dimension { +fn convert_size(size: size::Size) -> Dimension { match size { - lightningcss::properties::size::Size::Auto => Dimension::Auto, - lightningcss::properties::size::Size::LengthPercentage(length) => { - convert_dimention_percentage(length) - } - 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!(), + size::Size::Auto => Dimension::Auto, + size::Size::LengthPercentage(length) => convert_dimension_percentage(length), + _ => todo!(), } }