Change order to remove attr

.changeset/spotty-camels-deny.md

@@ -0,0 +1,5 @@
+---
+"@devup-ui/wasm": patch
+---
+
+Change order to remove attr

.github/FUNDING.yml

@@ -1,5 +1,12 @@
 # These are supported funding model platforms
 
-github: [owjs3901]
+github: owjs3901
 patreon: JeongMinOh
 open_collective: devup-ui
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+otechie: # Replace with a single Otechie username
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

libs/extractor/src/lib.rs

@@ -410,6 +410,25 @@ mod tests {
             }
         )
         .unwrap());
+
+        reset_class_map();
+        assert_debug_snapshot!(extract(
+            "test.tsx",
+            r#"import {Image} from '@devup-ui/core'
+        <Image
+          className={styles.logo}
+          src="/next.svg"
+          alt="Next.js logo"
+          width={180}
+          height={38}
+        />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_file: None
+            }
+        )
+        .unwrap());
     }
 
     #[test]

libs/extractor/src/prop_modify_utils.rs

@@ -19,30 +19,29 @@ pub fn modify_prop_object<'a>(
     let mut class_name_prop = None;
     let mut style_prop = None;
 
-    for idx in 0..props.len() {
-        if let ObjectPropertyKind::ObjectProperty(attr) = &props[idx] {
+    for idx in (0..props.len()).rev() {
+        if let ObjectPropertyKind::ObjectProperty(attr) = props.remove(idx) {
             if let PropertyKey::StaticIdentifier(ident) = &attr.key {
                 if ident.name == "className" {
-                    if let ObjectPropertyKind::ObjectProperty(attr) = props.remove(idx) {
-                        class_name_prop = Some(attr);
-                    }
+                    class_name_prop = Some(attr);
+                    continue;
                 } else if ident.name == "style" {
-                    if let ObjectPropertyKind::ObjectProperty(attr) = props.remove(idx) {
-                        style_prop = Some(attr);
-                    }
+                    style_prop = Some(attr);
+                    continue;
                 }
             }
+            props.insert(idx, ObjectPropertyKind::ObjectProperty(attr));
         }
     }
 
     // should modify class name prop
     if let Some(ex) = gen_class_names(ast_builder, &styles) {
         if let Some(pr) = if let Some(class_name_prop) = class_name_prop {
-            let res = merge_expression_for_class_name(
+            merge_expression_for_class_name(
                 ast_builder,
                 vec![class_name_prop.value.clone_in(ast_builder.allocator), ex],
-            );
-            res.map(|res| {
+            )
+            .map(|res| {
                 ast_builder.alloc_object_property(
                     SPAN,
                     PropertyKind::Init,
@@ -75,41 +74,37 @@ pub fn modify_prop_object<'a>(
 
     // should modify style prop
     if let Some(mut ex) = gen_styles(ast_builder, &styles) {
-        if let Some(style_prop) = style_prop {
-            props.push(ObjectPropertyKind::ObjectProperty(
-                ast_builder.alloc_object_property(
-                    SPAN,
-                    PropertyKind::Init,
-                    PropertyKey::StaticIdentifier(ast_builder.alloc_identifier_name(SPAN, "style")),
-                    if ex.properties.is_empty() {
-                        Expression::ObjectExpression(ast_builder.alloc(ex))
-                    } else {
-                        ex.properties.push(ObjectPropertyKind::SpreadProperty(
-                            ast_builder.alloc_spread_element(
-                                SPAN,
-                                style_prop.value.clone_in(ast_builder.allocator),
-                            ),
-                        ));
-                        Expression::ObjectExpression(ast_builder.alloc(ex))
-                    },
-                    false,
-                    false,
-                    false,
-                ),
-            ));
+        props.push(if let Some(style_prop) = style_prop {
+            ObjectPropertyKind::ObjectProperty(ast_builder.alloc_object_property(
+                SPAN,
+                PropertyKind::Init,
+                PropertyKey::StaticIdentifier(ast_builder.alloc_identifier_name(SPAN, "style")),
+                if ex.properties.is_empty() {
+                    Expression::ObjectExpression(ast_builder.alloc(ex))
+                } else {
+                    ex.properties.push(ObjectPropertyKind::SpreadProperty(
+                        ast_builder.alloc_spread_element(
+                            SPAN,
+                            style_prop.value.clone_in(ast_builder.allocator),
+                        ),
+                    ));
+                    Expression::ObjectExpression(ast_builder.alloc(ex))
+                },
+                false,
+                false,
+                false,
+            ))
         } else {
-            props.push(ObjectPropertyKind::ObjectProperty(
-                ast_builder.alloc_object_property(
-                    SPAN,
-                    PropertyKind::Init,
-                    PropertyKey::StaticIdentifier(ast_builder.alloc_identifier_name(SPAN, "style")),
-                    Expression::ObjectExpression(ast_builder.alloc(ex)),
-                    false,
-                    false,
-                    false,
-                ),
-            ));
-        };
+            ObjectPropertyKind::ObjectProperty(ast_builder.alloc_object_property(
+                SPAN,
+                PropertyKind::Init,
+                PropertyKey::StaticIdentifier(ast_builder.alloc_identifier_name(SPAN, "style")),
+                Expression::ObjectExpression(ast_builder.alloc(ex)),
+                false,
+                false,
+                false,
+            ))
+        });
     } else if let Some(style_prop) = style_prop {
         // re add class name prop if not modified
         props.push(ObjectPropertyKind::ObjectProperty(style_prop))
@@ -124,19 +119,18 @@ pub fn modify_props<'a>(
     let mut class_name_prop = None;
     let mut style_prop = None;
 
-    for idx in 0..props.len() {
-        if let Attribute(attr) = &props[idx] {
+    for idx in (0..props.len()).rev() {
+        if let Attribute(attr) = props.remove(idx) {
             if let Identifier(ident) = &attr.name {
                 if ident.name == "className" {
-                    if let Attribute(attr) = props.remove(idx) {
-                        class_name_prop = Some(attr);
-                    }
+                    class_name_prop = Some(attr);
+                    continue;
                 } else if ident.name == "style" {
-                    if let Attribute(attr) = props.remove(idx) {
-                        style_prop = Some(attr);
-                    }
+                    style_prop = Some(attr);
+                    continue;
                 }
             }
+            props.insert(idx, Attribute(attr));
         }
     }
 

libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-6.snap

@@ -0,0 +1,25 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "extract(\"test.tsx\",\nr#\"import {Image} from '@devup-ui/core'\n        <Image\n          className={styles.logo}\n          src=\"/next.svg\"\n          alt=\"Next.js logo\"\n          width={180}\n          height={38}\n        />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
+---
+ExtractOutput {
+    styles: [
+        Static(
+            ExtractStaticStyle {
+                property: "width",
+                value: "720px",
+                level: 0,
+                selector: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "height",
+                value: "152px",
+                level: 0,
+                selector: None,
+            },
+        ),
+    ],
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<img src=\"/next.svg\" alt=\"Next.js logo\" className={`d0 d1 ${styles.logo}`} />;\n",
+}