feat: 支持解析高阶组件

heiazu · heiazu · commit e75aa7fae41b · 2024-03-19T20:54:57.000+08:00
diff --git a/__test__/fixure/pesudo.jsx b/__test__/fixure/pesudo.jsx
@@ -3,10 +3,5 @@ import './pesudo.scss'
 
 export default function Pesudo() {
 
-  return <View className='pesudo' style={{
-    height: '10px',
-    width: Math.random() > 0.5 ? '10px' : '20px'
-  }}>
-    <Text className='text'>asdasdasdasdasd</Text>
-  </View>
+  return <View className='pesudo'></View>
 }
diff --git a/__test__/fixure/pesudo.scss b/__test__/fixure/pesudo.scss
@@ -1,17 +1,13 @@
-.pesudo {
-  height: 400px;
-  width: 400px;
-  margin-top: calc(100% - 30px);
+:root {
+  --color: #403635 + #403635;
+  --angle: 30deg;
+  --length: 200px;
+  --res-olution: 300dpi;
+  --url: url("https://www.google.com");
+  --var: var(--color, '48px');
 }
 
-.pesudo:last-child {
-	color: red;
-}
-
-
-.aaa {
-  font-size: 20px;
-  -webkit-line-clamp: 2;
-  text-overflow: ellipsis;
-  color: #00f;
-}
+.hello {
+  height: 30px;
+  color: var(--color);
+}
diff --git a/index.d.ts b/index.d.ts
@@ -7,4 +7,7 @@ export interface ParseOptions {
   platformString: string
   isEnableNesting?: boolean
 }
+export interface ParseResult {
+  code: string
+}
 export function parse(component: string, styles: Array<string>, options: ParseOptions): string
diff --git a/src/lib.rs b/src/lib.rs
@@ -32,6 +32,11 @@ pub struct ParseOptions {
   pub is_enable_nesting: Option<bool>,
 }
 
+#[napi(object)]
+pub struct ParseResult {
+  pub code: String,
+}
+
 #[napi]
 pub fn parse(component: String, styles: Vec<String>, options: ParseOptions) -> String {
 
@@ -85,5 +90,6 @@ pub fn parse(component: String, styles: Vec<String>, options: ParseOptions) -> S
     emitter.emit_program(&program.borrow()).unwrap();
   }
   let code = String::from_utf8(buf).unwrap().replace("\r\n", "\n");
+
   code
 }
diff --git a/src/parse_css_variables.rs b/src/parse_css_variables.rs
@@ -0,0 +1,197 @@
+use std::{collections::HashMap, rc::Rc};
+
+use lightningcss::{properties::{custom::TokenOrValue, Property}, traits::ToCss, values::time::Time};
+use swc_common::{comments::SingleThreadedComments, sync::Lrc, SourceMap, DUMMY_SP};
+use swc_ecma_ast::{AssignExpr, AssignOp, CallExpr, Callee, ComputedPropName, Expr, ExprOrSpread, ExprStmt, KeyValueProp, Lit, MemberExpr, MemberProp, Module, ModuleItem, Number, ObjectLit, PatOrExpr, Program, Prop, PropName, PropOrSpread, Stmt};
+use swc_ecma_codegen::{text_writer::JsWriter, Emitter};
+use swc_ecma_utils::quote_ident;
+
+use crate::style_propetries::unit::{convert_color_keywords_to_hex, generate_expr_by_length_value, Platform};
+
+
+pub fn parse(properties: Vec<(String, Property<'_>)>) -> HashMap<String, Expr> {
+
+  // properties.iter().for_each(|(key, value)| {
+  //   println!("key: {}, value: {:?}", key, value);
+  // });
+  let mut css_variables = HashMap::new();
+  properties.iter().for_each(|(key, value)| {
+    let mut expr: Option<Expr> = None;
+    match value.clone() {
+      Property::Custom(custom) => {
+        let token_or_value = custom.value.0.get(0);
+        if let Some(token_or_value) = token_or_value {
+          expr = Some(get_token_or_value(token_or_value.to_owned()));
+        }
+      },
+      _ => {}
+    };
+    if let Some(expr) = expr {
+      css_variables.insert(key.to_string(), expr);
+    }
+  });
+  css_variables
+}
+
+
+pub fn write(css_variables: HashMap<String, Expr>) -> String {
+  // css_variables.iter().for_each(|(key, value)| {
+  //   println!("key: {}, value: {:?}", key, value);
+  // });
+
+  let obj = Expr::Object(ObjectLit {
+    span: DUMMY_SP,
+    props: css_variables.iter().map(|(key, value)| {
+      PropOrSpread::Prop(Box::new(Prop::KeyValue(KeyValueProp {
+        key: PropName::Computed(ComputedPropName {
+          span: DUMMY_SP,
+          expr: Box::new(Expr::Lit(Lit::Str(key.to_string().into()))),
+        }),
+        value: Box::new(value.clone()),
+      })))
+    }).collect::<Vec<PropOrSpread>>().into(),
+  });
+  
+  let cm: Lrc<SourceMap> = Default::default();
+  let comments = SingleThreadedComments::default();
+  let program  = Program::Module(Module {
+    span: DUMMY_SP,
+    body: vec![
+      ModuleItem::Stmt(
+        Stmt::Expr(ExprStmt {
+          span: DUMMY_SP,
+          expr: Box::new(Expr::Assign(AssignExpr { 
+            span: DUMMY_SP, 
+            op: AssignOp::Assign,
+            left: PatOrExpr::Expr(Box::new(Expr::Ident(quote_ident!("css_var_map")))), 
+            right: Box::new(obj)
+          }))
+        })
+      ),
+    ],
+    shebang: None,
+  });
+  // 生成代码
+  let mut buf = vec![];
+  {
+    let mut emitter = Emitter {
+      cfg: swc_ecma_codegen::Config::default(),
+      cm: cm.clone(),
+      comments: Some(&comments),
+      wr: JsWriter::new(cm.clone(), "\n", &mut buf, None),
+    };
+    emitter.emit_program(&program).unwrap();
+  }
+  String::from_utf8(buf).unwrap().replace("\r\n", "\n")
+}
+
+pub fn get_token_or_value (token_or_value: TokenOrValue<'_>) -> Expr {
+  match token_or_value {
+    TokenOrValue::Token(_) => {
+      Expr::Lit(Lit::Str("".into()))
+    },
+    TokenOrValue::Color(color) => {
+      let color_string = convert_color_keywords_to_hex(color.to_css_string(lightningcss::stylesheet::PrinterOptions {
+        minify: false,
+        targets: lightningcss::targets::Targets {
+          include: lightningcss::targets::Features::HexAlphaColors,
+          ..lightningcss::targets::Targets::default()
+        },
+        ..lightningcss::stylesheet::PrinterOptions::default()
+      }).unwrap());
+      Expr::Lit(Lit::Str(color_string.into()))
+    },
+    TokenOrValue::UnresolvedColor(_) => {
+      // 解析不到的颜色
+      Expr::Lit(Lit::Str("".into()))
+    },
+    TokenOrValue::Url(url) => {
+      // url("https://www.example.com") => { src: "https://www.example.com" }
+      let url_string = url.url.to_string();
+      Expr::Object(ObjectLit {
+        span: DUMMY_SP,
+        props: vec![
+          PropOrSpread::Prop(Box::new(Prop::KeyValue(KeyValueProp {
+            key: PropName::Ident(quote_ident!("src")),
+            value: Box::new(Expr::Lit(Lit::Str(url_string.into()))),
+          })))
+        ]
+        .into(),
+      })
+    },
+    TokenOrValue::Var(var) => {
+      // var(--color-primary, #000000) => var_fn(css_var_map["--color-primary"], "#000000")
+      let mut expr_or_spead = vec![];
+      let ident_string = var.name.to_css_string(Default::default()).unwrap();
+      expr_or_spead.push(ExprOrSpread {
+        spread: None,
+        expr: Box::new(
+          Expr::Member(MemberExpr {
+            span: DUMMY_SP,
+            obj: Box::new(Expr::Ident(quote_ident!("css_var_map"))),
+            prop: MemberProp::Computed(ComputedPropName {
+              span: DUMMY_SP,
+              expr: Box::new(Expr::Lit(Lit::Str(ident_string.into()))),
+            })
+          })
+        )
+      });
+      if let Some(fallback) = &var.fallback {
+        fallback.0.iter().for_each(|token_or_value| {
+          expr_or_spead.push(ExprOrSpread {
+            spread: None,
+            expr: Box::new(get_token_or_value(token_or_value.to_owned())),
+          })
+        });
+      }
+      Expr::Call(CallExpr {
+        span: Default::default(),
+        callee: Callee::Expr(Box::new(Expr::Ident(quote_ident!("var_fn")))),
+        args: expr_or_spead,
+        type_args: None,
+      })
+     
+    },
+    TokenOrValue::Env(_) => {
+      // 环境变量
+      Expr::Lit(Lit::Str("".into()))
+    },
+    TokenOrValue::Function(_) => {
+      // 函数
+      Expr::Lit(Lit::Str("".into()))
+    },
+    TokenOrValue::Length(length_value) => {
+      generate_expr_by_length_value(&length_value, Platform::Harmony)
+    },
+    TokenOrValue::Angle(angle) => {
+      let angle_string = angle.to_css_string(Default::default()).unwrap();
+      Expr::Lit(Lit::Str(angle_string.into()))
+    },
+    TokenOrValue::Time(time) => {
+      let time_num = match time {
+        Time::Seconds(s) => s,
+        Time::Milliseconds(m) => m * 60.0,
+      };
+      Expr::Lit(Lit::Num(Number {
+        span: DUMMY_SP,
+        value: time_num as f64,
+        raw: None,
+      }))
+    },
+    TokenOrValue::Resolution(resolution) => {
+      let string = resolution.to_css_string(Default::default()).unwrap();
+      Expr::Lit(Lit::Str(string.into()))
+    },
+    TokenOrValue::DashedIdent(dashed_ident) => {
+      let ident_string = dashed_ident.to_css_string(Default::default()).unwrap();
+      Expr::Member(MemberExpr {
+        span: DUMMY_SP,
+        obj: Box::new(Expr::Ident(quote_ident!("css_var_map"))),
+        prop: MemberProp::Computed(ComputedPropName {
+          span: DUMMY_SP,
+          expr: Box::new(Expr::Lit(Lit::Str(ident_string.into()))),
+        })
+      })
+    },
+  }
+}
diff --git a/src/style_parser.rs b/src/style_parser.rs
@@ -11,6 +11,7 @@ pub type StyleValue = Vec<StyleValueType>;
 pub struct StyleData<'i> {
   pub pesudo_style_record: Rc<RefCell<HashMap<SpanKey, Vec<(String, Vec<(String, Property<'i>)>)>>>>,
   pub all_style: Rc<RefCell<HashMap<String, StyleValue>>>,
+  pub css_variables: Rc<RefCell<Vec<(String, Property<'i>)>>>,
   pub has_nesting: bool
 }
 
@@ -96,12 +97,26 @@ impl<'i> StyleParser<'i> {
     let mut all_style = self.all_style.borrow_mut();
     let mut style_record = HashMap::new();
     let mut pesudo_style_record = HashMap::new();
-    let mut final_all_style = self.calc_style_record(&mut all_style);
+    let mut css_variables = vec![];
     // 是否含有嵌套选择器
     let mut has_nesting = false;
 
     // final_all_style 转换为驼峰命名
-    let mut final_all_style = final_all_style.iter_mut().map(|(selector, style_value)| {
+    let mut final_all_style = vec![];
+    self.calc_style_record(&mut all_style).iter_mut().for_each(|(selector, style_value)| {
+      // 判断是否含有伪类:root
+      if selector == ":root" {
+        css_variables = style_value.declaration.declarations.iter().map(|property| {
+          (
+            property
+              .property_id()
+              .to_css_string(PrinterOptions::default())
+              .unwrap(),
+            property.clone(),
+          )
+        }).collect::<Vec<(_, _)>>();
+        return;
+      }
       let properties = style_value.declaration.declarations.iter().map(|property| {
         (
           to_camel_case(
@@ -120,16 +135,15 @@ impl<'i> StyleParser<'i> {
       if selector.contains(" ") || selector.chars().filter(|&c| c == '.').count() > 1 {
         has_nesting = true
       }
-      (selector.to_owned(), properties)
-    })
-    .collect::<Vec<(_, _)>>();
+      final_all_style.push((selector.to_owned(), properties));
+    });
 
     let mut pesudo_selector = None;
     for (selector, style_value) in final_all_style.iter_mut() {
       // 用于查询的选择器
       let mut element_selector = selector.clone();
       // 判断是否伪类(暂时支持鸿蒙)
-      if selector.contains(":") && self.platform == Platform::Harmony {
+      if (selector.contains(":before") || selector.contains(":after")) && self.platform == Platform::Harmony {
         let _selectors = selector.split(":").collect::<Vec<&str>>();
         pesudo_selector = _selectors[1].parse::<String>().ok();
         // 伪类需要把 : 之后的选择器去掉，只保留 : 之前的选择器，用于查询所属的element
@@ -172,6 +186,7 @@ impl<'i> StyleParser<'i> {
     StyleData {
       pesudo_style_record: Rc::new(RefCell::new(final_pesudo_style_record)),
       all_style: Rc::new(RefCell::new(final_all_style)),
+      css_variables: Rc::new(RefCell::new(css_variables)),
       has_nesting
     }
   }
diff --git a/src/visitor.rs b/src/visitor.rs

Original file line number	Diff line number	Diff line change
`@@ -7,4 +7,7 @@ export interface ParseOptions {`
`7`	`7`	`platformString: string`
`8`	`8`	`isEnableNesting?: boolean`
`9`	`9`	`}`
	`10`	`+export interface ParseResult {`
	`11`	`+ code: string`
	`12`	`+}`
`10`	`13`	`export function parse(component: string, styles: Array<string>, options: ParseOptions): string`
Original file line number	Diff line number	Diff line change
`@@ -32,6 +32,11 @@ pub struct ParseOptions {`
`32`	`32`	`pub is_enable_nesting: Option<bool>,`
`33`	`33`	`}`
`34`	`34`
	`35`	`+#[napi(object)]`
	`36`	`+pub struct ParseResult {`
	`37`	`+ pub code: String,`
	`38`	`+}`
	`39`	`+`
`35`	`40`	`#[napi]`
`36`	`41`	`pub fn parse(component: String, styles: Vec<String>, options: ParseOptions) -> String {`
`37`	`42`
`@@ -85,5 +90,6 @@ pub fn parse(component: String, styles: Vec<String>, options: ParseOptions) -> S`
`85`	`90`	`emitter.emit_program(&program.borrow()).unwrap();`
`86`	`91`	`}`
`87`	`92`	`let code = String::from_utf8(buf).unwrap().replace("\r\n", "\n");`
	`93`	`+`
`88`	`94`	`code`
`89`	`95`	`}`