Correctly generate inline styles when they contain multiple colons (f…

…ixes #9)
peternewnham · Aug 22, 2017 · e2b1ab6 · e2b1ab6
1 parent 37a317e
commit e2b1ab6
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/src/utils/inlineStyleToObject.js b/src/utils/inlineStyleToObject.js
@@ -17,7 +17,10 @@ export default function InlineStyleToObject(inlineStyle = '') {
       (styleObject, stylePropertyValue) => {
 
         // extract the style property name and value
-        let [property, value] = stylePropertyValue.split(':').map(item => item.trim().toLowerCase());
+        let [property, value] = stylePropertyValue
+          .split(/^([^:]+):/)
+          .filter((val, i) => i > 0)
+          .map(item => item.trim().toLowerCase());
 
         // if there is no value (i.e. no : in the style) then ignore it
         if (value === undefined) {

diff --git a/test/unit/utils/inlineStyleToObject.spec.js b/test/unit/utils/inlineStyleToObject.spec.js
@@ -33,4 +33,13 @@ describe('Testing `utils/inlineStyleToObject', () => {
     expect(inlineStyleToObject(inlineStyle)).toEqual(expectedStyleObject);
   });
 
+  it('should parse styles containing multiple colons correctly', () => {
+    const inlineStyle = 'background:url(https://test.com/image.png);color:white;';
+    const expectedStyleObject = {
+      background: 'url(https://test.com/image.png)',
+      color: 'white'
+    };
+    expect(inlineStyleToObject(inlineStyle)).toEqual(expectedStyleObject);
+  });
+
 });