From 6303dbe53047fbea98c76fa7391d3b5ebaffb14a Mon Sep 17 00:00:00 2001
From: "ext.yangguangxu3" <ext.yangguangxu3@jd.com>
Date: Tue, 3 Sep 2024 19:53:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0css=E5=8F=98=E9=87=8F?=
 =?UTF-8?q?=E9=80=8F=E4=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/parse_style_properties.rs            | 12 +++++++--
 src/style_parser.rs                      | 11 +++++++--
 src/style_propetries/background.rs       |  1 +
 src/style_propetries/style_value_type.rs | 17 ++++++++++++-
 src/style_propetries/unit.rs             |  3 ++-
 src/visitor.rs                           | 31 +++++++++++++++++++++++-
 6 files changed, 68 insertions(+), 7 deletions(-)

diff --git a/src/parse_style_properties.rs b/src/parse_style_properties.rs
index 97176ae..481ed4f 100644
--- a/src/parse_style_properties.rs
+++ b/src/parse_style_properties.rs
@@ -1,8 +1,8 @@
 
-use lightningcss::{properties::{custom::TokenOrValue, Property}, stylesheet::PrinterOptions};
+use lightningcss::{properties::{custom::TokenOrValue, Property}, stylesheet::PrinterOptions, traits::ToCss};
 use swc_core::{common::DUMMY_SP, ecma::{ast::{self}, utils::quote_ident}};
 use swc_core::ecma::ast::*;
-
+use crate::style_propetries::style_value_type::{Variable};
 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};
 
 pub fn parse_style_properties(properties: &Vec<(String, Property)>) -> Vec<StyleValueType> {
@@ -25,6 +25,14 @@ pub fn parse_style_properties(properties: &Vec<(String, Property)>) -> Vec<Style
           }
         });
       },
+      Property::Custom(custom) => {
+        if (id.as_str().starts_with("--")) {
+          final_properties.push(StyleValueType::Variable(Variable {
+            id: custom.name.to_css_string(PrinterOptions::default()).unwrap(),
+            value: value.value_to_css_string(PrinterOptions::default()).unwrap(),
+          }));
+        }
+      }
       _ => {}
     };
     if is_env {
diff --git a/src/style_parser.rs b/src/style_parser.rs
index 4384548..54ca13c 100644
--- a/src/style_parser.rs
+++ b/src/style_parser.rs
@@ -203,14 +203,21 @@ impl<'i> StyleParser<'i> {
     binding.iter_mut().for_each(|(media_index, selector, style_value)| {
       let properties = style_value.declaration.declarations.iter().map(|property| {
         (
-          to_camel_case(
+          if(property.property_id().to_css_string(PrinterOptions::default()).unwrap().as_str().starts_with("--")) {
+            property
+            .property_id()
+            .to_css_string(PrinterOptions::default())
+            .unwrap()
+          } else  {
+            to_camel_case(
             property
               .property_id()
               .to_css_string(PrinterOptions::default())
               .unwrap()
               .as_str(),
             false,
-          ),
+            )
+          },
           property.clone(),
         )
       })
diff --git a/src/style_propetries/background.rs b/src/style_propetries/background.rs
index f7bdf13..d25afa8 100644
--- a/src/style_propetries/background.rs
+++ b/src/style_propetries/background.rs
@@ -124,6 +124,7 @@ impl ToExpr for Background {
                             PropertyTuple::One(_, val) =>
                                 props.push((CSSPropertyType::BackgroundPosition, val)),
                             PropertyTuple::Array(val) => props.extend(val),
+                            _=> {}
                         }
                     }
                     if let Some(repeat) = &self.repeat {
diff --git a/src/style_propetries/style_value_type.rs b/src/style_propetries/style_value_type.rs
index ce2a663..8f40483 100644
--- a/src/style_propetries/style_value_type.rs
+++ b/src/style_propetries/style_value_type.rs
@@ -3,6 +3,17 @@ 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};
 
+#[derive(Debug, Clone)]
+pub struct  Variable {
+  pub id: String,
+  pub value: String
+}
+
+impl ToExpr for Variable {
+  fn to_expr(&self) -> PropertyTuple {
+    PropertyTuple::Variable{key: self.id.clone(),value: self.value.clone() }
+  }
+}
 
 #[derive(Debug, Clone)]
 pub enum StyleValueType {
@@ -55,7 +66,8 @@ pub enum StyleValueType {
   Visibility(Visibility),
   Opacity(Opacity),
   WordBreak(WordBreak),
-  WhiteSpace(WhiteSpace)
+  WhiteSpace(WhiteSpace),
+  Variable(Variable)
 }
 
 impl ToStyleValue for StyleValueType {
@@ -211,6 +223,9 @@ impl ToStyleValue for StyleValueType {
       StyleValueType::WhiteSpace(value) => {
         generate_expr_based_on_platform!(platform, value)
       }
+      StyleValueType::Variable(value) => {
+        generate_expr_based_on_platform!(platform, value)
+      }
     }
   }
 }
\ No newline at end of file
diff --git a/src/style_propetries/unit.rs b/src/style_propetries/unit.rs
index 92159d2..2f30213 100644
--- a/src/style_propetries/unit.rs
+++ b/src/style_propetries/unit.rs
@@ -17,7 +17,8 @@ pub enum PropertyTuple {
   // 一对一属性：height: 100px 解析 => (height, "100px")
   One(CSSPropertyType, Expr),
   // 一对多属性：flex: 1 解析 => vec![(flexGrow, "1"), (flexShrink, "1"), (flexBasis, "0%")]
-  Array(Vec<(CSSPropertyType, Expr)>)
+  Array(Vec<(CSSPropertyType, Expr)>),
+  Variable{key: String, value: String}
 }
 
 // 根据长度单位生成对应的表达式
diff --git a/src/visitor.rs b/src/visitor.rs
index a253355..4944b62 100644
--- a/src/visitor.rs
+++ b/src/visitor.rs
@@ -33,7 +33,8 @@ pub fn parse_style_values(value: Vec<StyleValueType>, platform: Platform) -> Vec
 
   // 使用有序表
   let mut index_map = IndexMap::new();
-  
+  let mut variable_map = IndexMap::new();
+
   value.into_iter().for_each(|style_value| {
     let prop = style_value.to_expr(platform.clone());
     match prop {
@@ -47,6 +48,9 @@ pub fn parse_style_values(value: Vec<StyleValueType>, platform: Platform) -> Vec
           index_map.insert(id.clone(), Box::new(expr));
         })
       }
+      PropertyTuple::Variable { key, value} => {
+        variable_map.insert(key.clone(), value.clone());
+      }
     }
   });
 
@@ -71,6 +75,31 @@ pub fn parse_style_values(value: Vec<StyleValueType>, platform: Platform) -> Vec
     }))
   });
 
+  variable_map.into_iter().for_each(|(key, value)| {
+    let key_ = key.to_string();
+    prop_or_spread.push(Expr::Array(ArrayLit {
+      span: DUMMY_SP,
+      elems: vec![
+        Some(ExprOrSpread {
+          spread: None,
+          expr: Box::new(Expr::Lit(Lit::Str(Str {
+            span: DUMMY_SP,
+            value: MyAtom::new(key_),
+            raw: None
+          })))
+        }),
+        Some(ExprOrSpread {
+          spread: None,
+          expr: Box::new(Expr::Lit(Lit::Str(Str {
+            span: DUMMY_SP,
+            value: MyAtom::new(value),
+            raw: None
+          })))
+        })
+      ]
+    }))
+  });
+
   prop_or_spread.into_iter().map(|expr| {
     Some(ExprOrSpread {
       spread: None,