added array prefixing to Prefixer.prefix

Author: rofrischmann

modules/Prefixer.js

@@ -2,7 +2,6 @@ import prefixAll from './static/prefixAll'
 import getBrowserInformation from './utils/getBrowserInformation'
 import getPrefixedKeyframes from './utils/getPrefixedKeyframes'
 import capitalizeString from './utils/capitalizeString'
-import assign from './utils/assign'
 import prefixProps from './prefixProps'
 
 import calc from './plugins/calc'
@@ -82,11 +81,9 @@ export default class Prefixer {
       return styles
     }
 
-    styles = assign({ }, styles)
-
     Object.keys(styles).forEach(property => {
       let value = styles[property]
-      if (value instanceof Object) {
+      if (value instanceof Object && !Array.isArray(value)) {
         // recurse through nested style objects
         styles[property] = this.prefix(value)
       } else {
@@ -101,24 +98,24 @@ export default class Prefixer {
     })
 
     Object.keys(styles).forEach(property => {
-      const value = styles[property]
-      // resolve plugins
-      plugins.forEach(plugin => {
-        // generates a new plugin interface with current data
-        const resolvedStyles = plugin({
-          property: property,
-          value: value,
-          styles: styles,
-          browserInfo: this._browserInfo,
-          prefix: {
-            js: this.jsPrefix,
-            css: this.cssPrefix,
-            keyframes: this.prefixedKeyframes
-          },
-          keepUnprefixed: this._keepUnprefixed,
-          requiresPrefix: this._requiresPrefix
+      [ ].concat(styles[property]).forEach(value => {
+        // resolve plugins
+        plugins.forEach(plugin => {
+          // generates a new plugin interface with current data
+          assignStyles(styles, plugin({
+            property: property,
+            value: value,
+            styles: styles,
+            browserInfo: this._browserInfo,
+            prefix: {
+              js: this.jsPrefix,
+              css: this.cssPrefix,
+              keyframes: this.prefixedKeyframes
+            },
+            keepUnprefixed: this._keepUnprefixed,
+            requiresPrefix: this._requiresPrefix
+          }), value, this._keepUnprefixed)
         })
-        assign(styles, resolvedStyles)
       })
     })
 
@@ -134,3 +131,18 @@ export default class Prefixer {
     return prefixAll(styles)
   }
 }
+
+function assignStyles(base, extend = { }, value, keepUnprefixed) {
+  Object.keys(extend).forEach(property => {
+    const baseValue = base[property]
+    if (Array.isArray(baseValue)) {
+      [ ].concat(extend[property]).forEach(val => {
+        if (base[property].indexOf(val) === -1) {
+          base[property].splice(baseValue.indexOf(value), keepUnprefixed ? 0 : 1, val)
+        }
+      })
+    } else {
+      base[property] = extend[property]
+    }
+  })
+}

modules/plugins/calc.js

@@ -1,3 +1,5 @@
+import getPrefixedValue from '../utils/getPrefixedValue'
+
 export default function calc({ property, value, browserInfo: { browser, version }, prefix: { css }, keepUnprefixed }) {
   if (
     typeof value === 'string' && value.indexOf('calc(') > -1 &&
@@ -8,9 +10,8 @@ export default function calc({ property, value, browserInfo: { browser, version
     browser === 'ios_saf' && version < 7
     )
   ) {
-    const prefixedValue = value.replace(/calc\(/g, css + 'calc(')
     return {
-      [property]: keepUnprefixed ? [ prefixedValue, value ] : prefixedValue
+      [property]: getPrefixedValue(value.replace(/calc\(/g, css + 'calc('), value, keepUnprefixed)
     }
   }
 }

modules/plugins/flex.js

@@ -1,3 +1,5 @@
+import getPrefixedValue from '../utils/getPrefixedValue'
+
 const values = { flex: true, 'inline-flex': true }
 
 export default function flex({ property, value, browserInfo: { browser, version }, prefix: { css }, keepUnprefixed }) {
@@ -9,9 +11,8 @@ export default function flex({ property, value, browserInfo: { browser, version
     browser === 'opera' && (version == 15 || version == 16)
     )
   ) {
-    const prefixedValue = css + value
     return {
-      display: keepUnprefixed ? [ prefixedValue, value ] : prefixedValue
+      display: getPrefixedValue(css + value, value, keepUnprefixed)
     }
   }
 }

modules/plugins/flexboxIE.js

@@ -1,3 +1,5 @@
+import getPrefixedValue from '../utils/getPrefixedValue'
+
 const alternativeValues = {
   'space-around': 'distribute',
   'space-between': 'justify',
@@ -17,24 +19,18 @@ const alternativeProps = {
   flexBasis: 'msPreferredSize'
 }
 
-const properties = Object.keys(alternativeProps).reduce((result, prop) => {
-  result[prop] = true
-  return result
-}, { })
-
 export default function flexboxIE({ property, value, styles, browserInfo: { browser, version }, prefix: { css }, keepUnprefixed }) {
   if (
-    (properties[property] || property === 'display' && typeof value === 'string' && value.indexOf('flex') > -1) &&
+    (alternativeProps[property] || property === 'display' && typeof value === 'string' && value.indexOf('flex') > -1) &&
     (
     (browser === 'ie_mob' || browser === 'ie') && version == 10)
   ) {
-    if (!keepUnprefixed) {
+    if (!keepUnprefixed && !Array.isArray(styles[property])) {
       delete styles[property]
     }
     if (property === 'display' && alternativeValues[value]) {
-      const prefixedValue = css + alternativeValues[value]
       return {
-        display: keepUnprefixed ? [ prefixedValue, value ] : prefixedValue
+        display: getPrefixedValue(css + alternativeValues[value], value, keepUnprefixed)
       }
     }
     if (alternativeProps[property]) {

modules/plugins/flexboxOld.js

@@ -1,3 +1,5 @@
+import getPrefixedValue from '../utils/getPrefixedValue'
+
 const alternativeValues = {
   'space-around': 'justify',
   'space-between': 'justify',
@@ -16,15 +18,11 @@ const alternativeProps = {
 }
 
 const otherProps = [ 'alignContent', 'alignSelf', 'order', 'flexGrow', 'flexShrink', 'flexBasis', 'flexDirection' ]
-
-const properties = Object.keys(alternativeProps).concat(otherProps).reduce((result, prop) => {
-  result[prop] = true
-  return result
-}, { })
+const properties = Object.keys(alternativeProps).concat(otherProps)
 
 export default function flexboxOld({ property, value, styles, browserInfo: { browser, version }, prefix: { css }, keepUnprefixed }) {
   if (
-    (properties[property] || property === 'display' && typeof value === 'string' && value.indexOf('flex') > -1) &&
+    (properties.indexOf(property) > -1 || property === 'display' && typeof value === 'string' && value.indexOf('flex') > -1) &&
     (
     browser === 'firefox' && version < 22 ||
     browser === 'chrome' && version < 21 ||
@@ -33,7 +31,7 @@ export default function flexboxOld({ property, value, styles, browserInfo: { bro
     browser === 'and_uc'
     )
   ) {
-    if (!keepUnprefixed) {
+    if (!keepUnprefixed && !Array.isArray(styles[property])) {
       delete styles[property]
     }
     if (property === 'flexDirection') {
@@ -43,9 +41,8 @@ export default function flexboxOld({ property, value, styles, browserInfo: { bro
       }
     }
     if (property === 'display' && alternativeValues[value]) {
-      const prefixedValue = css + alternativeValues[value]
       return {
-        display: keepUnprefixed ? [ prefixedValue, value ] : prefixedValue
+        display: getPrefixedValue(css + alternativeValues[value], value, keepUnprefixed)
       }
     }
     if (alternativeProps[property]) {

modules/plugins/grabCursor.js

@@ -1,3 +1,5 @@
+import getPrefixedValue from '../utils/getPrefixedValue'
+
 const values = { grab: true, grabbing: true }
 
 export default function grabCursor({ property, value, browserInfo: { browser, version }, prefix: { css }, keepUnprefixed }) {
@@ -11,9 +13,8 @@ export default function grabCursor({ property, value, browserInfo: { browser, ve
     browser === 'opera'
     )
   ) {
-    const prefixedValue = css + value
     return {
-      cursor: keepUnprefixed ? [ prefixedValue, value ] : prefixedValue
+      cursor: getPrefixedValue(css + value, value, keepUnprefixed)
     }
   }
 }

modules/plugins/gradient.js

@@ -1,3 +1,5 @@
+import getPrefixedValue from '../utils/getPrefixedValue'
+
 const values = /linear-gradient|radial-gradient|repeating-linear-gradient|repeating-radial-gradient/
 
 export default function gradient({ property, value, browserInfo: { browser, version }, prefix: { css }, keepUnprefixed }) {
@@ -12,9 +14,8 @@ export default function gradient({ property, value, browserInfo: { browser, vers
     browser === 'and_uc'
     )
   ) {
-    const prefixedValue = css + value
     return {
-      [property]: keepUnprefixed ? [ prefixedValue, value ] : prefixedValue
+      [property]: getPrefixedValue(css + value, value, keepUnprefixed)
     }
   }
 }

modules/plugins/sizing.js

@@ -1,3 +1,5 @@
+import getPrefixedValue from '../utils/getPrefixedValue'
+
 const properties = {
   maxHeight: true,
   maxWidth: true,
@@ -19,9 +21,8 @@ export default function sizing({ property, value, prefix: { css }, keepUnprefixe
   // This might change in the future
   // Keep an eye on it
   if (properties[property] && values[value]) {
-    const prefixedValue = css + value
     return {
-      [property]: keepUnprefixed ? [ prefixedValue, value ] : prefixedValue
+      [property]: getPrefixedValue(css + value, value, keepUnprefixed)
     }
   }
 }

modules/plugins/transition.js

@@ -9,6 +9,7 @@ export default function transition({ property, value, prefix: { css }, requiresP
   const unprefixedProperty = unprefixProperty(property)
 
   if (typeof value === 'string' && properties[unprefixedProperty]) {
+    // TODO: memoize this array
     const requiresPrefixDashCased = Object.keys(requiresPrefix).map(prop => hyphenateStyleName(prop))
 
     // only split multi values, not cubic beziers

modules/plugins/zoomCursor.js

@@ -1,3 +1,5 @@
+import getPrefixedValue from '../utils/getPrefixedValue'
+
 const values = { 'zoom-in': true, 'zoom-out': true }
 
 export default function zoomCursor({ property, value, browserInfo: { browser, version }, prefix: { css }, keepUnprefixed }) {
@@ -10,9 +12,8 @@ export default function zoomCursor({ property, value, browserInfo: { browser, ve
     browser === 'opera' && version < 24
     )
   ) {
-    const prefixedValue = css + value
     return {
-      cursor: keepUnprefixed ? [ prefixedValue, value ] : prefixedValue
+      cursor: getPrefixedValue(css + value, value, keepUnprefixed)
     }
   }
 }