fix: use more complex parsing for css statement splitting

Signed-off-by: Lim Jia Sheng <50891910+sxxov@users.noreply.github.com>

html-to-react/src/utils/convertInlineStyleToMap.ts

@@ -17,9 +17,34 @@ export function convertInlineStyleToMap(
     return {}
   }
 
-  return inlineStyle
+  const statements: string[] = []
-    .split(';')
+  let i = -1
-    .reduce<Record<string, string>>((styleObject, stylePropertyValue) => {
+  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
-    }, {})
+    },
+    {}
+  )
 }