Skip to content

Commit

Permalink
feat: 完善transform、margin、padding、flex
Browse files Browse the repository at this point in the history
  • Loading branch information
heiazu committed Feb 22, 2024
1 parent 71f8f1f commit 2226548
Showing 28 changed files with 1,398 additions and 120 deletions.
9 changes: 5 additions & 4 deletions __test__/fixure/rn/index.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
.c_div {
border-right: 20px dashed #f00;
border: 2px solid #f00;
border-left: 20px dashed #f00;
}
text-shadow: 1px 1px 1px #000;
text-transform: uppercase;
margin: 10% 20px;
flex: 1 1 auto;
}
2 changes: 1 addition & 1 deletion src/react_native/create_stylesheet.rs
Original file line number Diff line number Diff line change
@@ -52,7 +52,7 @@ impl RNStyleSheet {
value: Box::new(expr),
}))))
})
},
}
}
}

16 changes: 11 additions & 5 deletions src/react_native/parse_style_properties.rs
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@ use std::collections::HashMap;

use lightningcss::{properties::Property, stylesheet::PrinterOptions};

use crate::style_propetries::{style_value_type::StyleValueType, flex_align::FlexAlign, item_align::ItemAlign, aspect_ratio::AspactRatio, display::Display, flex_basis::FlexBasis, flex_direction::FlexDirection, flex_wrap::FlexWrap, gap::Gap, length_value::LengthValueProperty, size::SizeProperty, max_size::MaxSizeProperty, overflow::Overflow, normal::Normal, number::NumberProperty, color::ColorProperty, font_size::FontSize, font_weight::FontWeight, line_height::LineHeight, text_align::TextAlign, text_decoration::TextDecoration, text_shadow::TextShadow, letter_spacing::LetterSpacing, font_style::FontStyle, text_transform::TextTransform, vertical_align::VerticalAlign, border_color::BorderColor, border_width::BorderWidth, border_radius::BorderRadius, border_style::BorderStyle, border::Border};
use crate::style_propetries::{aspect_ratio::AspactRatio, border::Border, border_color::BorderColor, border_radius::BorderRadius, border_style::BorderStyle, border_width::BorderWidth, color::ColorProperty, display::Display, 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, overflow::Overflow, size::SizeProperty, style_value_type::StyleValueType, text_align::TextAlign, text_decoration::TextDecoration, text_shadow::TextShadow, text_transform::TextTransform, transform::Transform, vertical_align::VerticalAlign};

pub fn parse_style_properties(properties: &Vec<(String, Property)>) -> HashMap<String, StyleValueType> {
let mut final_properties = HashMap::new();
@@ -23,6 +23,9 @@ pub fn parse_style_properties(properties: &Vec<(String, Property)>) -> HashMap<S
"alignSelf" => {
final_properties.insert("alignSelf".to_string(), StyleValueType::AlignItems(ItemAlign::from((id.to_string(), value))));
}
"flex" => {
final_properties.insert("flexBasis".to_string(), StyleValueType::Flex(Flex::from((id.to_string(), value))));
}
"flexBasis" => {
final_properties.insert("flexBasis".to_string(), StyleValueType::FlexBasis(FlexBasis::from((id.to_string(), value))));
}
@@ -44,11 +47,11 @@ pub fn parse_style_properties(properties: &Vec<(String, Property)>) -> HashMap<S
"display" => {
final_properties.insert("display".to_string(), StyleValueType::Display(Display::from((id.to_string(), value))));
}
"columnGap" => {
final_properties.insert("columnGap".to_string(), StyleValueType::Gap(Gap::from((id.to_string(), value))));
"gap" | "columnGap" | "rowGap" => {
final_properties.insert(id.to_string(), StyleValueType::Gap(Gap::from((id.to_string(), value))));
}
"rowGap" => {
final_properties.insert("rowGap".to_string(), StyleValueType::Gap(Gap::from((id.to_string(), value))));
"margin" | "padding" => {
final_properties.insert(id.to_string(), StyleValueType::MarginPadding(MarginPadding::from((id.to_string(), value))));
}
"marginTop" | "marginBottom" | "marginLeft" | "marginRight" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "top" | "bottom" | "left" | "right" => {
final_properties.insert(id.to_string(), StyleValueType::LengthValueProperty(LengthValueProperty::from((id.to_string(), value))));
@@ -136,6 +139,9 @@ pub fn parse_style_properties(properties: &Vec<(String, Property)>) -> HashMap<S
"borderTop" | "borderBottom" | "borderLeft" | "borderRight" => {
final_properties.insert(property_name.to_string(), StyleValueType::Border(Border::from((id.to_string(), value))));
}
"transform" => {
final_properties.insert(property_name.to_string(), StyleValueType::Transform(Transform::from((id.to_string(), value))));
}
_ => {
// position、zIndex等... 会自动处理 单位、数字等相关信息
final_properties.insert(property_name.to_string(), StyleValueType::Normal(Normal::new(id.to_string(), value.value_to_css_string(PrinterOptions::default()).unwrap())));
12 changes: 9 additions & 3 deletions src/style_propetries/border.rs
Original file line number Diff line number Diff line change
@@ -145,9 +145,15 @@ impl ToExpr for Border {
let mut props: Vec<(PropName, Expr)> = vec![];
match prop_name.as_str() {
"border" => {
props.push((generate_prop_name!("borderWidth"), generate_expr_by_border_side_width!(self.width.clone().unwrap().top.unwrap())));
props.push((generate_prop_name!("borderStyle"), generate_expr_by_line_style!(self.style.clone().unwrap().top.unwrap(), Platform::Harmony)));
props.push((generate_prop_name!("borderColor"), generate_string_by_css_color!(self.color.clone().unwrap().top.unwrap())));
vec!["borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth"].iter().for_each(|item| {
props.push((generate_prop_name!(item.to_owned()), generate_expr_by_border_side_width!(self.width.clone().unwrap().top.unwrap())));
});
vec!["borderTopStyle", "borderRightStyle", "borderBottomStyle", "borderLeftStyle"].iter().for_each(|item| {
props.push((generate_prop_name!(item.to_owned()), generate_expr_by_line_style!(self.style.clone().unwrap().top.unwrap(), Platform::Harmony)));
});
vec!["borderTopColor", "borderRightColor", "borderBottomColor", "borderLeftColor"].iter().for_each(|item| {
props.push((generate_prop_name!(item.to_owned()), generate_string_by_css_color!(self.color.clone().unwrap().top.unwrap())));
});
PropertyTuple::Array(props)
},
"borderTop" => {
8 changes: 4 additions & 4 deletions src/style_propetries/border_color.rs
Original file line number Diff line number Diff line change
@@ -83,16 +83,16 @@ impl ToExpr for BorderColor {
fn to_expr(&self) -> PropertyTuple {
let mut props: Vec<(PropName, Expr)> = vec![];
if let Some(top) = &self.top {
props.push((generate_prop_name!(self.id.clone()), generate_string_by_css_color!(top)))
props.push((generate_prop_name!("borderTopColor"), generate_string_by_css_color!(top)))
}
if let Some(bottom) = &self.bottom {
props.push((generate_prop_name!(self.id.clone()), generate_string_by_css_color!(bottom)))
props.push((generate_prop_name!("borderBottomColor"), generate_string_by_css_color!(bottom)))
}
if let Some(left) = &self.left {
props.push((generate_prop_name!(self.id.clone()), generate_string_by_css_color!(left)))
props.push((generate_prop_name!("borderLeftColor"), generate_string_by_css_color!(left)))
}
if let Some(right) = &self.right {
props.push((generate_prop_name!(self.id.clone()), generate_string_by_css_color!(right)))
props.push((generate_prop_name!("borderRightColor"), generate_string_by_css_color!(right)))
}
PropertyTuple::Array(props)
}
9 changes: 5 additions & 4 deletions src/style_propetries/border_radius.rs
Original file line number Diff line number Diff line change
@@ -87,17 +87,18 @@ impl From<(String, &Property<'_>)> for BorderRadius {
impl ToExpr for BorderRadius {
fn to_expr(&self) -> PropertyTuple {
let mut props: Vec<(PropName, Expr)> = vec![];

if let Some(top) = &self.top_left {
props.push((generate_prop_name!(self.id.clone()), generate_expr_by_dimension_percentage!(top)))
props.push((generate_prop_name!("borderTopLeftRadius"), generate_expr_by_dimension_percentage!(top)))
}
if let Some(bottom) = &self.top_right {
props.push((generate_prop_name!(self.id.clone()), generate_expr_by_dimension_percentage!(bottom)))
props.push((generate_prop_name!("borderTopRightRadius"), generate_expr_by_dimension_percentage!(bottom)))
}
if let Some(left) = &self.bottom_left {
props.push((generate_prop_name!(self.id.clone()), generate_expr_by_dimension_percentage!(left)))
props.push((generate_prop_name!("borderBottomLeftRadius"), generate_expr_by_dimension_percentage!(left)))
}
if let Some(right) = &self.bottom_right {
props.push((generate_prop_name!(self.id.clone()), generate_expr_by_dimension_percentage!(right)))
props.push((generate_prop_name!("borderBottomRightRadius"), generate_expr_by_dimension_percentage!(right)))
}
PropertyTuple::Array(props)
}
8 changes: 4 additions & 4 deletions src/style_propetries/border_style.rs
Original file line number Diff line number Diff line change
@@ -109,16 +109,16 @@ impl ToExpr for BorderStyle {
fn to_expr(&self) -> PropertyTuple {
let mut props: Vec<(PropName, Expr)> = vec![];
if let Some(top) = &self.top {
props.push((generate_prop_name!(self.id.clone()), generate_expr_by_line_style!(top, Platform::Harmony)))
props.push((generate_prop_name!("borderTopStyle"), generate_expr_by_line_style!(top, Platform::Harmony)))
}
if let Some(bottom) = &self.bottom {
props.push((generate_prop_name!(self.id.clone()), generate_expr_by_line_style!(bottom, Platform::Harmony)))
props.push((generate_prop_name!("borderBottomStyle"), generate_expr_by_line_style!(bottom, Platform::Harmony)))
}
if let Some(left) = &self.left {
props.push((generate_prop_name!(self.id.clone()), generate_expr_by_line_style!(left, Platform::Harmony)))
props.push((generate_prop_name!("borderLeftStyle"), generate_expr_by_line_style!(left, Platform::Harmony)))
}
if let Some(right) = &self.right {
props.push((generate_prop_name!(self.id.clone()), generate_expr_by_line_style!(right, Platform::Harmony)))
props.push((generate_prop_name!("borderRightStyle"), generate_expr_by_line_style!(right, Platform::Harmony)))
}
PropertyTuple::Array(props)
}
8 changes: 4 additions & 4 deletions src/style_propetries/border_width.rs
Original file line number Diff line number Diff line change
@@ -97,16 +97,16 @@ impl ToExpr for BorderWidth {
fn to_expr(&self) -> PropertyTuple {
let mut props: Vec<(PropName, Expr)> = vec![];
if let Some(top) = &self.top {
props.push((generate_prop_name!(self.id.clone()), generate_expr_by_border_side_width!(top)))
props.push((generate_prop_name!("borderTopWidth"), generate_expr_by_border_side_width!(top)))
}
if let Some(bottom) = &self.bottom {
props.push((generate_prop_name!(self.id.clone()), generate_expr_by_border_side_width!(bottom)))
props.push((generate_prop_name!("borderBottomWidth"), generate_expr_by_border_side_width!(bottom)))
}
if let Some(left) = &self.left {
props.push((generate_prop_name!(self.id.clone()), generate_expr_by_border_side_width!(left)))
props.push((generate_prop_name!("borderLeftWidth"), generate_expr_by_border_side_width!(left)))
}
if let Some(right) = &self.right {
props.push((generate_prop_name!(self.id.clone()), generate_expr_by_border_side_width!(right)))
props.push((generate_prop_name!("borderRightWidth"), generate_expr_by_border_side_width!(right)))
}
PropertyTuple::Array(props)
}
2 changes: 1 addition & 1 deletion src/style_propetries/color.rs
Original file line number Diff line number Diff line change
@@ -2,4 +2,4 @@
use crate::{generate_color_property, generate_prop_name};
use super::{traits::ToExpr, unit::PropertyTuple};
// 生成property_name的value类型为 Size的属性
generate_color_property![ColorProperty, Color];
generate_color_property![ColorProperty, Color, BackgroundColor];
98 changes: 98 additions & 0 deletions src/style_propetries/flex.rs
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
use lightningcss::properties::Property;

use crate::{generate_invalid_expr, generate_prop_name, generate_tpl_expr};

use super::{flex_basis::FlexBasis, number::NumberProperty, traits::ToExpr, unit::PropertyTuple};



#[derive(Debug, Clone)]
pub struct Flex {
pub id: String,
pub value: Option<FlexValue>
}

#[derive(Debug, Clone)]
pub struct FlexValue {
grow: NumberProperty,
shrink: NumberProperty,
basis: FlexBasis
}

impl ToExpr for Flex {
fn to_expr(&self) -> PropertyTuple {
let mut props = vec![];
if let Some(value) = &self.value {
match value.basis.to_rn_expr() {
PropertyTuple::One(_, val) => props.push((generate_prop_name!("flexBasis"), val)),
_ => {}
};
match value.grow.to_rn_expr() {
PropertyTuple::One(_, val) => props.push((generate_prop_name!("flexGrow"), val)),
_ => {}
};
match value.shrink.to_rn_expr() {
PropertyTuple::One(_, val) => props.push((generate_prop_name!("flexShrink"), val)),
_ => {}
};
PropertyTuple::Array(props)
} else {
PropertyTuple::One(
generate_prop_name!("flex"),
generate_invalid_expr!()
)
}
}

fn to_rn_expr(&self) -> PropertyTuple {
let mut props = vec![];

if let Some(value) = &self.value {
match value.grow.to_rn_expr() {
PropertyTuple::One(_, val) => props.push(val),
_ => {}
};
match value.shrink.to_rn_expr() {
PropertyTuple::One(_, val) => props.push(val),
_ => {}
};
match value.basis.to_rn_expr() {
PropertyTuple::One(_, val) => props.push(val),
_ => {}
};
PropertyTuple::One(
generate_prop_name!("flex"),
generate_tpl_expr!(props)
)
} else {
PropertyTuple::One(
generate_prop_name!("flex"),
generate_invalid_expr!()
)
}
}
}

impl From<(String, &Property<'_>)> for Flex {
fn from(prop: (String, &Property<'_>)) -> Self {

match &prop.1 {
Property::Flex(flex, _) => {
Flex {
id: prop.0,
value: Some(FlexValue {
basis: FlexBasis::from_value(("flexBasis".to_string(), flex.basis.clone())),
grow: NumberProperty::from_value(("flexGrow".to_string(), flex.grow)),
shrink: NumberProperty::from_value(("flexShrink".to_string(),flex.shrink))
})
}
},
_ => {
Flex {
id: prop.0,
value: None
}
}
}
}
}
12 changes: 12 additions & 0 deletions src/style_propetries/flex_basis.rs
Original file line number Diff line number Diff line change
@@ -61,3 +61,15 @@ impl From<(String, &Property<'_>)> for FlexBasis {
}
}
}

impl FlexBasis {
pub fn from_value(prop: (String, LengthPercentageOrAuto)) -> Self {
FlexBasis {
id: prop.0,
value: match prop.1 {
LengthPercentageOrAuto::Auto => EnumValue::String("auto".to_string()),
LengthPercentageOrAuto::LengthPercentage(value) => generate_dimension_percentage!(EnumValue, value),
}
}
}
}
Loading

0 comments on commit 2226548

Please # to comment.