#89 fixed array prefixing with fallback values

closes #89

Author: rofrischmann

modules/static/plugins/calc.js

@@ -1,12 +1,8 @@
-import joinPrefixedRules from '../../utils/joinPrefixedRules'
+import joinPrefixedValue from '../../utils/joinPrefixedValue'
 import isPrefixedValue from '../../utils/isPrefixedValue'
 
 export default function calc(property, value) {
-  if (typeof value === 'string' && value.indexOf('calc(') > -1) {
-    if (isPrefixedValue(value)) {
-      return
-    }
-
-    return joinPrefixedRules(property, value, (prefix, value) => value.replace(/calc\(/g, prefix + 'calc('))
+  if (typeof value === 'string' && !isPrefixedValue(value) && value.indexOf('calc(') > -1) {
+    return joinPrefixedValue(property, value, (prefix, value) => value.replace(/calc\(/g, prefix + 'calc('))
   }
 }

modules/static/plugins/cursor.js

@@ -1,4 +1,4 @@
-import joinPrefixedRules from '../../utils/joinPrefixedRules'
+import joinPrefixedValue from '../../utils/joinPrefixedValue'
 
 const values = {
   'zoom-in': true,
@@ -9,6 +9,6 @@ const values = {
 
 export default function cursor(property, value) {
   if (property === 'cursor' && values[value]) {
-    return joinPrefixedRules(property, value)
+    return joinPrefixedValue(property, value)
   }
 }

modules/static/plugins/gradient.js

@@ -1,14 +1,10 @@
-import joinPrefixedRules from '../../utils/joinPrefixedRules'
+import joinPrefixedValue from '../../utils/joinPrefixedValue'
 import isPrefixedValue from '../../utils/isPrefixedValue'
 
 const values = /linear-gradient|radial-gradient|repeating-linear-gradient|repeating-radial-gradient/
 
 export default function gradient(property, value) {
-  if (typeof value === 'string' && value.match(values) !== null) {
-    if (isPrefixedValue(value)) {
-      return
-    }
-
-    return joinPrefixedRules(property, value)
+  if (typeof value === 'string' && !isPrefixedValue(value) && value.match(values) !== null) {
+    return joinPrefixedValue(property, value)
   }
 }

modules/static/plugins/sizing.js

@@ -1,4 +1,4 @@
-import joinPrefixedRules from '../../utils/joinPrefixedRules'
+import joinPrefixedValue from '../../utils/joinPrefixedValue'
 
 const properties = {
   maxHeight: true,
@@ -19,6 +19,6 @@ const values = {
 
 export default function sizing(property, value) {
   if (properties[property] && values[value]) {
-    return joinPrefixedRules(property, value)
+    return joinPrefixedValue(property, value)
   }
 }

modules/static/prefixAll.js

@@ -1,6 +1,5 @@
 import prefixProperties from './prefixProps'
 import capitalizeString from '../utils/capitalizeString'
-import assign from '../utils/assign'
 
 import calc from './plugins/calc'
 import cursor from './plugins/cursor'
@@ -34,9 +33,6 @@ export default function prefixAll(styles) {
     if (value instanceof Object && !Array.isArray(value)) {
       // recurse through nested style objects
       styles[property] = prefixAll(value)
-    } else if (Array.isArray(value)) {
-      // prefix fallback arrays
-      assign(styles, prefixArray(property, value))
     } else {
       Object.keys(prefixProperties).forEach(prefix => {
         const properties = prefixProperties[prefix]
@@ -49,42 +45,28 @@ export default function prefixAll(styles) {
   })
 
   Object.keys(styles).forEach(property => {
-    const value = styles[property]
-    // resolve every special plugins
-    plugins.forEach(plugin => assign(styles, plugin(property, value)))
+    [ ].concat(styles[property]).forEach((value, index) => {
+      // resolve every special plugins
+      plugins.forEach(plugin => assignStyles(styles, plugin(property, value)))
+    })
   })
 
   return styles
 }
 
-function prefixArray(property, valueArray) {
-  let result = { }
-  valueArray.forEach(value => {
-    plugins.forEach(plugin => {
-      let prefixed = plugin(property, value)
-      if (prefixed) {
-        Object.keys(prefixed).forEach(prop => {
-          const entry = prefixed[prop]
-          result[prop] = result[prop] ? mergeValues(result[prop], entry) : entry
-        })
-      }
-    })
-    if (!result[property]) {
-      result[property] = value
-    }
-  })
-  return result
-}
-
-function mergeValues(existing, toMerge) {
-  let merged = existing
-  let valuesToMerge = Array.isArray(toMerge) ? toMerge : [ toMerge ]
-  valuesToMerge.forEach(value => {
-    if (Array.isArray(merged) && merged.indexOf(value) === -1) {
-      merged.push(value)
-    } else if (merged !== value) {
-      merged = [ merged, value ]
+function assignStyles(base, extend = { }) {
+  Object.keys(extend).forEach(property => {
+    const baseValue = base[property]
+    if (Array.isArray(baseValue)) {
+      [ ].concat(extend[property]).forEach(value => {
+        const valueIndex = baseValue.indexOf(value)
+        if (valueIndex > -1) {
+          base[property].splice(valueIndex, 1)
+        }
+        base[property].push(value)
+      })
+    } else {
+      base[property] = extend[property]
     }
   })
-  return merged
 }

modules/utils/joinPrefixedRules.js modules/utils/joinPrefixedValue.jsmodules/utils/joinPrefixedRules.js renamed to modules/utils/joinPrefixedValue.js

@@ -226,6 +226,15 @@ describe('Resolving special plugins', () => {
     expect(prefixAll(input)).to.eql(output)
   })
 
+  it('should prefix special sizing values', () => {
+    const input = { width: [ 'min-content', '100%' ] }
+    const output = {
+      width: [ '100%', '-webkit-min-content', '-moz-min-content', 'min-content' ]
+    }
+    expect(prefixAll(input)).to.eql(output)
+    expect(prefixAll(input)).to.eql(output)
+  })
+
   it('should prefix special sizing values', () => {
     const input = { width: [ 'calc(100%)', 'min-content' ] }
     const output = {
@@ -252,5 +261,4 @@ describe('Resolving special plugins', () => {
     expect(prefixAll(input)).to.eql(output)
     expect(prefixAll(input)).to.eql(output)
   })
-
 })