refactor: replace cssToJs with style-to-js & remove camelCase

Save `style-to-js@1.1.0` to package.json "dependencies"

https://github.com/remarkablemark/style-to-js/releases/tag/v1.1.0

Update tests

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/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`,