Merge pull request #265 from dev-five-git/convert-light-dark

Convert light-dark and optimize theme

Author: owjs3901

.changeset/lemon-coats-spend.md

@@ -0,0 +1,5 @@
+---
+"@devup-ui/wasm": patch
+---
+
+Convert light-dark and optimize theme

Cargo.lock

@@ -267,10 +267,7 @@ mod tests {
             sheet.set_theme(theme);
         }
 
-        assert_eq!(
-            get_css().unwrap(),
-            ":root{color-scheme:light;--primary:#FFF;}\n:root[data-theme=dark]{color-scheme:dark;--primary:#000;}\n"
-        );
+        assert_debug_snapshot!(get_css().unwrap());
     }
 
     #[test]

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

@@ -0,0 +1,5 @@
+---
+source: bindings/devup-ui-wasm/src/lib.rs
+expression: get_css().unwrap()
+---
+":root{color-scheme:light;--primary:light-dark(#FFF,#000)}:root[data-theme=dark]{color-scheme:dark}"

bindings/devup-ui-wasm/src/snapshots/devup_ui_wasm__tests__code_extract.snap

@@ -2,4 +2,4 @@
 source: bindings/devup-ui-wasm/src/lib.rs
 expression: theme.to_css()
 ---
-":root{color-scheme:light;--primary:#000;}\n:root[data-theme=dark]{color-scheme:dark;--primary:#fff;}\n.typo-default{font-family:Arial;font-size:16px;font-weight:400;line-height:1.5;letter-spacing:0.5em}\n@media (min-width:480px){.typo-default{font-family:Arial;font-size:24px;font-weight:400;line-height:1.5;letter-spacing:0.5em}}\n@media (min-width:768px){.typo-default{font-family:Arial;font-size:24px;line-height:1.5;letter-spacing:0.5em}}"
+":root{color-scheme:light;--primary:light-dark(#000,#FFF)}:root[data-theme=dark]{color-scheme:dark}.typo-default{font-family:Arial;font-size:16px;font-weight:400;line-height:1.5;letter-spacing:0.5em}@media(min-width:480px){.typo-default{font-family:Arial;font-size:24px;font-weight:400;line-height:1.5;letter-spacing:0.5em}}@media(min-width:768px){.typo-default{font-family:Arial;font-size:24px;line-height:1.5;letter-spacing:0.5em}}"

bindings/devup-ui-wasm/src/snapshots/devup_ui_wasm__tests__deserialize_theme.snap

@@ -20,10 +20,7 @@ pub fn merge_selector(class_name: &str, selector: Option<&StyleSelector>) -> Str
     if let Some(selector) = selector {
         match selector {
             StyleSelector::Selector(value) => value.replace("&", &format!(".{class_name}")),
-            StyleSelector::Media {
-                selector: s,
-                query: _,
-            } => {
+            StyleSelector::Media { selector: s, .. } => {
                 if let Some(s) = s {
                     s.replace("&", &format!(".{class_name}"))
                 } else {
@@ -452,6 +449,27 @@ mod tests {
             merge_selector("cls", Some(&["themeDark", "hover"].into()),),
             ":root[data-theme=dark] .cls:hover"
         );
+        assert_eq!(
+            merge_selector(
+                "cls",
+                Some(&StyleSelector::Media {
+                    query: "print".to_string(),
+                    selector: None,
+                })
+            ),
+            ".cls"
+        );
+
+        assert_eq!(
+            merge_selector(
+                "cls",
+                Some(&StyleSelector::Media {
+                    query: "print".to_string(),
+                    selector: Some("&:hover".to_string()),
+                })
+            ),
+            ".cls:hover"
+        );
     }
 
     #[test]

libs/css/src/lib.rs

@@ -13,26 +13,23 @@ pub fn extract_style_from_jsx<'a>(
     value: &mut JSXAttributeValue<'a>,
 ) -> ExtractResult<'a> {
     match value {
-        JSXAttributeValue::ExpressionContainer(expression) => {
-            if expression.expression.is_expression() {
-                extract_style_from_expression(
-                    ast_builder,
-                    Some(name),
-                    expression.expression.to_expression_mut(),
-                    0,
-                    &None,
-                )
-            } else {
-                ExtractResult::default()
-            }
+        JSXAttributeValue::ExpressionContainer(expression)
+            if expression.expression.is_expression() =>
+        {
+            Some(
+                expression
+                    .expression
+                    .to_expression()
+                    .clone_in(ast_builder.allocator),
+            )
         }
-        JSXAttributeValue::StringLiteral(literal) => extract_style_from_expression(
-            ast_builder,
-            Some(name),
-            &mut Expression::StringLiteral(literal.clone_in(ast_builder.allocator)),
-            0,
-            &None,
-        ),
-        _ => ExtractResult::default(),
+        JSXAttributeValue::StringLiteral(literal) => Some(Expression::StringLiteral(
+            literal.clone_in(ast_builder.allocator),
+        )),
+        _ => None,
     }
+    .map(|mut expression| {
+        extract_style_from_expression(ast_builder, Some(name), &mut expression, 0, &None)
+    })
+    .unwrap_or_default()
 }

libs/extractor/src/extractor/extract_style_from_jsx.rs

@@ -31,11 +31,7 @@ pub(super) fn extract_style_from_member_expression<'a>(
     let mut ret: Vec<ExtractStyleProp> = vec![];
 
     match &mut mem.object {
-        Expression::ArrayExpression(array) => {
-            if array.elements.is_empty() {
-                return ExtractResult::default();
-            }
-
+        Expression::ArrayExpression(array) if !array.elements.is_empty() => {
             if let Some(num) = get_number_by_literal_expression(mem_expression) {
                 if num < 0f64 {
                     return ExtractResult::default();
@@ -125,11 +121,7 @@ pub(super) fn extract_style_from_member_expression<'a>(
                 map,
             });
         }
-        Expression::ObjectExpression(obj) => {
-            if obj.properties.is_empty() {
-                return ExtractResult::default();
-            }
-
+        Expression::ObjectExpression(obj) if !obj.properties.is_empty() => {
             let mut map = BTreeMap::new();
             if let Some(k) = get_string_by_literal_expression(mem_expression) {
                 let mut etc = None;
@@ -156,9 +148,7 @@ pub(super) fn extract_style_from_member_expression<'a>(
                 }
 
                 match etc {
-                    None => {
-                        return ExtractResult::default();
-                    }
+                    None => return ExtractResult::default(),
                     Some(etc) => ret.push(ExtractStyleProp::Static(ExtractStyleValue::Dynamic(
                         ExtractDynamicStyle::new(
                             name.unwrap(),

libs/extractor/src/extractor/extract_style_from_member_expression.rs

@@ -14,6 +14,7 @@ extractor = { path = "../extractor" }
 insta = "1.43.1"
 serde_json = "1.0.141"
 criterion = { version = "0.6", features = ["html_reports"] }
+rstest = "0.25.0"
 
 [[bench]]
 name = "my_benchmark"

libs/sheet/Cargo.toml

@@ -2,4 +2,4 @@
 source: libs/sheet/src/theme.rs
 expression: theme.to_css()
 ---
-":root{color-scheme:light;--primary:#000;}\n:root[data-theme=dark]{color-scheme:dark;--primary:#000;}\n"
+":root{color-scheme:light;--primary:#000}:root[data-theme=dark]{color-scheme:dark}"