Impl styleVars

.changeset/small-buckets-joke.md

@@ -0,0 +1,6 @@
+---
+"@devup-ui/wasm": patch
+"@devup-ui/react": patch
+---
+
+Implement styleVars

bindings/devup-ui-wasm/src/lib.rs

@@ -201,20 +201,20 @@
             color_interface_name,
             color_keys
                 .into_iter()
-                .map(|key| format!("${}:null;", key))
+                .map(|key| format!("${key}:null;"))
                 .collect::<Vec<String>>()
                 .join(""),
             typography_interface_name,
             typography_keys
                 .into_iter()
-                .map(|key| format!("{}:null;", key))
+                .map(|key| format!("{key}:null;"))
                 .collect::<Vec<String>>()
                 .join(""),
             theme_interface_name,
             theme_keys
                 .into_iter()
                 // key to pascal
-                .map(|key| format!("{}:null;", key))
+                .map(|key| format!("{key}:null;"))
                 .collect::<Vec<String>>()
                 .join("")
         )

libs/css/src/lib.rs

@@ -21,7 +21,7 @@
     .into_iter()
     .enumerate()
     {
-        map.insert(format!("&:{}", selector), idx as u8);
+        map.insert(format!("&:{selector}"), idx as u8);
     }
     map
 });
@@ -54,8 +54,8 @@
     let t = if selector.chars().filter(|c| c == &'&').count() == 1 {
         selector
             .split('&')
-            .last()
-            .map(|a| format!("&{}", a))
+            .next_back()
+            .map(|a| format!("&{a}"))
             .unwrap_or(selector.to_string())
     } else {
         selector.to_string()
@@ -129,7 +129,7 @@
             "{}",
             match self {
                 StyleSelector::Selector(value) => value.to_string(),
-                StyleSelector::Media(value) => format!("@{}", value),
+                StyleSelector::Media(value) => format!("@{value}"),
             }
         )
     }
@@ -138,11 +138,11 @@
 pub fn merge_selector(class_name: &str, selector: Option<&StyleSelector>) -> String {
     if let Some(selector) = selector {
         match selector {
-            StyleSelector::Selector(value) => value.replace("&", &format!(".{}", class_name)),
-            StyleSelector::Media(_) => format!(".{}", class_name),
+            StyleSelector::Selector(value) => value.replace("&", &format!(".{class_name}")),
+            StyleSelector::Media(_) => format!(".{class_name}"),
         }
     } else {
-        format!(".{}", class_name)
+        format!(".{class_name}")
     }
 }
 
@@ -359,7 +359,7 @@
         }
     }
 
-    format!("#{}", ret)
+    format!("#{ret}")
 }
 
 pub fn optimize_value(value: &str) -> String {
@@ -377,13 +377,13 @@
     }
     // remove ; from dynamic value
     for str_symbol in ["", "`", "\"", "'"] {
-        if ret.ends_with(&format!(";{}", str_symbol)) {
+        if ret.ends_with(&format!(";{str_symbol}")) {
             ret = format!(
                 "{}{}",
                 ret[..ret.len() - str_symbol.len() - 1].trim_end_matches(';'),
                 str_symbol
             );
-        } else if ret.ends_with(&format!(";{})", str_symbol)) {
+        } else if ret.ends_with(&format!(";{str_symbol})")) {
             ret = format!(
                 "{}{})",
                 ret[..ret.len() - str_symbol.len() - 2].trim_end_matches(';'),
@@ -427,7 +427,7 @@
             style_order.unwrap_or(255)
         );
         let mut map = GLOBAL_CLASS_MAP.lock().unwrap();
-        map.get(&key).map(|v| format!("d{}", v)).unwrap_or_else(|| {
+        map.get(&key).map(|v| format!("d{v}")).unwrap_or_else(|| {
             let len = map.len();
             map.insert(key, len as i32);
             format!("d{}", map.len() - 1)
@@ -442,7 +442,7 @@
         format!("css-{}", hasher.finish())
     } else {
         let mut map = GLOBAL_CLASS_MAP.lock().unwrap();
-        map.get(css).map(|v| format!("d{}", v)).unwrap_or_else(|| {
+        map.get(css).map(|v| format!("d{v}")).unwrap_or_else(|| {
             let len = map.len();
             map.insert(css.to_string(), len as i32);
             format!("d{}", map.len() - 1)
@@ -469,7 +469,7 @@
         let key = format!("{}-{}-{}", property, level, selector.unwrap_or("").trim());
         let mut map = GLOBAL_CLASS_MAP.lock().unwrap();
         map.get(&key)
-            .map(|v| format!("--d{}", v))
+            .map(|v| format!("--d{v}"))
             .unwrap_or_else(|| {
                 let len = map.len();
                 map.insert(key, len as i32);

libs/extractor/src/extract_style/mod.rs

@@ -220,7 +220,7 @@ impl ExtractStyleValue {
             ExtractStyleValue::Dynamic(style) => style.extract(),
             ExtractStyleValue::Css(css) => css.extract(),
             ExtractStyleValue::Typography(typo) => {
-                StyleProperty::ClassName(format!("typo-{}", typo))
+                StyleProperty::ClassName(format!("typo-{typo}"))
             }
         }
     }

libs/extractor/src/gen_class_name.rs

@@ -2,7 +2,7 @@ use crate::{ExtractStyleProp, StyleProperty};
 use oxc_allocator::CloneIn;
 use oxc_ast::AstBuilder;
 use oxc_ast::ast::{
-    Expression, JSXAttribute, JSXAttributeValue, JSXExpression, ObjectPropertyKind, PropertyKey,
+    Expression, ObjectPropertyKind, PropertyKey,
     PropertyKind, TemplateElement, TemplateElementValue,
 };
 use oxc_span::SPAN;
@@ -214,52 +214,3 @@ pub fn merge_expression_for_class_name<'a>(
         )))
     }
 }
-
-pub fn apply_class_name_attribute<'a>(
-    ast_builder: &AstBuilder<'a>,
-    class_prop: &mut JSXAttribute<'a>,
-    expression: Expression<'a>,
-) {
-    if let Some(ref value) = class_prop.value {
-        if let Some(ret) = match value {
-            JSXAttributeValue::StringLiteral(str) => merge_expression_for_class_name(
-                ast_builder,
-                vec![
-                    Expression::StringLiteral(str.clone_in(ast_builder.allocator)),
-                    expression,
-                ],
-            ),
-            JSXAttributeValue::ExpressionContainer(container) => match container.expression {
-                JSXExpression::EmptyExpression(_) => Some(expression),
-                _ => merge_expression_for_class_name(
-                    ast_builder,
-                    vec![
-                        container
-                            .expression
-                            .clone_in(ast_builder.allocator)
-                            .into_expression(),
-                        expression,
-                    ],
-                ),
-            },
-            _ => None,
-        } {
-            class_prop.value = match ret {
-                Expression::StringLiteral(literal) => Some(JSXAttributeValue::StringLiteral(
-                    literal.clone_in(ast_builder.allocator),
-                )),
-                _ => Some(JSXAttributeValue::ExpressionContainer(
-                    ast_builder.alloc_jsx_expression_container(SPAN, JSXExpression::from(ret)),
-                )),
-            }
-        }
-    } else {
-        class_prop.value = Some(if let Expression::StringLiteral(literal) = expression {
-            JSXAttributeValue::StringLiteral(literal.clone_in(ast_builder.allocator))
-        } else {
-            JSXAttributeValue::ExpressionContainer(
-                ast_builder.alloc_jsx_expression_container(SPAN, JSXExpression::from(expression)),
-            )
-        });
-    };
-}

libs/extractor/src/gen_style.rs

@@ -1,16 +1,13 @@
 use crate::{ExtractStyleProp, StyleProperty};
 use oxc_allocator::CloneIn;
 use oxc_ast::AstBuilder;
-use oxc_ast::ast::{
-    Expression, JSXAttribute, JSXAttributeValue, JSXExpression, ObjectExpression,
-    ObjectPropertyKind, PropertyKey, PropertyKind,
-};
+use oxc_ast::ast::{Expression, ObjectPropertyKind, PropertyKey, PropertyKind};
 use oxc_span::SPAN;
 use std::collections::BTreeMap;
 pub fn gen_styles<'a>(
     ast_builder: &AstBuilder<'a>,
     style_props: &[ExtractStyleProp<'a>],
-) -> Option<ObjectExpression<'a>> {
+) -> Option<Expression<'a>> {
     if style_props.is_empty() {
         return None;
     }
@@ -22,9 +19,11 @@
     if properties.is_empty() {
         return None;
     }
-    Some(ast_builder.object_expression(
-        SPAN,
-        oxc_allocator::Vec::from_iter_in(properties, ast_builder.allocator),
+    Some(Expression::ObjectExpression(
+        ast_builder.alloc_object_expression(
+            SPAN,
+            oxc_allocator::Vec::from_iter_in(properties, ast_builder.allocator),
+        ),
     ))
 }
 fn gen_style<'a>(
@@ -345,39 +344,3 @@
     properties.reverse();
     properties
 }
-
-pub fn apply_style_attribute<'a>(
-    ast_builder: &AstBuilder<'a>,
-    style_prop: &mut JSXAttribute<'a>,
-    // must be an object expression
-    mut expression: ObjectExpression<'a>,
-) {
-    if let Some(ref mut value) = style_prop.value {
-        if let JSXAttributeValue::ExpressionContainer(container) = value {
-            if let Some(spread_property) = match &container.expression {
-                JSXExpression::ObjectExpression(obj) => Some(Expression::ObjectExpression(
-                    obj.clone_in(ast_builder.allocator),
-                )),
-                JSXExpression::Identifier(ident) => Some(Expression::Identifier(
-                    ident.clone_in(ast_builder.allocator),
-                )),
-                _ => None,
-            } {
-                expression.properties.insert(
-                    0,
-                    ObjectPropertyKind::SpreadProperty(
-                        ast_builder.alloc_spread_element(SPAN, spread_property),
-                    ),
-                );
-            }
-            container.expression = JSXExpression::ObjectExpression(ast_builder.alloc(expression));
-        }
-    } else {
-        style_prop.value = Some(JSXAttributeValue::ExpressionContainer(
-            ast_builder.alloc_jsx_expression_container(
-                SPAN,
-                JSXExpression::ObjectExpression(ast_builder.alloc(expression)),
-            ),
-        ));
-    };
-}