refactor(utilities): create setStyleProp helper from styleToJS

Add tests

Author: remarkablemark

lib/attributes-to-props.js

@@ -1,20 +1,19 @@
 var reactProperty = require('react-property');
-var styleToJS = require('style-to-js').default;
 var utilities = require('./utilities');
 
+var setStyleProp = utilities.setStyleProp;
+
 var htmlProperties = reactProperty.html;
 var svgProperties = reactProperty.svg;
 var isCustomAttribute = reactProperty.isCustomAttribute;
 
 var hasOwnProperty = Object.prototype.hasOwnProperty;
 
-var styleToJSOptions = { reactCompat: true };
-
 /**
  * Converts HTML/SVG DOM attributes to React props.
  *
- * @param  {Object} [attributes={}] - The HTML/SVG DOM attributes.
- * @return {Object}                 - The React props.
+ * @param  {object} [attributes={}] - HTML/SVG DOM attributes.
+ * @return {object}                 - React props.
  */
 function attributesToProps(attributes) {
   attributes = attributes || {};
@@ -59,10 +58,8 @@ function attributesToProps(attributes) {
     }
   }
 
-  // convert inline style to object
-  if (attributes.style != null) {
-    props.style = styleToJS(attributes.style, styleToJSOptions);
-  }
+  // transform inline style to object
+  setStyleProp(attributes.style, props);
 
   return props;
 }

lib/utilities.js

@@ -1,4 +1,5 @@
 var React = require('react');
+var styleToJS = require('style-to-js').default;
 
 /**
  * Swap key with value in an object.
@@ -70,14 +71,30 @@ function isCustomComponent(tagName, props) {
   }
 }
 
+var styleToJSOptions = { reactCompat: true };
+
+/**
+ * Sets style prop.
+ *
+ * @param {null|undefined|string} style
+ * @param {object} props
+ */
+function setStyleProp(style, props) {
+  if (style === null || style === undefined) {
+    return;
+  }
+  props.style = styleToJS(style, styleToJSOptions);
+}
+
 /**
- * @constant {Boolean}
+ * @constant {boolean}
  * @see {@link https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html}
  */
 var PRESERVE_CUSTOM_ATTRIBUTES = React.version.split('.')[0] >= 16;
 
 module.exports = {
   PRESERVE_CUSTOM_ATTRIBUTES: PRESERVE_CUSTOM_ATTRIBUTES,
   invertObject: invertObject,
-  isCustomComponent: isCustomComponent
+  isCustomComponent: isCustomComponent,
+  setStyleProp: setStyleProp
 };

test/__snapshots__/utilities.test.js.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`setStyleProp sets props.style 1`] = `
+Object {
+  "style": Object {
+    "WebkitUserSelect": "none",
+    "backgroundColor": "#bada55",
+    "backgroundImage": "linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)),
+        url('https://mdn.mozillademos.org/files/7693/catfront.png')",
+    "color": "red",
+    "lineHeight": "1",
+  },
+  "width": 100,
+}
+`;

test/utilities.test.js

@@ -2,7 +2,8 @@ const React = require('react');
 const {
   PRESERVE_CUSTOM_ATTRIBUTES,
   invertObject,
-  isCustomComponent
+  isCustomComponent,
+  setStyleProp
 } = require('../lib/utilities');
 
 describe('invertObject', () => {
@@ -91,3 +92,29 @@ describe('PRESERVE_CUSTOM_ATTRIBUTES', () => {
     expect(PRESERVE_CUSTOM_ATTRIBUTES).toBe(isReactGreaterThan15);
   });
 });
+
+describe('setStyleProp', () => {
+  it.each([undefined, null])(
+    'does not set props.style when style=%p',
+    style => {
+      const props = {};
+      expect(setStyleProp(style, props)).toBe(undefined);
+      expect(props).toEqual({});
+    }
+  );
+
+  it('sets props.style', () => {
+    const style = `
+      color: red;
+      background-color: #bada55;
+      -webkit-user-select: none;
+      line-height: 1;
+      background-image:
+        linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)),
+        url('https://mdn.mozillademos.org/files/7693/catfront.png');
+    `;
+    const props = { style: { foo: 'bar' }, width: 100 };
+    expect(setStyleProp(style, props)).toBe(undefined);
+    expect(props).toMatchSnapshot();
+  });
+});