feat: 支持css变量

Author: heiazu

README.md

@@ -10,10 +10,12 @@
 import { parse } from '@tarojs/parse-css-to-stylesheet'
 
 // Harmony
-const code = parse(jsxCode, [cssCode1, cssCode2, ...], {
+const { code, cssVariables } = parse(jsxCode, [cssCode1, cssCode2, ...], {
   platformString: 'Harmony',
   isEnableNesting: true // 支持解析嵌套选择器，默认关闭
 })
+// code: jsx代码 string
+// cssVariables: css变量 string
 ```
 
 在 Harmony 中，编译结果会依赖`@tarojs/plugin-platform-harmony-ets`中提供的几个包方法：
@@ -203,6 +205,8 @@ const code = parse(jsxCode, [cssCode1, cssCode2, ...], {
 
 若使用 CSS 变量，挂载的属性应当挂载`:root`选择器上
 
+⚠️：暂不支持`var传递3个及以上参数`, 如`height: var(--h, --he, 30px);`、`margin: var(--m, 30px 30px);`
+
 ```css
 :root {
   --color: #403635;

__test__/fixure/pesudo.scss

@@ -1,10 +1,11 @@
 :root {
-  --color: #403635;
   --angle: 30deg;
-  --var: var(--color, 30px)
+  --var: var(--aaa, #00f);
+  --color: #f00;
 }
 
-.hello {
-  height: 30px;
-  color: var(--color);
+.container {
+  height: 200px;
+  width: 200px;
+  background-color: var(--var, --color);
 }

index.d.ts

@@ -9,5 +9,7 @@ export interface ParseOptions {
 }
 export interface ParseResult {
   code: string
+  cssVariables?: string
 }
-export function parse(component: string, styles: Array<string>, options: ParseOptions): string
+export function parse(component: string, styles: Array<string>, options: ParseOptions): ParseResult
+export function combineCssVariables(variables: Array<string>): string | null

index.js

@@ -252,6 +252,7 @@ if (!nativeBinding) {
   throw new Error(`Failed to load native binding`)
 }
 
-const { parse } = nativeBinding
+const { parse, combineCssVariables } = nativeBinding
 
 module.exports.parse = parse
+module.exports.combineCssVariables = combineCssVariables

src/constants.rs

@@ -8,6 +8,10 @@ pub const COMBINE_NESTING_STYLE: &'static str = "__combine_nesting_style__";
 pub const NESTINT_STYLE_DATA: &'static str = "__nesting_style_data__";
 pub const CALC_DYMAMIC_STYLE: &'static str = "calcDynamicStyle";
 pub const CALC_STATIC_STYLE: &'static str = "calcStaticStyle";
+pub const CSS_VARIABLE_MAP: &'static str = "__css_var_map__";
+pub const CSS_VAR_FN: &'static str = "__var_fn";
+pub const LAZY_CSS_VAR_FN: &'static str = "__lazy_var_fn";
+
 
 
 pub const RN_CONVERT_STYLE_PX_FN: &'static str = "scalePx2dp";

src/document.rs

@@ -33,7 +33,7 @@ impl JSXDocument {
     }
   }
 
-  pub fn parse(&mut self, jsx: String, cm: Lrc<SourceMap>, comments: &SingleThreadedComments) {
+  pub fn jsx_parse (&mut self, jsx: String, cm: Lrc<SourceMap>, comments: &SingleThreadedComments) -> Program {
     // 初始化 swc 的错误处理器
     let handler = Handler::with_tty_emitter(ColorConfig::Auto, true, false, Some(cm.clone()));
 
@@ -59,6 +59,11 @@ impl JSXDocument {
       .parse_program()
       .map_err(|e| e.into_diagnostic(&handler).emit())
       .expect("解析 JSX 失败");
+    program
+  }
+
+  pub fn parse(&mut self, jsx: String, cm: Lrc<SourceMap>, comments: &SingleThreadedComments) {
+    let program = self.jsx_parse(jsx, cm, comments);
 
     let globals = Globals::default();
     GLOBALS.set(&globals, || {

src/lib.rs

@@ -36,10 +36,11 @@ pub struct ParseOptions {
 #[napi(object)]
 pub struct ParseResult {
   pub code: String,
+  pub css_variables: Option<String>,
 }
 
 #[napi]
-pub fn parse(component: String, styles: Vec<String>, options: ParseOptions) -> String {
+pub fn parse(component: String, styles: Vec<String>, options: ParseOptions) -> ParseResult {
 
   let platform = match options.platform_string.as_str() {
     "ReactNative" => Platform::ReactNative,
@@ -67,6 +68,12 @@ pub fn parse(component: String, styles: Vec<String>, options: ParseOptions) -> S
     is_enable_nesting = style_data.has_nesting;
   }
 
+  // 解析CSS变量
+  let variable_code = parse_css_variables::write(
+    parse_css_variables::parse(style_data.css_variables.borrow().clone())
+  );
+
+
   let program = Rc::new(RefCell::new(document.program.as_ref().unwrap().clone()));
   let jsx_record = Rc::new(RefCell::new(document.jsx_record.as_ref().unwrap().clone()));
   let mut style_write = StyleWrite::new(
@@ -92,5 +99,13 @@ pub fn parse(component: String, styles: Vec<String>, options: ParseOptions) -> S
   }
   let code = String::from_utf8(buf).unwrap().replace("\r\n", "\n");
 
-  code
+  ParseResult {
+    code,
+    css_variables: variable_code,
+  }
 }
+
+#[napi]
+pub fn combine_css_variables(variables: Vec<String>) -> Option<String> {
+  parse_css_variables::combine_css_variables(variables)
+}