[WC-1561]: Update style regex to handle zero spaces (#185)

Author: Illia Obukhau

packages/pluggableWidgets/html-element-web/CHANGELOG.md

@@ -10,6 +10,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 -   We fixed an issue with HTML Element widget producing errors in Studio Pro versions below 9.18.
 
+-   We fixed an issue with inline CSS styles parsing
+
 ## [1.0.0] - 2022-11-24
 
 ### Added

packages/pluggableWidgets/html-element-web/src/utils/__tests__/style-utils.spec.ts

@@ -9,6 +9,27 @@ describe("style-utils", () => {
             borderRadius: "20px"
         });
     });
+    it("converts properties with no space between props and names", () => {
+        const style = convertInlineCssToReactStyle("background-color:#FF00FF");
+
+        expect(style).toEqual({
+            backgroundColor: "#FF00FF"
+        });
+    });
+    it("converts properties with multiple spaces and newlines between props and names", () => {
+        const style = convertInlineCssToReactStyle("background-color \n\n : \n    #FF00FF");
+
+        expect(style).toEqual({
+            backgroundColor: "#FF00FF"
+        });
+    });
+    it("converts properties with colons inside", () => {
+        const style = convertInlineCssToReactStyle("background-image: url(http://localhost:8080/img.png)");
+
+        expect(style).toEqual({
+            backgroundImage: "url(http://localhost:8080/img.png)"
+        });
+    });
     it("ignores broken properties", () => {
         const style = convertInlineCssToReactStyle("background-color: red; ; foo-bar");
 

packages/pluggableWidgets/html-element-web/src/utils/style-utils.ts

@@ -1,8 +1,8 @@
 import React from "react";
 
 // We need regexp to split rows in prop/value pairs
-// split by : not work for all cases, eg "background-image: url(http://localhost:8080);"
-const cssPropRegex = /(?<prop>[^:]+):\s+?(?<value>[^;]+);?/m;
+// split by : doesn't work for all cases, eg "background-image: url(http://localhost:8080);"
+const cssPropRegex = /(?<prop>[^:]+):(?<value>.+)/s;
 
 export function convertInlineCssToReactStyle(inlineStyle: string): React.CSSProperties {
     return Object.fromEntries(
@@ -11,7 +11,7 @@ export function convertInlineCssToReactStyle(inlineStyle: string): React.CSSProp
             .filter(r => r.length) // filter out empty
             .map(r => {
                 const { prop = "", value = "" } = cssPropRegex.exec(r.trim())?.groups ?? {};
-                return [prop, value];
+                return [prop.trim(), value.trim()];
             })
             .filter(v => v.length === 2 && v[0].length && v[1].length) // filter out broken lines
             .map(([key, value]) => [convertStylePropNameToReactPropName(key), value] as [string, string])