Merge pull request #36 from dev-five-git/fix-direct-selector

Fix direct select issue

Author: owjs3901

.changeset/hot-cherries-speak.md

@@ -0,0 +1,5 @@
+---
+"@devup-ui/wasm": patch
+---
+
+Fix direct select issue

libs/extractor/src/lib.rs

@@ -1128,6 +1128,8 @@ export {
             }
         )
         .unwrap());
+
+        reset_class_map();
         assert_debug_snapshot!(extract(
             "test.js",
             r#"import {Flex} from '@devup-ui/core'
@@ -1139,6 +1141,22 @@ export {
             }
         )
         .unwrap());
+
+        reset_class_map();
+        assert_debug_snapshot!(extract(
+            "test.js",
+            r#"import {Center} from '@devup-ui/core'
+<Center
+            bg={['$webBg', '$appBg', '$solutionBg'][categoryId - 1]}
+          >
+          </Center>
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_file: None
+            }
+        )
+        .unwrap());
     }
 
     #[test]

libs/extractor/src/snapshots/extractor__tests__props_direct_select-11.snap

@@ -0,0 +1,44 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "extract(\"test.js\",\nr#\"import {Center} from '@devup-ui/core'\n<Center\n            bg={['$webBg', '$appBg', '$solutionBg'][categoryId - 1]}\n          >\n          </Center>\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
+---
+ExtractOutput {
+    styles: [
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                basic: true,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "justifyContent",
+                value: "center",
+                level: 0,
+                selector: None,
+                basic: true,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "alignItems",
+                value: "center",
+                level: 0,
+                selector: None,
+                basic: true,
+            },
+        ),
+        Dynamic(
+            ExtractDynamicStyle {
+                property: "bg",
+                level: 0,
+                identifier: "[\n\t\"var(--webBg)\",\n\t\"var(--appBg)\",\n\t\"var(--solutionBg)\"\n][categoryId - 1]",
+                selector: None,
+            },
+        ),
+    ],
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"d0 d1 d2 d3\" style={{ \"--d4\": [\n\t\"var(--webBg)\",\n\t\"var(--appBg)\",\n\t\"var(--solutionBg)\"\n][categoryId - 1] }}>\n          </div>;\n",
+}

libs/extractor/src/style_extractor.rs

@@ -150,7 +150,7 @@ pub fn extract_style_from_expression<'a>(
                                 ExtractResult::Maintain
                             }
                         }
-                        Expression::Identifier(_) => {
+                        _ => {
                             if let Some(name) = name {
                                 return ExtractResult::ExtractStyle(vec![
                                     ExtractStyleProp::Static(Dynamic(ExtractDynamicStyle::new(
@@ -163,7 +163,6 @@ pub fn extract_style_from_expression<'a>(
                             }
                             ExtractResult::Maintain
                         }
-                        _ => ExtractResult::Maintain,
                     }
                 }
                 Expression::ObjectExpression(obj) => match mem_expression {