diff --git a/.changeset/spotty-camels-deny.md b/.changeset/spotty-camels-deny.md new file mode 100644 index 00000000..89397e7d --- /dev/null +++ b/.changeset/spotty-camels-deny.md @@ -0,0 +1,5 @@ +--- +"@devup-ui/wasm": patch +--- + +Change order to remove attr diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml index 52ac08b9..7e4de40d 100644 --- a/.github/FUNDING.yml +++ b/.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'] \ No newline at end of file diff --git a/libs/extractor/src/lib.rs b/libs/extractor/src/lib.rs index 7256ffc1..0dbe4b71 100644 --- a/libs/extractor/src/lib.rs +++ b/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' + Next.js logo + "#, + ExtractOption { + package: "@devup-ui/core".to_string(), + css_file: None + } + ) + .unwrap()); } #[test] diff --git a/libs/extractor/src/prop_modify_utils.rs b/libs/extractor/src/prop_modify_utils.rs index 41a72691..b8733255 100644 --- a/libs/extractor/src/prop_modify_utils.rs +++ b/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)); } } diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-6.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-6.snap new file mode 100644 index 00000000..2494160d --- /dev/null +++ b/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 \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\"Next.js;\n", +}