From bb2f49fe170867d18a94568bcce1cbad154d1fe5 Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@naver.com>
Date: Tue, 10 Jun 2025 14:50:48 +0900
Subject: [PATCH] Add vendor properties

---
 .changeset/honest-mirrors-know.md        |  6 +++++
 libs/css/src/lib.rs                      | 33 +++++++++++++++++++++++-
 packages/react/src/types/props/index.ts  |  4 ++-
 packages/react/src/types/props/vendor.ts | 13 ++++++++++
 4 files changed, 54 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/honest-mirrors-know.md
 create mode 100644 packages/react/src/types/props/vendor.ts

diff --git a/.changeset/honest-mirrors-know.md b/.changeset/honest-mirrors-know.md
new file mode 100644
index 00000000..7e7de39d
--- /dev/null
+++ b/.changeset/honest-mirrors-know.md
@@ -0,0 +1,6 @@
+---
+"@devup-ui/react": patch
+"@devup-ui/wasm": patch
+---
+
+Add vendor properties (moz, webkit, ms)
diff --git a/libs/css/src/lib.rs b/libs/css/src/lib.rs
index bba6d662..0dddeb18 100644
--- a/libs/css/src/lib.rs
+++ b/libs/css/src/lib.rs
@@ -312,7 +312,22 @@ pub fn convert_property(property: &str) -> PropertyType {
             1 => PropertyType::Single(v[0].to_string()),
             _ => PropertyType::Multi(v.iter().map(|v| v.to_string()).collect()),
         })
-        .unwrap_or_else(|| to_kebab_case(property).into())
+        .unwrap_or_else(|| {
+            if (property.starts_with("Webkit")
+                && property.len() > 6
+                && property.chars().nth(6).unwrap().is_uppercase())
+                || (property.starts_with("Moz")
+                    && property.len() > 3
+                    && property.chars().nth(3).unwrap().is_uppercase())
+                || (property.starts_with("ms")
+                    && property.len() > 2
+                    && property.chars().nth(2).unwrap().is_uppercase())
+            {
+                PropertyType::Single(format!("-{}", to_kebab_case(property)))
+            } else {
+                to_kebab_case(property).into()
+            }
+        })
 }
 
 pub fn short_to_long(property: &str) -> String {
@@ -877,6 +892,22 @@ mod tests {
         );
     }
 
+    #[test]
+    fn test_convert_vendor_property() {
+        assert_eq!(
+            convert_property("MozUserSelect"),
+            PropertyType::Single("-moz-user-select".to_string())
+        );
+        assert_eq!(
+            convert_property("msAccelerator"),
+            PropertyType::Single("-ms-accelerator".to_string())
+        );
+        assert_eq!(
+            convert_property("WebkitAlignContent"),
+            PropertyType::Single("-webkit-align-content".to_string())
+        );
+    }
+
     #[test]
     fn test_property_type_from() {
         assert_eq!(
diff --git a/packages/react/src/types/props/index.ts b/packages/react/src/types/props/index.ts
index 42fd4bf6..271b7d43 100644
--- a/packages/react/src/types/props/index.ts
+++ b/packages/react/src/types/props/index.ts
@@ -28,10 +28,12 @@ import type { DevupUiTextProps } from './text'
 import type { DevupUiTransformProps } from './transform'
 import type { DevupUiTransitionProps } from './transition'
 import type { DevupUiUiProps } from './ui'
+import type { DevupUiVendorProps } from './vendor'
 import type { DevupUiViewTransitionProps } from './view-transition'
 
 export interface DevupCommonProps
-  extends DevupUiAnimationProps,
+  extends DevupUiVendorProps,
+    DevupUiAnimationProps,
     DevupUiBackgroundProps,
     DevupUiBlendingProps,
     DevupUiBorderProps,
diff --git a/packages/react/src/types/props/vendor.ts b/packages/react/src/types/props/vendor.ts
new file mode 100644
index 00000000..cae381ed
--- /dev/null
+++ b/packages/react/src/types/props/vendor.ts
@@ -0,0 +1,13 @@
+import type {
+  VendorLonghandProperties,
+  VendorShorthandProperties,
+} from 'csstype'
+
+import type { ResponsiveValue } from '../responsive-value'
+
+export type DevupUiVendorProps = {
+  [key in keyof (VendorLonghandProperties &
+    VendorShorthandProperties)]: ResponsiveValue<
+    (VendorLonghandProperties & VendorShorthandProperties)[key]
+  >
+}