Fix duplicate issue

Author: owjs3901

.changeset/slimy-walls-melt.md

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

libs/css/src/lib.rs

@@ -196,13 +196,37 @@ pub fn to_kebab_case(value: &str) -> String {
         .collect()
 }
 
+pub fn to_camel_case(value: &str) -> String {
+    value
+        .split('-')
+        .enumerate()
+        .map(|(i, s)| {
+            if i == 0 {
+                s.to_string()
+            } else {
+                format!("{}{}", s[0..1].to_uppercase(), &s[1..])
+            }
+        })
+        .collect()
+}
+
 pub fn convert_property(property: &str) -> PropertyType {
     GLOBAL_STYLE_PROPERTY
         .get(property)
         .cloned()
         .unwrap_or_else(|| to_kebab_case(property).into())
 }
 
+pub fn sort_to_long(property: &str) -> String {
+    GLOBAL_STYLE_PROPERTY
+        .get(property)
+        .map(|v| match v {
+            PropertyType::Single(value) => to_camel_case(value),
+            PropertyType::Multi(_) => property.to_string(),
+        })
+        .unwrap_or_else(|| property.to_string())
+}
+
 pub fn sheet_to_classname(
     property: &str,
     level: u8,

libs/extractor/src/extract_style/mod.rs

@@ -1,6 +1,8 @@
 use crate::utils::convert_value;
 use crate::StyleProperty;
-use css::{css_to_classname, sheet_to_classname, sheet_to_variable_name, StyleSelector};
+use css::{
+    css_to_classname, sheet_to_classname, sheet_to_variable_name, sort_to_long, StyleSelector,
+};
 use once_cell::sync::Lazy;
 use std::collections::HashSet;
 
@@ -37,7 +39,7 @@ impl ExtractStaticStyle {
             } else {
                 convert_value(value)
             },
-            property: property.to_string(),
+            property: sort_to_long(property),
             level,
             selector,
             basic: false,
@@ -134,7 +136,7 @@ impl ExtractDynamicStyle {
         selector: Option<StyleSelector>,
     ) -> Self {
         Self {
-            property: property.to_string(),
+            property: sort_to_long(property),
             level,
             identifier: identifier.to_string(),
             selector,

libs/extractor/src/lib.rs

@@ -1312,4 +1312,21 @@ PROCESS_DATA.map(({ id, title, content }, idx) => (
         )
         .unwrap());
     }
+
+    #[test]
+    #[serial]
+    fn test_duplicate_style_props() {
+        reset_class_map();
+        assert_debug_snapshot!(extract(
+            "test.js",
+            r#"import {Box} from '@devup-ui/core'
+            <Box bg="red" background="red" />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_file: None
+            }
+        )
+        .unwrap());
+    }
 }

libs/extractor/src/snapshots/extractor__tests__backtick_prop-2.snap

@@ -6,7 +6,7 @@ ExtractOutput {
     styles: [
         Dynamic(
             ExtractDynamicStyle {
-                property: "bg",
+                property: "background",
                 level: 0,
                 identifier: "`${variable}`",
                 selector: None,

libs/extractor/src/snapshots/extractor__tests__backtick_prop.snap

@@ -6,7 +6,7 @@ ExtractOutput {
     styles: [
         Static(
             ExtractStaticStyle {
-                property: "bg",
+                property: "background",
                 value: "black",
                 level: 0,
                 selector: None,

libs/extractor/src/snapshots/extractor__tests__duplicate_style_props.snap

@@ -0,0 +1,18 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "extract(\"test.js\",\nr#\"import {Box} from '@devup-ui/core'\n            <Box bg=\"red\" background=\"red\" />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
+---
+ExtractOutput {
+    styles: [
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                basic: false,
+            },
+        ),
+    ],
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"d0\" />;\n",
+}

libs/extractor/src/snapshots/extractor__tests__extract_compound_responsive_style_props.snap

@@ -30,7 +30,7 @@ ExtractOutput {
         ),
         Static(
             ExtractStaticStyle {
-                property: "bg",
+                property: "background",
                 value: "red",
                 level: 0,
                 selector: None,

libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-3.snap

@@ -15,7 +15,7 @@ ExtractOutput {
         ),
         Static(
             ExtractStaticStyle {
-                property: "bg",
+                property: "background",
                 value: "red",
                 level: 0,
                 selector: None,

libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-4.snap

@@ -6,7 +6,7 @@ ExtractOutput {
     styles: [
         Static(
             ExtractStaticStyle {
-                property: "bg",
+                property: "background",
                 value: "red",
                 level: 0,
                 selector: None,