From 117492e36659d3f8d150e014e65f4f9b3ca2d769 Mon Sep 17 00:00:00 2001
From: jiaSheng <50891910+sxxov@users.noreply.github.com>
Date: Wed, 7 Aug 2024 13:13:02 +0800
Subject: [PATCH] fix: ellide inline css custom properties

* ellide css custom properties when converting css inline styles to map

  Signed-off-by: Lim Jia Sheng <50891910+sxxov@users.noreply.github.com>
---
 html-to-react/src/utils/convertInlineStyleToMap.ts | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/html-to-react/src/utils/convertInlineStyleToMap.ts b/html-to-react/src/utils/convertInlineStyleToMap.ts
index 1c3866be8..7ef8565a6 100644
--- a/html-to-react/src/utils/convertInlineStyleToMap.ts
+++ b/html-to-react/src/utils/convertInlineStyleToMap.ts
@@ -36,10 +36,12 @@ export function convertInlineStyleToMap(
       // additionally don't uppercase any -ms- prefix
       // e.g. -ms-style-property = msStyleProperty
       //      -webkit-style-property = WebkitStyleProperty
-      const replacedProperty = property
-        .toLowerCase()
-        .replace(/^-ms-/, 'ms-')
-        .replace(/-(.)/g, (_, character: string) => character.toUpperCase())
+      const replacedProperty = property.startsWith('--')
+        ? property
+        : property
+            .toLowerCase()
+            .replace(/^-ms-/, 'ms-')
+            .replace(/-(.)/g, (_, character: string) => character.toUpperCase())
 
       // add the new style property and value to the style object
       styleObject[replacedProperty] = value