react-faux-dom - npm Package Compare versions

Comparing version 2.2.0 to 2.3.0

CHANGES.md

@@ -0,1 +1,10 @@
+# 2.3.0
+
+ * Merge [#38](https://github.com/Olical/react-faux-dom/pull/38#issuecomment-189248845) - Fix vendor prefixes for already camelCased style names
+
+# 2.2.0
+
+ * Merge [#35](https://github.com/Olical/react-faux-dom/pull/35) - Define `childNodes` in `Element`
+ * Some small README improvements
+
 # 2.1.1
@@ -2,0 +11,0 @@

package.json

 {
   "name": "react-faux-dom",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "DOM like data structure to be mutated by D3 et al, then rendered to React elements",
@@ -5,0 +5,0 @@ "main": "src/ReactFauxDOM.js",

src/Element.js

@@ -14,4 +14,11 @@ var React = require('react')
 
-  if (name[0] === '-') {
-    return camel[0].toUpperCase() + camel.slice(1)
+  // Detect if the style property is already camelCased
+  // To not convert Webkit*, Moz* and O* to lowercase
+  if (camel.charAt(0).toUpperCase() === name.charAt(0)) {
+    return name.charAt(0) + camel.slice(1)
+  }
+
+  if (name.charAt(0) === '-') {
+    return camel.indexOf('ms') === 0 ? camel
+      : camel.charAt(0).toUpperCase() + camel.slice(1)
   } else {
@@ -18,0 +25,0 @@ return camel

test/style.js

@@ -56,1 +56,16 @@ var test = require('tape')
 })
+
+test('pascal-cased, vendor prefixed styles are not camel-cased', function (t) {
+  var el = mk().node()
+  el.setAttribute('style', 'WebkitTransition: opacity 100ms ease')
+  t.plan(1)
+  t.equal(el.style.WebkitTransition, 'opacity 100ms ease')
+})
+
+test('-ms- and ms* vendor prefixed styles are supported', function (t) {
+  t.plan(2)
+  var el = mk().node()
+  el.setAttribute('style', 'msTransform: opacity 100ms ease; -ms-animation: 1s ease popIn')
+  t.equal(el.style.msTransform, 'opacity 100ms ease')
+  t.equal(el.style.msAnimation, '1s ease popIn')
+})

No alert changes

Improved metrics

Total package byte prevSize

31716

increased by3.67%

Lines of code

689

increased by2.84%

No dependency changes