feat: 增加 box-orient 解析 && display 增加 -webkit-box 解析

Author: luckyadam

.vscode/settings.json

@@ -1,3 +1,4 @@
 {
-  "rust-analyzer.showUnlinkedFileNotification": false
+  "rust-analyzer.showUnlinkedFileNotification": false,
+  "editor.tabSize": 2
 }

src/parse_style_properties.rs

@@ -3,7 +3,7 @@ use lightningcss::{properties::{custom::TokenOrValue, Property}, stylesheet::Pri
 use swc_core::{common::DUMMY_SP, ecma::{ast::{self}, utils::quote_ident}};
 use swc_core::ecma::ast::*;
 
-use crate::{generate_expr_lit_str, style_parser::KeyFrameItem, style_propetries::{animation::Animation, animation_multi::AnimationMulti, aspect_ratio::AspectRatio, background::Background, background_image::BackgroundImage, background_position::BackgroundPosition, background_repeat::BackgroundRepeat, background_size::BackgroundSize, border::Border, border_color::BorderColor, border_radius::BorderRadius, border_style::BorderStyle, border_width::BorderWidth, box_shadow::BoxShadow, color::ColorProperty, display::Display, expr::Expr, flex::Flex, flex_align::FlexAlign, flex_basis::FlexBasis, flex_direction::FlexDirection, flex_wrap::FlexWrap, font_size::FontSize, font_style::FontStyle, font_weight::FontWeight, gap::Gap, item_align::ItemAlign, length_value::LengthValueProperty, letter_spacing::LetterSpacing, line_height::LineHeight, marin_padding::MarginPadding, max_size::MaxSizeProperty, normal::Normal, number::NumberProperty, opacity::Opacity, overflow::Overflow, position::Position, size::SizeProperty, style_property_type::{string_to_css_property_type, CSSPropertyType}, style_value_type::StyleValueType, text_align::TextAlign, text_decoration::TextDecoration, text_overflow::TextOverflow, text_shadow::TextShadow, text_transform::TextTransform, transform::Transform, transform_origin::TransformOrigin, transition::Transition, unit::{generate_expr_by_length_value, Platform}, vertical_align::VerticalAlign, visibility::Visibility, white_space::WhiteSpace, word_break::WordBreak}, utils::lowercase_first};
+use crate::{generate_expr_lit_str, style_parser::KeyFrameItem, style_propetries::{animation::Animation, animation_multi::AnimationMulti, aspect_ratio::AspectRatio, background::Background, background_image::BackgroundImage, background_position::BackgroundPosition, background_repeat::BackgroundRepeat, background_size::BackgroundSize, border::Border, border_color::BorderColor, border_radius::BorderRadius, border_style::BorderStyle, border_width::BorderWidth, box_orient::BoxOrient, box_shadow::BoxShadow, color::ColorProperty, display::Display, expr::Expr, flex::Flex, flex_align::FlexAlign, flex_basis::FlexBasis, flex_direction::FlexDirection, flex_wrap::FlexWrap, font_size::FontSize, font_style::FontStyle, font_weight::FontWeight, gap::Gap, item_align::ItemAlign, length_value::LengthValueProperty, letter_spacing::LetterSpacing, line_height::LineHeight, marin_padding::MarginPadding, max_size::MaxSizeProperty, normal::Normal, number::NumberProperty, opacity::Opacity, overflow::Overflow, position::Position, size::SizeProperty, style_property_type::{string_to_css_property_type, CSSPropertyType}, style_value_type::StyleValueType, text_align::TextAlign, text_decoration::TextDecoration, text_overflow::TextOverflow, text_shadow::TextShadow, text_transform::TextTransform, transform::Transform, transform_origin::TransformOrigin, transition::Transition, unit::{generate_expr_by_length_value, Platform}, vertical_align::VerticalAlign, visibility::Visibility, white_space::WhiteSpace, word_break::WordBreak}, utils::lowercase_first};
 
 pub fn parse_style_properties(properties: &Vec<(String, Property)>) -> Vec<StyleValueType> {
   let mut final_properties = vec![];
@@ -247,6 +247,9 @@ pub fn parse_style_properties(properties: &Vec<(String, Property)>) -> Vec<Style
           }
           "whiteSpace" => {
             final_properties.push(StyleValueType::WhiteSpace(WhiteSpace::from(( id.to_string(), value ))))
+          },
+          "boxOrient" => {
+            final_properties.push(StyleValueType::BoxOrient(BoxOrient::from(( id.to_string(), value ))));
           }
           _ => {
             // position、zIndex等... 会自动处理 单位、数字等相关信息

src/style_propetries/box_orient.rs

@@ -0,0 +1,53 @@
+use lightningcss::properties::{flex::BoxOrient as CSSBoxOrient, Property};
+use crate::{generate_expr_enum, style_propetries::style_property_enum};
+
+use super::{style_property_type::CSSPropertyType, traits::ToExpr, unit::PropertyTuple};
+
+#[derive(Debug, Clone)]
+pub struct BoxOrient {
+  pub id: String,
+  pub value: EnumValue
+}
+
+#[derive(Debug, Clone)]
+pub enum EnumValue {
+  Horizontal,
+  Vertical,
+  InlineAxis,
+  BlockAxis,
+}
+
+impl From<(String, &Property<'_>)> for BoxOrient {
+  fn from(prop: (String, &Property<'_>)) -> Self {
+    BoxOrient {
+      id: prop.0,
+      value: match prop.1 {
+        Property::BoxOrient(value, _) => {
+          match value {
+            CSSBoxOrient::Horizontal => EnumValue::Horizontal,
+            CSSBoxOrient::Vertical => EnumValue::Vertical,
+            CSSBoxOrient::InlineAxis => EnumValue::InlineAxis,
+            CSSBoxOrient::BlockAxis => EnumValue::BlockAxis,
+          }
+        }
+        _ => EnumValue::InlineAxis,
+      }
+    }
+  }
+}
+
+impl ToExpr for BoxOrient {
+  fn to_expr(&self) -> PropertyTuple {
+    PropertyTuple::One(
+      CSSPropertyType::BoxOrient,
+      {
+        match self.value {
+          EnumValue::Horizontal => generate_expr_enum!(style_property_enum::BoxOrient::Horizontal),
+          EnumValue::Vertical => generate_expr_enum!(style_property_enum::BoxOrient::Vertical),
+          EnumValue::InlineAxis => generate_expr_enum!(style_property_enum::BoxOrient::InlineAxis),
+          EnumValue::BlockAxis => generate_expr_enum!(style_property_enum::BoxOrient::BlockAxis),
+        }
+      }
+    )
+  }
+}

src/style_propetries/display.rs

@@ -2,7 +2,7 @@
 
 use lightningcss::properties::{display::{Display::{Keyword, Pair}, DisplayInside, DisplayKeyword, DisplayOutside}, Property};
 
-use crate::{generate_expr_enum, generate_expr_lit_str, generate_invalid_expr, style_propetries::style_property_enum};
+use crate::{generate_expr_enum, generate_invalid_expr, style_propetries::style_property_enum};
 
 use super::{style_property_type::CSSPropertyType, traits::ToExpr, unit::PropertyTuple};
 
@@ -18,6 +18,7 @@ pub enum EnumValue {
   Flex,
   Block,
   Invalid,
+  Box
 }
 
 impl From<(String, &Property<'_>)> for Display {
@@ -34,6 +35,8 @@ impl From<(String, &Property<'_>)> for Display {
             Pair(value) => {
               if let DisplayInside::Flex(_) = value.inside {
                 EnumValue::Flex
+              } else if let DisplayInside::Box(_) = value.inside {
+                EnumValue::Box
               } else {
                 if let DisplayOutside::Block = value.outside {
                   EnumValue::Block
@@ -60,6 +63,7 @@ impl ToExpr for Display {
         EnumValue::None => generate_expr_enum!(style_property_enum::Display::None),
         EnumValue::Flex => generate_expr_enum!(style_property_enum::Display::Flex),
         EnumValue::Block => generate_expr_enum!(style_property_enum::Display::Block),
+        EnumValue::Box => generate_expr_enum!(style_property_enum::Display::Box),
         EnumValue::Invalid => generate_invalid_expr!(),
       }
     )

src/style_propetries/mod.rs

@@ -56,4 +56,5 @@ pub mod visibility;
 pub mod opacity;
 pub mod word_break;
 pub mod white_space;
-pub mod style_media;
+pub mod box_orient;
+pub mod style_media;

src/style_propetries/style_property_enum.rs

@@ -379,6 +379,7 @@ pub enum Display {
     None = 0,
     Block,
     Flex,
+    Box,
 }
 
 #[repr(u32)]
@@ -398,3 +399,12 @@ pub enum WhiteSpace {
     NoWrap = 0,
     Wrap,
 }
+
+#[repr(u32)]
+#[derive(Hash, PartialEq, Eq, Debug, Clone, Copy)]
+pub enum BoxOrient {
+    Horizontal = 0,
+    Vertical,
+    InlineAxis,
+    BlockAxis,
+}

src/style_propetries/style_property_type.rs

@@ -103,6 +103,7 @@ pub enum CSSPropertyType {
     Margin = 98,
     Padding = 99,
     BorderRadius = 100,
+    BoxOrient = 101,
 }
 
 pub fn string_to_css_property_type(property: &str) -> CSSPropertyType {
@@ -207,6 +208,7 @@ pub fn string_to_css_property_type(property: &str) -> CSSPropertyType {
         "margin" => CSSPropertyType::Margin,
         "padding" => CSSPropertyType::Padding,
         "borderRadius" => CSSPropertyType::BorderRadius,
+        "boxOrient" => CSSPropertyType::BoxOrient,
         _ => CSSPropertyType::Invalid,
     }
 }

src/style_propetries/style_value_type.rs

@@ -1,7 +1,7 @@
 
 use crate::generate_expr_based_on_platform;
 
-use super::{animation::Animation, animation_multi::AnimationMulti, aspect_ratio::AspectRatio, background::Background, background_image::BackgroundImage, background_position::BackgroundPosition, background_repeat::BackgroundRepeat, background_size::BackgroundSize, border::Border, border_color::BorderColor, border_radius::BorderRadius, border_style::BorderStyle, border_width::BorderWidth, box_shadow::BoxShadow, color::ColorProperty, display::Display, expr::Expr, flex::Flex, flex_align::FlexAlign, flex_basis::FlexBasis, flex_direction::FlexDirection, flex_wrap::FlexWrap, font_size::FontSize, font_style::FontStyle, font_weight::FontWeight, gap::Gap, item_align::ItemAlign, length_value::LengthValueProperty, letter_spacing::LetterSpacing, line_height::LineHeight, marin_padding::MarginPadding, max_size::MaxSizeProperty, normal::Normal, number::NumberProperty, opacity::Opacity, overflow::Overflow, position::Position, size::SizeProperty, text_align::TextAlign, text_decoration::TextDecoration, text_overflow::TextOverflow, text_shadow::TextShadow, text_transform::TextTransform, traits::{ToExpr, ToStyleValue}, transform::Transform, transform_origin::TransformOrigin, transition::Transition, unit::{Platform, PropertyTuple}, vertical_align::VerticalAlign, visibility::Visibility, white_space::WhiteSpace, word_break::WordBreak};
+use super::{animation::Animation, animation_multi::AnimationMulti, aspect_ratio::AspectRatio, background::Background, background_image::BackgroundImage, background_position::BackgroundPosition, background_repeat::BackgroundRepeat, background_size::BackgroundSize, border::Border, border_color::BorderColor, border_radius::BorderRadius, border_style::BorderStyle, border_width::BorderWidth, box_orient::BoxOrient, box_shadow::BoxShadow, color::ColorProperty, display::Display, expr::Expr, flex::Flex, flex_align::FlexAlign, flex_basis::FlexBasis, flex_direction::FlexDirection, flex_wrap::FlexWrap, font_size::FontSize, font_style::FontStyle, font_weight::FontWeight, gap::Gap, item_align::ItemAlign, length_value::LengthValueProperty, letter_spacing::LetterSpacing, line_height::LineHeight, marin_padding::MarginPadding, max_size::MaxSizeProperty, normal::Normal, number::NumberProperty, opacity::Opacity, overflow::Overflow, position::Position, size::SizeProperty, text_align::TextAlign, text_decoration::TextDecoration, text_overflow::TextOverflow, text_shadow::TextShadow, text_transform::TextTransform, traits::{ToExpr, ToStyleValue}, transform::Transform, transform_origin::TransformOrigin, transition::Transition, unit::{Platform, PropertyTuple}, vertical_align::VerticalAlign, visibility::Visibility, white_space::WhiteSpace, word_break::WordBreak};
 
 
 #[derive(Debug, Clone)]
@@ -55,7 +55,8 @@ pub enum StyleValueType {
   Visibility(Visibility),
   Opacity(Opacity),
   WordBreak(WordBreak),
-  WhiteSpace(WhiteSpace)
+  WhiteSpace(WhiteSpace),
+  BoxOrient(BoxOrient),
 }
 
 impl ToStyleValue for StyleValueType {
@@ -211,6 +212,9 @@ impl ToStyleValue for StyleValueType {
       StyleValueType::WhiteSpace(value) => {
         generate_expr_based_on_platform!(platform, value)
       }
+      StyleValueType::BoxOrient(value) => {
+        generate_expr_based_on_platform!(platform, value)
+      }
     }
   }
 }