Merge pull request #182 from remarkablemark/refactor/style-to-js

refactor: replace `cssToJs` with `style-to-js` and remove `camelCase`

Author: remarkablemark

lib/attributes-to-props.js

@@ -1,15 +1,15 @@
 var reactProperty = require('react-property');
-var styleToObject = require('style-to-object');
+var styleToJS = require('style-to-js').default;
 var utilities = require('./utilities');
 
-var camelCase = utilities.camelCase;
-
 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.
  *
@@ -61,31 +61,10 @@ function attributesToProps(attributes) {
 
   // convert inline style to object
   if (attributes.style != null) {
-    props.style = cssToJs(attributes.style);
+    props.style = styleToJS(attributes.style, styleToJSOptions);
   }
 
   return props;
 }
 
-/**
- * Converts inline CSS style to POJO (Plain Old JavaScript Object).
- *
- * @param  {String} style - The inline CSS style.
- * @return {Object}       - The style object.
- */
-function cssToJs(style) {
-  var styleObject = {};
-
-  if (style) {
-    styleToObject(style, function (property, value) {
-      // skip CSS comment
-      if (property && value) {
-        styleObject[camelCase(property)] = value;
-      }
-    });
-  }
-
-  return styleObject;
-}
-
 module.exports = attributesToProps;

lib/utilities.js

@@ -1,30 +1,4 @@
 var React = require('react');
-var hyphenPatternRegex = /-([a-z])/g;
-var CUSTOM_PROPERTY_OR_NO_HYPHEN_REGEX = /^--[a-zA-Z0-9-]+$|^[^-]+$/;
-
-/**
- * Converts a string to camelCase.
- *
- * @param  {String} string - The string.
- * @return {String}
- */
-function camelCase(string) {
-  if (typeof string !== 'string') {
-    throw new TypeError('First argument must be a string');
-  }
-
-  // custom property or no hyphen found
-  if (CUSTOM_PROPERTY_OR_NO_HYPHEN_REGEX.test(string)) {
-    return string;
-  }
-
-  // convert to camelCase
-  return string
-    .toLowerCase()
-    .replace(hyphenPatternRegex, function (_, character) {
-      return character.toUpperCase();
-    });
-}
 
 /**
  * Swap key with value in an object.
@@ -104,7 +78,6 @@ var PRESERVE_CUSTOM_ATTRIBUTES = React.version.split('.')[0] >= 16;
 
 module.exports = {
   PRESERVE_CUSTOM_ATTRIBUTES: PRESERVE_CUSTOM_ATTRIBUTES,
-  camelCase: camelCase,
   invertObject: invertObject,
   isCustomComponent: isCustomComponent
 };

package.json

@@ -35,7 +35,7 @@
     "@types/htmlparser2": "3.10.1",
     "html-dom-parser": "0.3.0",
     "react-property": "1.0.1",
-    "style-to-object": "0.3.0"
+    "style-to-js": "1.1.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^8.3.5",

test/__snapshots__/attributes-to-props.test.js.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`attributes to props style parses CSS to JS 1`] = `
+Object {
+  "style": Object {
+    "--custom-property": "#f00",
+    "MozBorderRadiusBottomleft": "20px'",
+    "WebkitBorderTopRightRadius": "10rem",
+    "background": "url(data:image/png; base64,ivborw0kggoaaaansaaaabgdbtueaalgpc/xhbqaaaafzmuexurczmzpf399fx1+bm5mzy9avzxbesmgces5/p8/t9furvcrmu73jwlzosgsiizurcjo/ad+eqjjb4hv8bft+idpqocx1wjosbfhh2xssxeiyn3uli/6mnree07uiwjev8u8czwyuqdlkpg1bkb4nnm+veanfhqn1k4+gpt6ugqcvu2h2ovuif)",
+    "borderBottomLeftRadius": "1em",
+    "borderRightStyle": "solid",
+    "color": "#f00",
+    "fontSize": "42px",
+    "zIndex": "-1",
+  },
+}
+`;

test/attributes-to-props.test.js

@@ -160,62 +160,30 @@ describe('attributes to props', () => {
 
   // cssToJs
   describe('style', () => {
-    it('parses empty inline style to object', () => {
-      expect(attributesToProps({ style: '' })).toEqual({ style: {} });
+    const propsEmptyStyle = { style: {} };
+
+    it.each([undefined, null])('does not parse invalid value: %s', style => {
+      expect(attributesToProps({ style })).toEqual({ style });
     });
 
     it('does not parse CSS comment', () => {
-      expect(attributesToProps({ style: '/* comment */' })).toEqual({
-        style: {}
-      });
+      const style = '/* comment */';
+      expect(attributesToProps({ style })).toEqual(propsEmptyStyle);
     });
 
-    it('parses inline style to object', () => {
-      expect(
-        attributesToProps({
-          style:
-            'color: #f00; font-size: 42px; z-index: -1; -moz-border-radius-topright: 10px; background: url(data:image/png; base64,ivborw0kggoaaaansaaaabgdbtueaalgpc/xhbqaaaafzmuexurczmzpf399fx1+bm5mzy9avzxbesmgces5/p8/t9furvcrmu73jwlzosgsiizurcjo/ad+eqjjb4hv8bft+idpqocx1wjosbfhh2xssxeiyn3uli/6mnree07uiwjev8u8czwyuqdlkpg1bkb4nnm+veanfhqn1k4+gpt6ugqcvu2h2ovuif)'
-        })
-      ).toEqual({
-        style: {
-          color: '#f00',
-          fontSize: '42px',
-          zIndex: '-1',
-          MozBorderRadiusTopright: '10px',
-          background:
-            'url(data:image/png; base64,ivborw0kggoaaaansaaaabgdbtueaalgpc/xhbqaaaafzmuexurczmzpf399fx1+bm5mzy9avzxbesmgces5/p8/t9furvcrmu73jwlzosgsiizurcjo/ad+eqjjb4hv8bft+idpqocx1wjosbfhh2xssxeiyn3uli/6mnree07uiwjev8u8czwyuqdlkpg1bkb4nnm+veanfhqn1k4+gpt6ugqcvu2h2ovuif)'
-        }
-      });
-
-      expect(
-        attributesToProps({
-          style:
-            'border-bottom-left-radius:1em;border-right-style:solid;Z-Index:-1;-moz-border-radius-bottomleft:20px'
-        })
-      ).toEqual({
-        style: {
-          borderBottomLeftRadius: '1em',
-          borderRightStyle: 'solid',
-          zIndex: '-1',
-          MozBorderRadiusBottomleft: '20px'
-        }
-      });
-
-      expect(
-        attributesToProps({
-          style: null
-        })
-      ).toEqual({
-        style: null
-      });
+    it('parses "" to {}', () => {
+      const style = '';
+      expect(attributesToProps({ style })).toEqual(propsEmptyStyle);
+    });
 
-      expect(
-        attributesToProps({
-          style: undefined
-        })
-      ).toEqual({
-        style: undefined
-      });
+    it('parses CSS to JS', () => {
+      const style = `
+        color: #f00; font-size: 42px; z-index: -1; -webkit-border-top-right-radius: 10rem; background: url(data:image/png; base64,ivborw0kggoaaaansaaaabgdbtueaalgpc/xhbqaaaafzmuexurczmzpf399fx1+bm5mzy9avzxbesmgces5/p8/t9furvcrmu73jwlzosgsiizurcjo/ad+eqjjb4hv8bft+idpqocx1wjosbfhh2xssxeiyn3uli/6mnree07uiwjev8u8czwyuqdlkpg1bkb4nnm+veanfhqn1k4+gpt6ugqcvu2h2ovuif);
+        /* display: block;  */
+        --custom-property: #f00;
+        border-bottom-left-radius:1em;border-right-style:solid;Z-Index:-1;-moz-border-radius-bottomleft:20px'
+      `;
+      expect(attributesToProps({ style })).toMatchSnapshot();
     });
   });
 

test/utilities.test.js

@@ -1,45 +1,11 @@
 const React = require('react');
 const {
   PRESERVE_CUSTOM_ATTRIBUTES,
-  camelCase,
   invertObject,
   isCustomComponent
 } = require('../lib/utilities');
 
 describe('utilities', () => {
-  describe('camelCase', () => {
-    it.each([undefined, null, {}, [], 0, 1, () => {}, new Date()])(
-      'throws an error if first argument is %p',
-      input => {
-        expect(() => {
-          camelCase(input);
-        }).toThrow(TypeError);
-      }
-    );
-
-    it.each([
-      ['', ''],
-      ['foo', 'foo'],
-      ['fooBar', 'fooBar'],
-      ['--fooBar', '--fooBar'],
-      ['--foo-bar', '--foo-bar'],
-      ['--foo-100', '--foo-100']
-    ])(
-      'does not modify string if it does not need to be camelCased',
-      (input, expected) => {
-        expect(camelCase(input)).toBe(expected);
-      }
-    );
-
-    it.each([
-      ['foo-bar', 'fooBar'],
-      ['foo-bar-baz', 'fooBarBaz'],
-      ['CAMEL-CASE', 'camelCase']
-    ])('camelCases a string', (input, expected) => {
-      expect(camelCase(input)).toBe(expected);
-    });
-  });
-
   describe('invertObject', () => {
     it.each([undefined, null, 'string', 0, 1, () => {}])(
       `throws an error if the first argument is %p`,