fix: 修复webkit适配错误，background:none\border:none解析异常

Author: heiazu

index.d.ts

@@ -9,4 +9,4 @@ export interface ParseOptions {
 export interface ParseResult {
   code: string
 }
-export function parse(styles: Array<string>, options: ParseOptions): ParseResult
+export declare function parse(styles: Array<string>, options: ParseOptions): ParseResult

src/parse_style_properties.rs

@@ -4,7 +4,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, 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}};
+use crate::{generate_expr_lit_str, style_parser::KeyFrameItem, style_propetries::{animation::Animation, 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)>, keyframes_map: Option<Rc<RefCell<HashMap<String, Vec<KeyFrameItem>>>>>) -> Vec<StyleValueType> {
   let mut final_properties = vec![];
@@ -32,9 +32,21 @@ pub fn parse_style_properties(properties: &Vec<(String, Property)>, keyframes_ma
       continue;
     }
 
-    
-    let property_name = id.as_str();
-    match property_name {
+    let mut property_name = id.as_str();
+
+    // 移除部分厂商前缀: Webkit, Moz, 并且把首字母小写
+    if property_name.starts_with("Webkit") {
+      property_name = &property_name[6..];
+    } else if property_name.starts_with("Moz") {
+      property_name = &property_name[3..];
+    }
+
+    // 将property_name首字母小写
+    let mut property_name = property_name.to_string();
+    lowercase_first(&mut property_name);
+
+
+    match property_name.as_str() {
           // 基础样式
           "alignContent" => {
             final_properties.push(StyleValueType::FlexAlign(FlexAlign::from((id.to_string(), value))));
@@ -226,7 +238,7 @@ pub fn parse_style_properties(properties: &Vec<(String, Property)>, keyframes_ma
           "zIndex" => {
             final_properties.push(StyleValueType::Normal(Normal::new(CSSPropertyType::ZIndex, value.value_to_css_string(PrinterOptions::default()).unwrap())));
           }
-          "WebkitLineClamp" => {
+          "lineClamp" => {
             final_properties.push(StyleValueType::Normal(Normal::new(CSSPropertyType::WebkitLineClamp, value.value_to_css_string(PrinterOptions::default()).unwrap())));
           }
           "wordBreak" => {

src/style_propetries/background.rs

@@ -1,13 +1,12 @@
 use lightningcss::{
-    properties::{ background::Background as LNBackground, Property },
-    values::color::CssColor,
+    printer::PrinterOptions, properties::{ background::Background as LNBackground, Property }, traits::ToCss, values::color::CssColor
 };
 use smallvec::SmallVec;
 
 use crate::generate_expr_lit_color;
 
 use super::{
-    background_image::{ parse_background_image_item, BackgroundImage },
+    background_image::{ parse_background_image_item, BackgroundImage, BackgroundImageKind },
     background_position::{ parse_background_position_item, BackgroundPosition },
     background_repeat::{ parse_background_repeat_item, BackgroundRepeat },
     background_size::{ parse_background_size_item, BackgroundSize },
@@ -35,6 +34,12 @@ fn parse_background(background: &SmallVec<[LNBackground<'_>; 1]>) -> Background
         if item.color != CssColor::default() {
             background_color = Some(item.color.clone());
         }
+        
+        if item.to_css_string(PrinterOptions::default()).unwrap() == "none" {
+            // 如果是none，就清空所有的值
+            background_image = vec![BackgroundImageKind::String("".to_string())];
+            background_color = Some(item.color.clone());
+        }
     }
     let mut bg = Background::new();
     if background_image.len() > 0 {

src/style_propetries/background_image.rs

@@ -149,7 +149,10 @@ pub fn parse_background_image_item(image: &Image) -> Option<BackgroundImageKind>
         Gradient::RepeatingConic(_) => None,
         Gradient::WebKitGradient(_) => None,
       }
-    }
+    },
+    Image::None => {
+      Some(BackgroundImageKind::String("".to_string()))
+    },
     _ => None,
   }
 }

src/style_propetries/border.rs

@@ -1,5 +1,4 @@
-use lightningcss::properties::Property;
-
+use lightningcss::{printer::PrinterOptions, properties::{border::{self, BorderSideWidth}, Property}, traits::ToCss, values::{color, length}};
 use swc_core::ecma::ast::*;
 use crate::{generate_expr_by_length, generate_invalid_expr, generate_expr_by_border_side_width, generate_expr_by_line_style, generate_expr_lit_color };
 
@@ -38,6 +37,21 @@ impl From<(String, &Property<'_>)> for Border {
           color: Some(color),
           width: Some(width),
         };
+
+        if value.to_css_string(PrinterOptions::default()).unwrap() == "none" {
+          let mut style = BorderStyle::new("borderStyle".to_string());
+          style.set_all(border::LineStyle::Solid);
+          let mut color = BorderColor::new("borderColor".to_string());
+          color.set_all(color::CssColor::default());
+          let mut width = BorderWidth::new("borderWidth".to_string());
+          width.set_all(BorderSideWidth::Length(length::Length::Value(length::LengthValue::Px(0.0))));
+          border = Border {
+            id: prop.0.clone(),
+            style: Some(style),
+            color: Some(color),
+            width: Some(width),
+          };
+        }
       }
       Property::BorderTop(value) => {
         let mut style = BorderStyle::new("borderTopStyle".to_string());

src/utils.rs

@@ -7,6 +7,12 @@ use swc_core::ecma::{ast::{ArrayLit, CallExpr, Expr, Function, JSXMemberExpr, JS
 
 use crate::{constants::SelectorType, style_propetries::unit::Platform};
 
+pub fn lowercase_first(s: &mut str) {
+  if let Some(c) = s.get_mut(0..1) {
+      c.make_ascii_lowercase();
+  }
+}
+
 pub fn to_camel_case(s: &str, is_first: bool) -> String {
   let mut result = String::new();
   let mut next_cap = if is_first { true } else { false };