Merge pull request #197 from dev-five-git/add-vendor-properties

Add vendor properties

Author: owjs3901

.changeset/honest-mirrors-know.md

@@ -0,0 +1,6 @@
+---
+"@devup-ui/react": patch
+"@devup-ui/wasm": patch
+---
+
+Add vendor properties (moz, webkit, ms)

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!(

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,

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]
+  >
+}