From 620b7d9fa8a908a1e9b3dc25d9c0d98fceb8e2f1 Mon Sep 17 00:00:00 2001
From: jason lim <50891910+Sxxov@users.noreply.github.com>
Date: Sun, 13 Oct 2024 18:13:08 +0800
Subject: [PATCH] fix: use more complex parsing for css statement splitting

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

diff --git a/html-to-react/src/utils/convertInlineStyleToMap.ts b/html-to-react/src/utils/convertInlineStyleToMap.ts
index 1c3866be8..b4c71c5cd 100644
--- a/html-to-react/src/utils/convertInlineStyleToMap.ts
+++ b/html-to-react/src/utils/convertInlineStyleToMap.ts
@@ -17,9 +17,34 @@ export function convertInlineStyleToMap(
     return {}
   }
 
-  return inlineStyle
-    .split(';')
-    .reduce<Record<string, string>>((styleObject, stylePropertyValue) => {
+  const statements: string[] = []
+  let i = -1
+  let offset = 0
+  do {
+    i++
+    let curr = inlineStyle[i]
+    let prev = inlineStyle[i - 1]
+
+    if ((curr === "'" || curr === '"') && prev !== '\\') {
+      const quote = curr
+      do {
+        i++
+        curr = inlineStyle[i]
+        prev = inlineStyle[i - 1]
+      } while (!(curr === quote && prev !== '\\') && i < inlineStyle.length)
+      continue
+    }
+
+    if (curr === ';' && prev !== '\\') {
+      statements.push(inlineStyle.slice(offset, i))
+      offset = i + 1
+      continue
+    }
+  } while (i < inlineStyle.length)
+  statements.push(inlineStyle.slice(offset, inlineStyle.length))
+
+  return statements.reduce<Record<string, string>>(
+    (styleObject, stylePropertyValue) => {
       // extract the style property name and value
       const [property, value] = stylePropertyValue
         .split(/^([^:]+):/)
@@ -45,5 +70,7 @@ export function convertInlineStyleToMap(
       styleObject[replacedProperty] = value
 
       return styleObject
-    }, {})
+    },
+    {}
+  )
 }