Merge pull request #117 from lencioni/prefixProperty-order

Preserve style order in prefixProperty

Author: Robin Frischmann

modules/static/createPrefixer.js

@@ -43,7 +43,7 @@ StaticData
           style[property] = processedValue
         }
 
-        prefixProperty(prefixMap, property, style)
+        style = prefixProperty(prefixMap, property, style)
       }
     }
 

modules/utils/prefixProperty.js

@@ -5,11 +5,27 @@ export default function prefixProperty(
   prefixProperties: Object,
   property: string,
   style: Object
-): void {
-  if (prefixProperties.hasOwnProperty(property)) {
-    const requiredPrefixes = prefixProperties[property]
-    for (let i = 0, len = requiredPrefixes.length; i < len; ++i) {
-      style[requiredPrefixes[i] + capitalizeString(property)] = style[property]
-    }
+): Object {
+  if (!prefixProperties.hasOwnProperty(property)) {
+    return style
   }
+
+  // We need to preserve the order of the styles while inserting new prefixed
+  // styles. Object order is not guaranteed, but this is better than nothing.
+  // Note that this is brittle and is likely to break in older versions of
+  // Node (e.g. Node 4).
+  const newStyle = {}
+  Object.keys(style).forEach((styleProperty) => {
+    if (styleProperty === property) {
+      // We've found the style we need to prefix.
+      const requiredPrefixes = prefixProperties[property]
+      for (let i = 0, len = requiredPrefixes.length; i < len; ++i) {
+        newStyle[requiredPrefixes[i] + capitalizeString(property)] = style[property]
+      }
+    }
+
+    newStyle[styleProperty] = style[styleProperty]
+  })
+
+  return newStyle
 }

test/dynamic/createPrefixer-test.js

@@ -386,5 +386,33 @@ describe('Dynamic Prefixer', () => {
       }
       expect(Prefixer.prefixAll(input)).to.eql(output)
     })
+
+    it('puts the prefixes in the correct order', () => {
+      const input = { userSelect: 'none' }
+      const order = [
+        'WebkitUserSelect',
+        'MozUserSelect',
+        'msUserSelect',
+        'userSelect'
+      ]
+      expect(Object.keys(Prefixer.prefixAll(input))).to.eql(order)
+    });
+
+    it('does not mess up the order of other styles', () => {
+      const input = {
+        color: 'red',
+        userSelect: 'none',
+        border: 0
+      }
+      const order = [
+        'color',
+        'WebkitUserSelect',
+        'MozUserSelect',
+        'msUserSelect',
+        'userSelect',
+        'border'
+      ]
+      expect(Object.keys(Prefixer.prefixAll(input))).to.eql(order)
+    });
   })
 })

test/static/createPrefixer-test.js

@@ -21,6 +21,34 @@ describe('Static Prefixer', () => {
       expect(prefixAll(input)).to.eql(output)
     })
 
+    it('puts the prefixes in the correct order', () => {
+      const input = { userSelect: 'none' }
+      const order = [
+        'WebkitUserSelect',
+        'MozUserSelect',
+        'msUserSelect',
+        'userSelect'
+      ]
+      expect(Object.keys(prefixAll(input))).to.eql(order)
+    });
+
+    it('does not mess up the order of other styles', () => {
+      const input = {
+        color: 'red',
+        userSelect: 'none',
+        border: 0
+      }
+      const order = [
+        'color',
+        'WebkitUserSelect',
+        'MozUserSelect',
+        'msUserSelect',
+        'userSelect',
+        'border'
+      ]
+      expect(Object.keys(prefixAll(input))).to.eql(order)
+    });
+
     it('should use dash-cased alternative values in array', () => {
       const input = { marginLeft: 'calc(30deg)' }
       const output = { marginLeft: ['-webkit-calc(30deg)', '-moz-calc(30deg)', 'calc(30deg)'] }